Nambahin Ikon Kalender di Sebelah Judul Artikel

Buat Bloggers yang gemar menghias blognya dengan berbagai pernak-pernik, mungkin tutorial ini dapat membantu mempercantik tampilan blog. Mungkin juga ada yang engga ngerti, judul artikel ini maksudnya apa. Contohnya seperti gambar di bawah ini:

Nah, ngerti kan sekarang…? Yauda kalau gitu, let’s go to the first step.

Langkah Satu - Penting!

Masuk the Dashboard > Settings > Formatting
Ubah Date Header Format dan ubah menjadi format YYYY-MM-DD (2008-01-12)
Save settings.

Hal ini akan mempengaruhi script yang akan kita pakai nanti. Jika tidak diikuti akan script akan gagal.

Langkah Dua

Masuk ke Dashboard > Template > Edit HTML.
Check Expand Widgets Template .
Cari tag <head> dan paste kode ini di bawah tag tersebut:

<script src='http://anniebluesky.googlepages.com/fastinit.js'/>
<script src='http://anniebluesky.googlepages.com/prototype-1.5.0.js'/>
<script src='http://anniebluesky.googlepages.com/orangevolt-calendar.js'/>
<link href='http://anniebluesky.googlepages.com/calendar.css' rel='stylesheet' type='text/css'/>

Langkah Tiga
Lanjut, sekarang tugas kamu cari <data:post.dateHeader/>
dan ganti dengan:

<h2 class='date-header'>
<data:post.dateHeader/>
</h2>

Langkah Empat
Dalam CSS Style Sheet (antara <b:skin><![CDATA[/* dan ]]></b:skin> ) tambahin kode ini:

/* Calendar
----------------------------------------------- */
span.cal {
background:transparent url('CALENDAR IMAGE. URL') no-repeat scroll 0%;
float:left;
height:49px;
width:48px;
font-family:"Trebuchet MS",Tahoma,Arial;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
margin-right: 13px;
}

span.cal_month {
color:#FFFFFF;
display:block;
font-size:11px;
line-height:11px;
margin-left:-3px;
padding-top:2px;
text-align:center;
text-transform:uppercase;
}

span.cal_day {
color:#999999;
display:block;
font-size:18px;
line-height:18px;
margin-left:-3px;
padding-top:8px;
text-align:center;
text-transform:uppercase;
}

Kode ini bisa kamu edit sesuai keperluan kamu, seperti jenis atau warna font. Hampir selesai, sekarang kamu tinggal upload gambar kamu di Image Host, yang gratis aja, contohnya: ImageShack.
Berikut ini ada beberapa contoh gambar yang bisa digunakan sebagai ikon, kalau mau tinggal download aja.