Mengganti Tanggal dg Icon Kalender
Cari ku mencari.... cari pacar... eh... gak ding... Ni pas lagi suntuk trus cari-cari berduaan ma Mr. Google eh ternyata ada trik menarik dari temen saya yaitu mas Kendhin dan ternyata membuat ku tertarik untuk membuka blog ini, yang udah beberapa bulan emang aku biarin aja, gak ku urusin, karena aku emang lagi sibuk geto.......!!!
Mungkin bagi anda yang sengaja atau tidak sengaja membuka blog ini, anda akan nampak bahwa di setiap samping judul postingan pasti ada tanggal kapan tulisan itu di posting. Yang saya bahas sekarang bukan tanggalnya tapi boleh anda lihat bahwa tampilan dari tanggal postingan saya agak sedikit berbeda, ya gak.... he he he. Nah, dengan demikian kan tampilan nya agak sedikit menarik... wek e e e. (Yang baru dapat ilmu dari Mas kendin), dalam hal ini mungkin nantinya aku akan sedikit membimbing anda jika anda juga ingin merubah tampilan dari tanggal postingan anda, atau anda juga bisa kunjungi langsung di rumah mas kendin
Minta maaf sebelum nya kalau mungkin saya sedikit mengajari anda, tapi tidak ada salahnya kalo kita saling berbagi ilmu pengetahuan. Baiklah, sekarang akan kita mulai.....Jika anda ingin menggati tampilan tanggal anda maka yang pertama sekali anda mesti login ke blog anda, kemudian masuk ke dashboard anda, atau anda juga bisa mengklik tulisan Customize di sebelah kanan atas blog anda. Setelah itu ....
Tukar format tanggal anda menjadi format seperti ini :7.30.08 caranya masuk ke tab Setting kemudian pilih tab Formating kemudian di sana akan anda jumpai "Date Header Format" nah silahkan ganti format tanggalnya seperti yang saya tuliskan di atas, dan jangan lupa di simpan
Langkah berikutnya adalah, masuk ke tab Layoutkemudian masuk ke Edit HTML dan beri centang pada Expand Widget Templates Kalo anda takut nanti terjadi kesalahan pada template anda ada baik nya anda membackup dulu template anda
1. Cari kode berikut <TITLE><data:blog.pageTitle/></TITLE> copy saja kode ini trus gunakan saja perinta find (ctrl+f) dan pasatekan di kotak yang tersedia. kalo sudah ketemu copykan kode di bawah ini lalu letak kan tepat di bawah kode di atas
<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. Kalo sudah sekarang kita cari kode berikutnya yaitu kodenya :
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
Kalo gak ketemu coba cari yang ini :
h2.date-header {
margin:1.5em 0 .5em;
}
Setelah itu copy kan code di bawah ini tepat di bawah kode di atas :
.dateblock {
background: url("http://kendhin.890m.com/kalender/ungucalend.gif")
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}
.month {
padding: 4px 0px 0px 0px;
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}
.day {
padding: 4px 0px 0px 0px;
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;
}
4. Yang terakhir coba cari kode ini:
<data:post.dateHeader/> , seperti biasa gunakan fungsi find (ctrl+f) setelah ketemu ganti kode diatas menjadi seperti ini :
<DIV class='dateblock'>
<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>
kalo sudah selsesai simpan template anda dan silah kan chek....
Selamat mencoba...
