Sabtu, 10 April 2010

cara merubah tanggal postingan menjadi icon kalender

Langsung ajah yUa^_^

Langkah Pertama :

1. Login ke blogger dengan ID anda
2. Pilih Tab Setting / Pengaturan
3. Pilih Tab Format
4. Pada Kotak Format Header Tanggal ganti dengan Format Bulan, Tanggal, Tahun.
Contoh : 7.17.2009 (Bulan Juli, Tanggal 17, Tahun 2009)
5. Setelah melakukan perubahan jangan lupa klik tombol Simpan
Untuk lebih jelasnya perhatikan gambar berikut :



Langkah Kedua :

Pilih menu Layout/Tata Letak lalu pilih tab Edit HTML. Terus beri tanda centang/contreng pada kotak Expand Widget Templates. Untuk sekedar menjaga-jaga terjadinya kegagalan dan menghindari kerusakan sebaiknya membackup dulu templatnya dengan mengklik tulisan Download Template Lengkap, yang dapat didownload kembali apabila terjadi kesalahan. Untuk lebih jelasnya perhatikan gambaar berikut :



Langkah Ketiga :

a. Cari kode <TITLE><data:blog.pageTitle/></TITLE> kalau sudah ketemu letakkan script berikut ini dibawah kode tadi.

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


b. Kalau sudah cari lagi kode berikut :

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


Kalau tidak ketemu coba cari kode berikut :

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


c. Kalau sudah ketemu letakkan script berikut di bawah kode tersebut :

.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 yang ada dan dapat diganti sesuka hati sesuai keinginan. Adapun caranya ganti huruf yang dicetak tebal dengan kode gambar berikut ini, misalnya kita kepingin kalender yang berwarna merah caranya tinggal ganti text bluecalend.gif dengan redcalend.gif.



Terus kode color:#3366CC; adalah kode warna tanggal, anda dapat menggantinya dengan warna lain sesuai keinginan. Untuk kode warma pada HTML klik DISINI.

d. Langkah selanjutnya cari kode ini <data:post.dateHeader/>. Untuk memudahkan pencarian copy saja kode tersebut lalu tekan Ctrl+F dan paste pada kotak yang ada. Setelah ketemu kode tersebut silahkan ganti dengan kode script dibawah ini :

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


e. Silahkan Klik Pratinjau yang ada di pojok kanan atas untuk melihat hasil sementara.
f. Apabila hasil tersebut sudah dirasa cocok dan benar silahkan klik TERBITKAN ENTRI.

SELAMAT MENCOBA SEMOGA BERHASIL

silakan masukan alamat email anda

Delivered by FeedBurner