Tips and Trik Cara Ganti Tanggal Postingan Dengan Icon Calender

Duhh udah lama gak posting-posting nih. Maaf yaa semuanya, soalnya saya lagi banyak kerjaan. Pada postingan saya kali ini saya akan membahas tentang Tips and Trik Cara Ganti Tanggal Postingan Dengan Icon Calender. Artikel berikut ini saya dapatkan dari blog mas kendhin, dan kepada beliau saya mohon izinnya. Mungkin tips and trik berikut ini cocok buat sobat blogger yang ingin mempercantik blognya.




Cara ganti tanggal postingan dengan icon calender yang akan saya bahas ini sebetulnya cukup mudah. Dan saya yakin sobat blogger newbie pun bisa melakukannya. Oke tanpa panjang lebar lagi silahkan ikuti langkah-langkah di bawah ini yaa.

Berikut adalah langkah-langkah dalam mengganti tanggal postingan dengan icon calender :




Pertama.

• Masuk ke situs http://www.blogger.com
• Login dengan akun sobat (jangan akun orang lain yaa) ^_^
• Setelah sobat masuk pilih menu Setting (klo bahasa indonesia PENGATURAN).
• Lalu pilih tab formating (Format).
• Ganti Date Header Format ( Format Header Tanggal ) menjadi mm.dd.yyyy .
• Kemudian Save (Simpan).
  

Kedua.

• Setelah itu sekarang kita masuk ke menu layout (Tata Letak).
• Pilih tab Edit HTML.
• Nah setelah masuk pada menu Edit HTML, ada baiknya untuk membackup terlebih dahulu agar tidak terjadi hal yang tidak di inginkan.
  
• Jangan lupa juga untuk mencentang kotak Expand Widget Templates.
• Ok sekarang kita mulai,

1. Cari kode berikut ini <TITLE><data:blog.pageTitle/></TITLE> biar lebih gampang gunakan ctrl+f , kalo udah ketemu letakkan kode script berikut ini tepat dibawahnya.

<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>

2. Setelah itu sekarang sobat cari kode berikut ini

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

kalo enggak ada coba cari kode yang ini
h2.date-header {
margin:1.5em 0 .5em;
}

3. Sudah ketemu? Sekarang letakkan kode script berikut ini tepat di bawahnya.

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

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

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

}

Kode http://kendhin.890m.com/kalender/bluecalend.gif
adalah gambar icon kalender. kamu bisa menggantinya mengantinya
dengan gambar-gambar dibawah ini caranya ganti hurus yang dicetak tebal dengan
kode gambar berikut ini, misalnya kamu pingin kelender yang berwarna merah,
caranya kamu ganti text bluecalend.gif
dengan redcalend.gif.

blackcalend.gif	blue2calend.gif	bluecalend.gif
greencalend.gif	orangecalend.gif	pinkcalend.gif
redcalend.gif	ungucalend.gif	yellowcalend.gif

Nah kode color:#3366CC; adalah kode warna tanggal sobat, silahkan sobat ganti dengan warna yang sobat suka.

4. Langkah terakhir yaitu cari kode berikut ini <data:post.dateHeader/> kalo udah ketemu ganti kode berikut dengan kode script di bawah ini :

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

5. Save atau simpan template kamu.

Selesai deh ganti tanggal postingan dengan icon calender. gimana gampang kan? Semoga berhasil yaa kawan-kawan.

Silahkan Lihat Yang Ini Juga Yaa :