Cara Mengganti Tanggal Posting Dengan Icon Calender

Yang pertama harus kita lakukan yaitu mengganti setting tanggal dulu, caranya seperti biasa


1. Login dulu ke Blogger
2. Terus pilihSettings --> Formatting, ganti "date header format" atau "format tanggal menjadi (mm.dd.yyyy) ( itu lho di sebelah tulisan "date header format" kan ada kotak yang ada tanggalnya, klik dan pilih yang formatnyabulan.tangal.tahuncontohnya24.12.2011,terus simpan

3. Langkah selanjutnya, pilih menuLayout --> Edit HTML. Beri tanda centang pada kotakExpand Widget Templates, Oh ya, jangan lupa di back-up dulu template Sobat. (caranya tinggal Download Template Full)

4. Cari kode ini<TITLE><data:blog.pageTitle/></TITLE>(tempatnya di bagian atas), lalu taruh script berikutdi bawahnya persis. .

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

5. Cari kode ini

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

Atau yang ini

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

6. Letakkan kode-kode berikutdi bawahsalah satu dari kode-kode di atas (langkah nomor 5 )

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

}

Note : yang warna merah, adalah gambar kalendernya, untuk menggantinya, Sobat tinggal mengganti kode yang berwarna merah saja dengan kode-kode berikut . . . .

Note lagi : Untuk ganti ikon lain silahkan cari sendiri di Google, saya udah cari referensinya tapi nggak ketemu-ketemu . . . . (

Kemudiancolor:#3366CC;adalah kode warnanya, untuk menggantinya , Sobat tinggal ganti3366CCdengan : white, black, blue, green dan sebagainya, yang penting pakai bahasa inggris.

7. Cari kode <data:post.dateHeader/>(pakai ctrl+ F), kalau sudah ketemu, ganti kode itu dengan kode di bawah ini,

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

Kalo misalnya tulisan bulan dan tanggalnya terlalu keatas coba tambahkan kode inipadding: 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

Udah ya..selamat mencoba . . . .

Cara Mengganti Tanggal Posting Dengan Icon Calender 9 out of 10 based on 10 ratings. 9 user reviews.