Cara Pasang Kalender di Judul Posting

Tutorial kali ini adalah cara memasang kalender di judul posting. Bila anda merasa bosan melihat kalender asli bawaan dari template blogger, anda bisa merubahnya dengan cara yang sangat sederhana seperti berikut :
Ada beberapa Pengaturan yang harus Anda lakukan sebelum masuk ke Edit HTML,
1. mengganti setting tanggal di Pengaturan, Login ke blogger --> pengaturan --> Format, ganti "format header tanggal" menjadi (mm.dd.yyyy) bulan.tangal.tahun contohnya 7.20.2009 terus simpan.

2. Pastikan pada Tata Letak --> Elemen Halaman --> Edit Posting Blog, mempunyai Format Header Tanggal yang sama dengan format yang ada pada Pengaturan diatas (1).

Langkah berikutnya silakan buka Tata Letak --> Edit HTML, beri tanda centang pada kotak Expand Widget Templates atau download blog sebelum melakukan penambahan kode HTML :

1. Cari kode ini <title><data:blog.pagetitle/></title> dan letakkan kode HTML berikut ini dibawah kode tersebut :

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

2. Selanjutnya cari kode berikut ini:

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

atau kalau tidak ketemu cari script berikut ini :

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

3. Letakkan Kode berikut ini dibawah kode diatas (2) :

<br />.dateblock<br />{<br />background: url("http://i721.photobucket.com/albums/ww215/ferialfazianto/bluecalend.gif")<br />no-repeat;<br />width: 55px;<br />margin: 0;<br />font-weight: bold;<br />height: 50px;<br />/*position: absolute;<br />top: 0;<br />left: 0;*/<br />float: left;<br />text-align: center;<br />}<br /><br />.month {<br />font-size: 11px;<br />width: 37px;<br />margin: 0 5px;<br />text-transform: uppercase;<br />color: #fff;<br />}<br /><br />.day {<br />color:#666666;<br />font-size: 19px;<br />width: 37px;<br />margin: 0 5px;<br />}<br />

Kode http://i721.photobucket.com/albums/ww215/ferialfazianto/bluecalend.gif
adalah gambar icon kalender. anda bisa menggantinya mengantinya
dengan gambar-gambar dibawah ini :


blackcalend.png


greencalend.png


orangecalend.png

kode color:#66666; adalah kode warna
tanggal, yang bisa juga anda ganti sesuai kode warna yang anda inginkan.

4. langkah selanjutnya yaitu kamu cari kode ini dan ganti dengan kode script berikut ini:

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

5. Simpan Template kamu dan lihat hasilnya.
Dipulung dari : alfasentosa.blogspot.com

Related Posts by Categories