Pasang Kalender Di Blogger

Untuk memasang Kalender di blog sangat gampang sekali, kita bisa memanfaatkan berbagai situs penyedia kalender gratisan. Situs seperti ini sangatlah banyak, tentunya mereka juga berlomba dengan menampilkan kalender yang sangat beragam dan menarik untuk di lihat. Saya berikan contoh satu saja yaitu www.free-blog-content.com, silahkan coba kunjungi situs tersebut.

Silahkan klik kategori yang ada untuk memilih bentuk kalender yang disukai, kemudian copy kode yang di berikan di bawah gambar kalender lalu paste pada notepad untuk nanti keperluan di simpan di blog. Mudah bukan..

Tapi ada juga dengan cara lain, kombinasi antara JavaScript dan CSS dari modifikasi template blog kita sendiri. K'lo tertarik, yuk kita lanjut...

Langkah Pertama:
Buka menu Settings kemudian pilih Formatting, trus ganti format tanggal menjadi YYYY-MM-DD seperti gambar berikut:

Langkah Kedua:
Buka menu Layout kemudian pilih Edit HTML. Kasih tanda cek (centang) pada cekbox "Expand Widget Template". Jangan lupa backup blogger dengan mengklik "Dowlnoad Template Lengkap". Selanjutnya cari kode <data:post.dateHeader>, klo ingin lebih cepat ketemu coba cari dengan kata kunci "dateHeader". Nah, biasanya "data:post.dateHeader" berada diantara tags <h2> atau <h3>.
Kemudian ganti dengan tags <div> dan kasih class "date-header". Hasilnya seperti gambar berikut:

<div class="date-header"><data:post.dateHeader/></div>

Kemudian Save perubahan tadi.

Langkah Ketiga:
Buka kembali menu Edit HTML. Copy-Paste kode dari BloggerBuster berikut:

<!-- calendar widget -->
<script src='http://bloggerbuster.com/scripts/fastinit.js'/>
<script src='http://bloggerbuster.com/scripts/prototype-1.5.0.js'/>
<script src='http://bloggerbuster.com/calendar.js'/>
<link href='http://bloggerbuster.com/calendar.css' rel='stylesheet' type='text/css'/>
<!-- end calendar widget -->

Selanjutnya letakan kode tersebut sebelum kode </head>, jangan lupa untuk menyimpannya.

Untuk tampilan dari kalender, baik warna background, tulisan dan sebagainya, silakan Copy-Paste kode berikut:

span.cal {
background:transparent url('images/calendar.jpg') no-repeat scroll 0%;
float:left;
margin-right: 10px;
height:36px;
width:35px;
font-family:"Helvetica",Tahoma,Arial;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
}
span.cal_month {
color:#FFFFFF;
display:block;
font-size:10px;
line-height:11px;
margin-left:1px;
padding-top:1px;
text-align:center;
text-transform:uppercase;
}
span.cal_day {
color:#999999;
display:block;
font-size:18px;
line-height:18px;
margin-left:1px;
padding-top:4px;
text-align:center;
text-transform:uppercase;
}
.sidebar {
margin-bottom: 20px;
}

Kemudian letakan kode tersebut sebelum kode ]]></b:skin>. Simpan dan selesai...