Tanggal Post Jadi Calender 7

Artikel yang satu ini aku kutip dari blognya mas kendhin aku ma kasih banget lho..... Oke g' panjang lebar langsung aja perhatikan cara-caranya:

Pertama yaitu kita harus 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) maksudnya tanggal tu formatnya bulan.tanggal.tahun, next disebelah tulisan "date header format" kan ada kotak drop down kamu klik panah kebawahnya, trus kamu pilih yang formatnya bulan.tangal.tahun contohnya 1.25.2009 terus simpan.

Langkah pertama dah kelar then Step 2 you must choose Layout --> Edit HTML . Beri tanda centang pada kotak Expand Widget Templates,Oh ya jangan lupa backup template dulu carany klik button Download Full Template/ Download Template Lengkap. K'lo udah sekarang ke intinya k'lo tadi baru pemanasan ja :

1. Copy paste kode dibawah tepat dibawah kode ne <TITLE><data:blog.pageTitle/></TITLE> (tempatnya dibagian atas)

<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. And then Find This code

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

K'lo g' da berarti kode templatenya berbeda coba cari kode ne

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

3. Kalo dah ketemu taruh script ne 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 dengan gambar-gambar dibawah ini caranya ganti huruf 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.

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.

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 {

Katanya mas kendhin 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.

Artikel Lainnya Yang Lebih Menarik:

Jika Anda ingin artikel Tanggal Post Jadi Calender dikirim ke email anda, Silahkan masukan alamat email anda untuk berlangganan.

JANGAN LUPA CEK EMAIL ANDA UNTUK VERIFIKASI BERLANGGANAN VIA EMAIL

Penulis :  Dodik Gaghan | BLOG : InfocusNine [Be Your Best Partner]
InfocusNine menyediakan informasi dan tutorial buat anda yang ingin belajar blogging, design, internet, dsb. Silahkan Copy/Paste tapi cantumkan link kami.