Cara Mengganti Tanggal Postingan dg Icon Calendar 0

Jika anda ingin membuat atau merubah tanggal postingan dengan icon calender anda dapat menggunakan cara dibawah ini:

Caranya seperti biasa Login dulu ke blogger terus pilih Settings terus click Formatting, ganti "date header format" atau "format tanggal menjadi (mm.dd.yyyy) maksudnya di sebelah tulisan "date header format" kan ada kotak yang ada tanggalnya, trus kamu klik dan pilih yang formatnya bulan.tangal.tahun contohnya 1.13.2008 terus simpan

Langkah yang kedua pilih menu Layout Edit HTML . Trus beri tanda centang pada kotak Expand Widget Templates, Oh ya, jangan lupa di back-up dulu template kamu. Yang nggak tahu caranya memback-template silahkan lihat dulu artikel ini. udah? kalo udah mari kita mulai ke jeroannya.

1. Cari kode ini

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

(tempatnya dibagian atas atau anda bisa mencarinya dengan cara pijit control F pada edit HTML dan masukan code tadi pada kotak yang muncul setelah anda pijit control F) kalo dah ketemu taruh script berikut ini dibawahnya persis

<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. kalo udah cari kode ini:

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

kalo ggak ada coba cari yang ini

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

}

3. Kalo dah ketemu taruh script berikut dibawahnya

.dateblock
{
background:url("http://www.geocities.com/badar5th/greencalend.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://www.geocities.com/badar5th/greencalend.gif"

greencalend.gif

adalah gambar icon kalender. kalau kamu ingin 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

greencalend.gif

dengan

redcalend.gif.

Trus kode

color:#3366CC;

adalah kode warna tanggal, kamu bisa menggantinya dengan warna yang lain.

4. langkah selanjutnya yaitu kamu cari kode ini

<data:post.dateHeader/>

, cara nyarinya biar gampang copy kode tersebut,
terus tekan Ctrl-f dan paste di dalam kotak yang disediakan, nha langsung
ketemu kan. kalo udah ketemu ganti kode tersebut dengan script dibawah ini.

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

5. Simpan Template kamu dan lihat hasilnya. Berhasil nggak ya? :t

Kalo misalnya tulisan bulan dan tanggalnya terlalu keatas coba tambahkan kode ini

padding:4px 0px 0px 0px

dibawah kode .month { dan juga dibawah kode .day {

Selesai