3.03.2009

Mengganti tanggal pada post dengan icon calender

Artikle kali ini saya kutip langsung dari mas kendhin dan saya sangat berterima kasih telah shared ilmunya dari pada ngomong panjang lebar, langsung aja :
sudah pasti harus login terlebih dahulu
sebelum masuk ke pengeditan anda harus mengganti setting tanggal terlebih dahulu cararanya anda harus masuk ke pengaturan >> format, ganti "date header format" atau format tanggal menjadi (mm.dd.yyyy) maksudnya (bulan.tanggal.tahun) ganti tanggal kira-kira seperti contoh berikut: 3.17.2009 terus simpan.

barulah anda mulai pengeidtannya
1. masuk ke tata letak (layout) >> Edit html
saya saran kan sebelum anda melakukan pengeditan sebaiknya anda membackup terlebih dahulu template anda
2. beri tanda centang pada Expand Template Widget
cari code berikut <title><data:blog.pageTitle/></title> kalau udah ketemu copas code berikut dan letakkan di bawahnya

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

3. nah kalau sudah cari code berikut:

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

kalau g' da coba cari yang ini

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

4. kalau sudah ketemu taruh code berikut dibawahnya

.dateblock {
background: url("http://dhedyfaste.xp3.biz/blog/calander/calender-ijo.jpg")
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;

}


text yang berwarna merah itu adalah icon kalender, anda bisa menggantinya dengan gambar-gambar dibawah ini, caranya ganti text yang berwarna merah dengan code gambar berikut ini, misalnya kamu pingin kelender yang berwarna hijau,
caranya anda ganti calender-ijo.jpg
dengan greencalend.gif

calender-hitam.jpgcalender-cyan.jpgcalender-pink.jpg
calender-ungu.jpgcalender-kuning.jpgcalender-merah.jpg

calender-orange.jpgcalender-ijo.jpg

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 anda 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!!!!!!!........




Baca juga post ini:

19 comments:

  1. keren abies . . . . . maklum masih belajar

    tnx bagt ma infonya mas . . .

    ReplyDelete
  2. x( x( x( x( x( x( x( x( x( x( x( x( x(

    ReplyDelete
  3. AKU BLEH TANYA GA' tentang membuat columbus(text gelenbung) adipurnomo11.blogspot.com
    salam kenal
    tukeran link dong

    ReplyDelete
  4. kereennnn cuyyy...........
    tp sayang g isa copas.....huhu, bookmark ahh.... :o

    oiaaa.....jgn lupa dtg ke blog gw yaks....
    "Budayakan saling berkunjung :D

    ReplyDelete
  5. ku uda coba,,
    tapi yanggalnya jadi UNDEFINED
    UNDEFINED..

    trus blog ku gmna??
    cara ngbenerinya gmana???
    :? :? :? :? :?

    ReplyDelete
  6. om.. ini bagaimana?

    icon kalendernya tampil, tetapi nyatu sama template, jadi ga kliatan (kalau Ctrl+A) klihatan ada iconnya sma prsis icon kalender milik om dedy.

    bisa di lihat : http://www.rofiiq-cool.blogspot.com

    bisa kasih tau solusinya ke : rofiiq_vizard@yahoo.co.id

    trimakasih ya om.....

    ReplyDelete
  7. om" kalo gak ada pas di bagian yang terakhir gmna tuh data:post.dateHeader/ nah yang ni gak ada

    ReplyDelete
  8. http://yofan-mylife.blogspot.com//

    Gan tukeran link donk
    n thanks buat tipsnya

    ReplyDelete
  9. nice!
    visit my blog please and leave me some cool words in my cbox.. thx.. ♥
    www.allwordsfrommyday.blogspot.com

    ReplyDelete
  10. :bingung: :bingung2: bikin pening ajaa.. haha

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. mas mau tanya. bisakah membuat blog keren selain dengan kode? kalau bisa tolong poskan ya.. makasihh

    ReplyDelete
  13. Keren..
    Lanjutkan postingannya gan

    ReplyDelete