How to add jQuery calendar widget to blogger

Theo như yêu cầu hôm tay tôi sẽ hướng dẫn các bạn add 1 widget Calendar lên blog của bạn giống như trên hình.

Đây chỉ là 1 dạng tờ lịch hiển thị chứ không phải giống như mấy Calendar trên blog yahoo hay dùng. Calendar trên yahoo ngoài việc hiển thị ngày tháng ra thì bạn có thể xem các bài viết theo từng ngày bằng cách click ngay trên tờ lịch nó. Nhưng widget calendar hôm nay tôi giới thiệu cho các bạn đơn giản chỉ là 1 tờ lịch trang trí mà thôi.

Đầu tiên các bạn đăng nhập vào blog -> Layout -> Edit HTML rồi copy đoạn CSS dưới vào phía trên đoạn code ]]></b:skin>

#datepicker_div, .datepicker_inline {
 font-family: Arial,Helvetica,sans-serif;
 font-size: 14px;
 padding: 0;
 margin: 0;
 background: #DDD;
 width: 300px;
}
#datepicker_div {
 display: none;
 border: 1px solid #FF9900;
 z-index: 10;
}
.datepicker_inline {
 float: center;
 display: block;
 border: 0;
}
.datepicker_dialog {
 padding: 5px !important;
 border: 4px ridge #DDD !important;
}
button.datepicker_trigger {
 width: 25px;
}
img.datepicker_trigger {
 margin: 2px;
 vertical-align: middle;
}
.datepicker_prompt {
 float: center;
 padding: 2px;
 background: #DDD;
 color: #000;
}
*html .datepicker_prompt {
 width: 185px;
}
.datepicker_control, .datepicker_links, .datepicker_header, .datepicker {
 clear: both;
 float: center;
 width: 100%;
 color: #FFF;
}
.datepicker_control {
 background: #FF9900;
 padding: 2px 0px;
}
.datepicker_links {
 background: #E0F4D7;
 padding: 2px 0px;
}
.datepicker_control, .datepicker_links {
 font-weight: bold;
 font-size: 80%;
 letter-spacing: 1px;
}
.datepicker_links label {
 padding: 2px 5px;
 color: #888;
}
.datepicker_clear, .datepicker_prev {
 float: left;
 width: 34%;
}
.datepicker_current {
 float: left;
 width: 30%;
 text-align: center;
}
.datepicker_close, .datepicker_next {
 float: right;
 width: 34%;
 text-align: right;
}
.datepicker_header {
 padding: 1px 0 3px;
 background: #83C948;
 text-align: center;
 font-weight: bold;
 height: 1.3em;
}
.datepicker_header select {
 background: #83C948;
 color: #000;
 border: 0px;
 font-weight: bold;
}
.datepicker {
 background: #CCC;
 text-align: center;
 font-size: 100%;
}
.datepicker a {
 display: block;
 width: 100%;
}
.datepicker .datepicker_titleRow {
 background: #B1DB87;
 color: #000;
}
.datepicker .datepicker_daysRow {
 background: #FFF;
 color: #666;
}
.datepicker_weekCol {
 background: #B1DB87;
 color: #000;
}
.datepicker .datepicker_daysCell {
 color: #000;
 border: 1px solid #DDD;
}
#datepicker .datepicker_daysCell a {
 display: block;
}
.datepicker .datepicker_weekEndCell {
 background: #E0F4D7;
}
.datepicker .datepicker_daysCellOver {
 background: #FFF;
 border: 1px solid #777;
}
.datepicker .datepicker_unselectable {
 color: #888;
}
.datepicker_today {
 background: #B1DB87 !important;
}
.datepicker_currentDay {
 background: #83C948 !important;
}
#datepicker_div a, .datepicker_inline a {
 cursor: pointer;
 margin: 0;
 padding: 0;
 background: none;
 color: #000;
}
.datepicker_inline .datepicker_links a {
 padding: 0 5px !important;
}
.datepicker_control a, .datepicker_links a {
 padding: 2px 5px !important;
 color: #000 !important;
}
.datepicker_titleRow a {
 color: #000 !important;
}
.datepicker_control a:hover {
 background: #FDD !important;
 color: #333 !important;
}
.datepicker_links a:hover, .datepicker_titleRow a:hover {
 background: #FFF !important;
 color: #333 !important;
}
.datepicker_multi .datepicker {
 border: 1px solid #83C948;
}
.datepicker_oneMonth {
 float: left;
 width: 300px;
}
.datepicker_newRow {
 clear: left;
}
.datepicker_cover {
 display: none;
 display/**/: block;
 position: absolute;
 z-index: -1;
 filter: mask();
 top: -4px;
 left: -4px;
 width: 300px;
 height: 200px;
}

Xong rồi sau đó bạn Page Elements thêm 1 widget mới (HTML/Javascript) và paste đoạn code dưới và đặt vào nơi bạn muốn hiển thị

<center>
<script src="http://projects.ischool.washington.edu/tabrooks/343INFO/jQueryCalendar/jquery-1.2.3.min.js" type="text/javascript"></script>

<span id="inlineDemo" style="float: center; padding: 10px"></span>
<script src="http://projects.ischool.washington.edu/tabrooks/343INFO/jQueryCalendar/ui.datepicker.js" type="text/javascript"></script>
<script type="text/javascript">
$('#inlineDemo').datepicker({
minDate: new Date(2009, 1 - 1, 1),
maxDate: new Date(3000, 12 - 1, 31),
 onSelect: function(dateText)
  {
   var i = document.getElementById("heading");
   i.innerHTML = dateText;
  }
});
</script>
</center>

Chú ý :Các bạn điều chỉnh kích cỡ trong phần CSS để hiển thị chuẩn trên blog của bạn.Tránh trường hợp đoạn mã không thực hiện được các bạn hãy tải file script jquery-1.2.3.min.js và ui.datepicker.js rồi upload lên host của bạn.

Xem demo trên blog của tôi.

Chúc các bạn thành công !