-->


Mengganti Tanggal Posting dengan Icon Calender

A

khirnya jadi juga, setelah beberapa hari nyari-nyari artikel tentang "cara mengganti tanggal dengan icon kalender" dan mengotak-atik template akhirnya berhasil juga ane 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 ane 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.tanggal.tahun contohnya 1.13.2008 terus simpan

Langkah yang kedua atau yang sering para blogger lakukan==))
1. To the point aja .. klik Rancangan
2. Terus ke Edit HTML
3. Trus beri tanda centang pada kotak Expand Widget Templates
4. 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 --0)
<TITLE><data:blog.pageTitle/></TITLE>


(tempatnya dibagian atas) kalo dah ketemu taruh script berikut ini dibawahnya persis :
akatsuki sasori chibiPosting
<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 dibawah ini ::))
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}


Kalo yang diatas nggak ada coba cari yang ini ::))
h2.date-header {
margin:1.5em 0 .5em;
}


3. Kalo dah ketemu taruh script berikut dibawahnya :
akatsuki sasori chibiPosting
.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. Agan dapat menggantinya dengan gambar-gambar dibawah ini, caranya ganti huruf yang dicetak tebal dengan kode gambar berikut ini, misalnya agan pingin kelender yang berwarna merah, caranya tinggal ganti text bluecalend.gif dengan redcalend.gif.



blackcalend.gif blue2calend.gif bluecalend.gif

greencalend.gif orangecalend.gif pinkcalend.gif

redcalend.gif ungucalend.gif yellowcalend.gif

Trus kode color:#3366CC; adalah kode warna tanggal, agan bisa menggantinya dengan warna yang lain. Agan bisa lihat kode2 warnanya


4. langkah selanjutnya yaitu agan 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 agan, jangan punya ane ya .. ya kagak bakalan bisalah hehe .. 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 agan tidak memperhatikan tutorial ini dari awal. Coba lihat lagi tutorial ini dari awal dan baca baik-baik perintahnya. :D Jangan melamun doang dunk ya .. entar lok dah kesambet Setan, gimana coba ?? hayo ..

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

Blogger Yang Baek, Meninggalkan Jejak Berupa Komentar

Horeee 1 PertamaX Nongol di sini:

Anak Mio Menggila Modip hobby ngeTweet [agi ngeComment]

.cba dlu gan ,hhe

:10 :11 :12 :13
:14 :15 :16 :17
:18 :19 :20 :21
:22 :23 :24 :25
:26 :27 :28 :29
:30 :31 :32 :33
:34 :35 :36 :37
:38 :39 :40 :41
:42 :43 :44 :45
:46 :47 :48 :49
:50 :51 :52 :53
:54 :55 :56 :57
:58

Jangan lupa ada emo Kaskus diatas CommentBox Ini. Langsung dicoba gan ? Entar ane kasih cendol dah.

Protected by Copyscape Web Plagiarism Software
English French German Spain Italian DutchRussian Portuguese Japanese Korean Arabic Chinese Simplified