Percantik Tanggal Posting (blogspot)

Sobat blogger ,buat yang suka edit yang suka ngeblog di blogger, disini ada tips dan trik buat mempercantik Tanggal posting dengan icon kalender .mungkin ada template blog yang langsung ada, tapi yang belum ada dan ingin ada, simak posting ini. Hasil jadinya seperti di sebelah kanan dari judul posting, menarik bukan ?. Gak lama-lama langsung prakteknya aja.

Yang pertama login terlebih dulu di www.blogger.com, lalu pilih Settings atau Pengaturan, pilih Formatting atau Format, ganti date header format atau format header tanggal menjadi (mm.dd.yyyy) bukan (mm-dd-yyyy) . Atau yang lebih akuratnya pilih formta tanggal seperti ini 8.7.2008, lalu simpan pengaturan

Langkah selanjutnya pili menu Layout atau Tata Letak.Sebelum memulai mengedit template backup terlebih dulu. Beri tanda centang atau check pada kotak Expand Widget Templates. Lalu mulai otak-atik kode.

1. Cari kode seperti ini <TITLE><data:blog.pageTitle/></TITLE>(letaknya diatas).Biar cari kodenya cepet, copy kode tersebut, tekan Ctrl + F pada halaman blogger.Klo dah ketemu letakkan script berikut dibawah

<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. Berikutnya cari kode ini

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

Klo gak ketemu coba ini

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

Klo dah ketemu letakkan scipt berikut dibawahnya persis

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

}

Lihat kode http://kendhin.890m.com/kalender/bluecalend.gif link ini yang digunakan untuk gambar icon kalender, warnanya juga bisa diganti, hanya me-rename file blueceland.gif, misalnya warna merah rename menjadi redceland.gif Daftar dari warna-warna kalender:

1. blackcalend.gif
2. blue2calend.gif
3. bluecalend.gif
4. greencalend.gif
5. orangecalend.gif
6. pinkcalend.gif
7. redcalend.gif
8. ungucalend.gif
9. yellowcalend.gif

Liat kode color:#3366CC; buat warna tanggalnya, Bisa diubah2 kode warnanya.

Langkah Selanjutnya cari kode
<data:post.dateHeader/>,Klo dah ketemu ganti atau replace kode tersebut dengan script berikut, klo ketemu banyak, ganti juga dengan scipt berikut ini.

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

Langkah terakhir simpan dan lihat blognya , berhasil atau tidak ?
Jika ada kebingungan beri comment

By Initial Y