Akhirnya jadi juga, setelah beberapa hari nyari-nyari artikel tentang
"cara mengganti tanggal dengan icon kalender" dan mengotak-atik
template akhirnya berhasil juga aku membuatnya, fiuuhh :f dengan
menghabiskan dana ber M-M (maksudnya Maribu, Mablas ribu) untuk
melakukan penelitian dan dengan membanting keringat dan memeras tulang
dan akhirnya berhasiiiiill..... Mau tahu cara membuatnya? jangan
khawatir aku akan membagi-bagikan tutorial ini pada kalian dengan
geratis (kalo ada yang mo bayar sih boleh aja :D ) yak mari kita mulai
trik dan tipsnya.
Yang pertama harus kita
lakukan yaitu mengganti setting tanggal dulu, caranya seperti biasa
Login dulu ke blogger terus pilih Settings --> Formatting,
ganti "date header format" atau "format tanggal menjadi (mm.dd.yyyy)
nha yang masih pemula pasti bingung maksudnya kan? itu lho disebelah
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) kalo dah ketemu taruh script berikut ini
dibawahnya persis
//<![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:
margin: 1.5em 0 0;
font-weight:
normal;
color: $dateHeaderColor;
font-size: 100%;
}
kalo
ggak ada coba cari yang ini
margin:1.5em
0 .5em;
}
3. Kalo dah ketemu taruh script berikut
dibawahnya
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.gifadalah 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 |
Trus kode color:#3366CC; adalah kode warna
tanggal, kamu bisa menggantinya dengan warna yang lain. Kamu bisa lihat kode2 warnanya DISINI.
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.
<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 {
Semoga Bermamfaat......!!!
