Ganti Tanggal Postingan dengan Icon Kalender

Nah...kali ini saya akan kasih tau bagaimana Mengganti Tanggal dengan Icon Kalender. Pengen tahu contohnya...? Ga sabar nih Sahabat bimabijak.co.cc ?okey, simak baik-baik ya...cekidot !

1. Setelah login di blogger, dan sebelum edit HTML anda, pastikan dulu format tanggal blog anda harus mm/dd/yyyy. Kalo belum, silahkan ganti dulu. Caranya...setting--->>formatting trus ganti date header format-nya dengan mm/dd/yyyy. kalo ga tau formatnya seperti ini : 1.25.2008.
2. Nah..langkah ke-2 yaitu edit HTML. caranya masuk ke layout--->>edit HTML jangan lupa kasih tanda centang di Expand Template Widget.
3. Kalo udah, Silahkan cari kode HTML di bawah ini :
   
   <TITLE><data:blog.pageTitle/></TITLE>
4. Kalo sudah ketemu, copy paste script berikut dibawah kode HTML yang tadi :
   
   <SCRIPT type='text/javascript'>
//<![CDATA[
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. Kalo udah, cari kode berikut :
   
   h2.date-header {
background:none;
margin:1.5em 0 .5em;
border:0px;
font-size:80%;
color:#b33c3c;
font-style:normal;
}
6. Kalo dah ketemu, copy kode berikut di bawah kode diatas :
   
   .dateblock {
background: url("http://mizwar.blog.googlepages.com/biru.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: 34px;
margin-top:4px;
margin-bottom:3px;
margin-left:5px;
margin-right:5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;
}
   
   Keterangan: Kode http://mizwar.blog.googlepages.com/biru.gif adalah gambar kalender. Kalo anda ingin mengganti gambar kalender tersebut, silahkan ganti text biru.gif dengan text kalender di bawah ini :
   
   
   
   
   
   

   Blue.gif	cyan.gif	hijau.gif
   orange.gif	pink.gif	ungu.gif
   hitam.gif	kuning.gif	merah.gif

Untuk mengganti warna text bulan, silahkan ganti kode heksa warna #fff dengan warna sesukakamu. Begitu juga jika ingin mengganti warna text tanggal, silahkan ganti kode heksa #3366cc dengan kode warna sesukamu.

Apabila letak text bulan tidak sesuai dengan kalender, silahkan ubah kembali marginnya dengan disesuaikan.

Kalo udah selesai, kemudian cari kode html berikut :

<data:post.dateHeader/>

Lalu ganti dengan script ini :

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

Save Template dan Selesai

Semoga Bermanfaat...
ENJOY !

• Tweet
• Share
• [i]

Print Halaman ini

Masukkan Email-mu disini untuk berlangganan Artikel menarik lainnya Cuma Blog Sederhana :

Delivered by FeedBurner