Cara Mengganti Tanggal Posting dg Icon Calender

Cara Mengganti Tanggal Posting dg Icon Calender



Cara Mengganti Tanggal Posting dg Icon Calender 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 dengan menghabiskan dana ber M-M (maksudnya Maribu, Mablas
ribu) untuk melakukan penelitian dan dengan membanting keringat dan memeras tulang
. tidak sia-sia pengorbananku, hasilnya itu tuh tanggal icon kalender yang cantik
mejeng disamping judul. Mau tahu cara membuatnya? jangan khawatir aku akan membagi-bagikan
tutorial ini pada kalian dengan geratis (kalo ada yang mo bayar sih boleh aja
) 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

copy ini yaak.!!

(tempatnya dibagian atas) kalo dah

ketemu taruh script berikut ini dibawahnya persis

copy ini yaak.!!

2. kalo udah cari kode ini:

copy ini yaak.!!

.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://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 mengantinya
dengan gambar-gambar dibawah ini caranya ganti hurus yang dicetak tebal dengan
kode gambar yang lain

Trus kode color:#3366CC; adalah kode warna
tanggal, kamu bisa menggantinya dengan warna yang lain.

4. langkah selanjutnya yaitu kamu cari kode ini

copy ini yaak.!!

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

5. Simpan Template kamu dan lihat hasilnya. Berhasil nggak ya?

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.


Sumber dari -> aja dari http://trik-tips.blogspot.com/