Mengganti Tanggal Posting Dengan Icon Calender

Mengganti Tanggal Posting Dengan Icon Calender

            Mengganti Tanggal Posting Dengan icon Calender seperti dibawah ini :

Mudah kok. Tinggal Ikutin ajach langkah2 dibawah ini:
            Pertama yang harus kita lakukan yakni 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) nah yang masih pemula pasti bingung maksudnya kan? letaknya itu disebelah tulisan "date header format" kan ada kotak yang ada tanggalnya, trus kamu klik dan pilih yang formatnya bulan.tangal.tahun seperti contoh : 1.13.2008 terus simpan. saya sarankan formatnya sama seperti contoh.




            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(copy semua coding trus paste ke notepad). setelah itu baru dech kita masuk ke codingnya.


1. Cari kode ini

<title><data:blog.pagetitle/></title>(tempatnya dibagian atas, untuk lebih mudah mencarinya kamu tekan aja Ctrl+f)kalo dah ketemu taruh script berikut ini dibawahnya persis.
<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 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://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.gif" adalah 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.

Trus kode color:#3366CC; adalah kode warna tanggal,kamu bisa menggantinya dengan warna yang lain, kalo nggak bisa menggantinya kamu kasih komen aja dibawah ini, nanti aku bantu kamu kamu mencari warna yang cocok dengan pilihan icon kalender kamu, gratis, gak dipungut biaya cuma aku minta kamu doain aku semoga bisa sukases, kaya, dermawan, bahagia dunia akherat dan dapet istri yang cantik solehah

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?

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 {

Kalo Tanggalnya berubah menjadi tulisan "Undefine" itu pasti kamu tidak memperhatikan tutorial ini dari awal. Coba lihat lagi tutorial ini dari awal dan baca baik-baik perintahnya. atau file nya bisa di Download disini Oke. selamat mencoba.

Posted in: tips-tips edit blog