13 January 2008

(218) Comments

Cara Mengganti Tanggal Posting dg Icon Calender

Kendhin

Akhirnya jadi juga, setelah beberapa hari nyari-nyari artikel tentang "cara mengganti tanggal dengan icon kalender" dan mengotak-atik template akhirnya berhasil juga aku membuatnya, fiuuhh :f dengan menghabiskan dana ber M-M (maksudnya Maribu, Mablas ribu) untuk melakukan penelitian dan dengan membanting keringat dan memeras tulang dan akhirnya berhasiiiiill..... Mau tahu cara membuatnya? jangan khawatir aku akan membagi-bagikan tutorial ini pada kalian dengan geratis (kalo ada yang mo bayar sih boleh aja :D ) yak mari kita mulai trik dan tipsnya.

Yang pertama harus kita lakukan yaitu 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) 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 jadi http://img837.imageshack.us/img837/9199/redcalend.gif

http://i246.photobucket.com/albums/gg91/elu_isme/blackcalend.gifhttp://img805.imageshack.us/img805/9918/blue2calend.gifhttp://img600.imageshack.us/img600/3576/bluecalend.gif
http://img837.imageshack.us/img837/4311/greencalend.gifhttp://img137.imageshack.us/img137/3329/orangecalend.gifhttp://img196.imageshack.us/img196/8339/pinkcalend.gif
http://img837.imageshack.us/img837/9199/redcalend.gifhttp://img220.imageshack.us/img220/3262/ungucalend.gifhttp://img818.imageshack.us/img818/1760/yellowcalend.gif


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

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




Artikel yang Berhubungan :



Jumlah Komentar = 218
teguh sans said :
25 August, 2014
Artikelnya rapi dan Menarik gan...jangan lupa kunjungi juga situs kami yang membahas tentang Herpes ~ obat herpes 2014 ampuh ~ Obat herpes 2014 ampuh untuk wanita ~ Obat Herpes 2014 ampuh hilangkan herpes dalam 3 -5 hari ~ Obat Herpes 2014 ampuh dari bahan alami ~ Obat herpes 2014 ampuh cepat obati herpes
10 September, 2014
Makin cantik aja nih blog saya kalau tanggal postingan di rubah dengan icon kalender
Anonymous said :
11 September, 2014
baca juga artikel blog tips di PeniVagi terima kasih sebelumnya
13 October, 2014
KOq setelah ane mengubah sesuai petunjuk diatas tapi masih belom bisa yak KK ??
Mohon petunjuk nya....
Ntar malem dicoba lagi deh... :)

Suwun Bro
Bkm Kenanga said :
07 December, 2014
Mantap..mas. blognya sangat membantu belajar..
Terimakasih.
Silahkan kunjungi blog kami di : BKM Kenanga
ERCEDI said :
06 January, 2015
Ijin numpang lapak link gan

DETEXSI
09 January, 2015
mantap,, keep posting..
«Oldest ‹Older   201 – 218 of 218   Newer› Newest»

Post a Comment