Cara Mengganti Tanggal Posting dg Icon Calender

pertama harus kita lakukan yaitu mengganti setting tanggal dulu, caranya seperti biasa Login dulu ke blogger terus pilihSettings --> Formatting, ganti "date header format" atau "format tanggal menjadi (mm.dd.yyyy) nha yang masih pemula pasti bingung maksudnya kan? itu lho disebelah tulisan "date header format" kan ada kotak yang ada tanggalnya, trus kamu klik dan pilih yang formatnya bulan.tangal.tahun contohnya 1.13.2008 terus simpan

Langkah yang 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 silahkan lihat dulu artikel ini. udah? kalo udah mari kita mulai ke jeroannya.

1. Cari kode ini <TITLE><data:blog.pageTitle/></TITLE> (tempatnya dibagian atas) kalo dah ketemu taruh script berikut ini dibawahnya 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>

2. kalo udah 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://img600.imageshack.us/img600/3576/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://img600.imageshack.us/img600/3576/bluecalend.gif

adalah gambar icon kalender. kamu bisa menggantinya dengan gambar-gambar dibawah ini caranya ganti kode gambar tersebut dengan kode gambar berikut ini, misalnya kamu pingin kelender yang berwarna merah, maka ganti kode tersebut jadihttp://img837.imageshack.us/img837/9199/redcalend.gif

http://i246.photobucket.com/albums/gg91/elu_isme/blackcalend.gif	http://img805.imageshack.us/img805/9918/blue2calend.gif	http://img600.imageshack.us/img600/3576/bluecalend.gif
http://img837.imageshack.us/img837/4311/greencalend.gif	http://img137.imageshack.us/img137/3329/orangecalend.gif	http://img196.imageshack.us/img196/8339/pinkcalend.gif
http://img837.imageshack.us/img837/9199/redcalend.gif	http://img220.imageshack.us/img220/3262/ungucalend.gif	http://img818.imageshack.us/img818/1760/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. 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. 

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

Ditulis Oleh : Unknown ~ Hidup Terasa Indah Bila Saling Berbagi

Sobat sedang membaca artikel tentang Cara Mengganti Tanggal Posting dg Icon Calender . Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya, TERIMA KASIH Karena sudah bersedia Memberikan Komentar untuk Blog ini... !!! <a href=" http://6laskar-pelangi.blogspot.com/2012/06/cara-mengganti-tanggal-posting-dg-icon.html " target="_blank"> Cara Mengganti Tanggal Posting dg Icon Calender </a>

:: Effendi Dalimunthe ! ::

Baca Juga Artikel Terkait Lainnya

Posted in: LiputanBlogger