Cara Mengganti Tanggal Posting Dengan Icon Calender. Beberapa hari yang lalu ada salah sobat blogger yang request Bagaimana Cara Mengganti Tanggal Posting Dengan Icon Calender di Blogger,
tapi baru kali ini kami sempat menerbitkannya karena banyak antrian request.

Tidak semua Theme Blogspot sudah menggunakan Icon Calender, masih banyak yang menggunakan tanggal/bulan/tahun di setiap header postingan, sebenarnya ini lebih simple di bandingkan dengan Icon Calender tapi jika ditinjau dari segi penampilan pastinya Icon Calender lebih menarik.

 Baiklah, jika anda sudah tidak sabar, silahkan ikuti langkah-langkah dibawah ini.

1. Pertama yang harus anda lakukan adalah mengganti Setting tanggal pada pengaturan Blog anda. Caranya Log in ke Account Blogger anda, masuk ke "Setting" - "Language and Formatting" setelah itu ubah "Date Header Format" menjadi 8.06.2012 dan selanjutnya simpan perubahan.

2. Klik "Template" - "Edit HTML" - "Proceed" setalah itu Centang "Expand Widget Templates". Jangan lupa Backup template anda.

3. Silahkan cari kode dibawah ini.

<title><data:blog.pageTitle/></title>

4. Jika sudah dapat, Copy Script di bawah ini dan Paste tepat dibawah kode yang diatas.

<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://trik-tips.blogspot.com */
/*********************************/
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>

5. Setelah itu cari lagi kode di bawah ini.

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}

6. Jika belum dapat kode yang diatas, coba anda cari kode di bawah ini

h2.date-header {
margin:1.5em 0 .5em;
} 

7. Jika salah satu kode di atas telah anda temukan, Copy Script di bawah ini dan Paste tepat di bawahnya.

.dateblock {
background: url("http://img600.imageshack.us/img600/3576/bluecalend.gif")
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

font-size: 19px;
width: 37px;
margin: 0 5px;

}

8. Selanjutnya cari kode di bawah ini.

<data:post.dateHeader/>

9. Jika sudah ketemu dengan kode di atas, ganti kode di atas dengan kode di bawah ini.

<DIV class='dateblock'>
<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

Selanjutnya klik "Save Template" dan lihat apa tanggal yang ada di header postingan blog anda telah terganti menjadi Icon Calender atau tidak, jika masih belum terganti atau anda menemukan kata "Undefine" silahkan ulangi langkah pertama di atas dan perhatikan penulisan  Scriptnya.

Cat;

- ganti color:#3366CC; dengan warana tanggal yang anda inginkan.

- Jika tulisan tanggal dan bulan terlalu keatas ataupun kebawah silahkan tambahkan kode "pedding: 4px 0px 0px 0px;" tampa tanda kutip ke bawah script yang tadi .month { dan .day {

- Anda bisa mengganti Icon Calender dengan berbagai warna dan model yang dapat anda pilih, caranya ganti kode yang berwarna Merah di atas dengan kode di bawah ini, untuk preview gambar silahkan klik saja.