PandoraBox: Mengganti tanggal pada post dengan icon calender

Mengganti tanggal pada post dengan icon calender

by Sapto Mexavriand kategori : blog

Artikel kali ini saya kutip langsung dari mas kendhin dan saya sangat berterima kasih telah shared ilmunya dari pada ngomong panjang lebar, langsung aja :
sudah pasti harus login terlebih dahulu
sebelum masuk ke pengeditan anda harus mengganti setting tanggal terlebih dahulu cararanya anda harus masuk ke pengaturan >> format, ganti "date header format" atau format tanggal menjadi (mm.dd.yyyy) maksudnya (bulan.tanggal.tahun) ganti tanggal kira-kira seperti contoh berikut: 12.17.2010 terus simpan.

barulah anda mulai pengeditannya
1. masuk ke tata letak (layout) >> Edit html
saya saran kan sebelum anda melakukan pengeditan sebaiknya anda membackup terlebih dahulu template anda
2. beri tanda centang pada Expand Template Widget
cari code berikut <title><data:blog.pageTitle/></title> kalau udah ketemu copas code berikut dan letakkan di bawahnya

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

3. nah kalau sudah cari code berikut:

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

kalau g' da coba cari yang ini

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

4. kalau sudah ketemu taruh code berikut dibawahnya

.dateblock {
background: url("http://dhedyfaste.xp3.biz/blog/calander/calender-ijo.jpg")
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;

}

text yang berwarna merah itu adalah icon kalender, anda bisa menggantinya dengan gambar-gambar dibawah ini, caranya ganti text yang berwarna merah dengan code gambar berikut ini, misalnya kamu pingin kelender yang berwarna hijau,
caranya anda ganti calender-ijo.jpg
dengan greencalend.gif


calender-hitam.jpg	calender-cyan.jpg	calender-pink.jpg

calender-ungu.jpg	calender-kuning.jpg	calender-merah.jpg

calender-orange.jpg	calender-ijo.jpg

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.


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

5. Simpan Template anda 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 {

NB: 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. :D

Selamat mencobaaaaaaaaaa!!!!!!!........