MERUBAH TANGGAL POSTING MENJADI BENTUK KALENDER

Pernah kebayang ga tanggal posting blog anda jadi berbetuk kalender, tentunnya menarik bukan?dan juga menambah cantik blog anda. kalau mo lihat demonya, klik disini(maaf masih dalam proses karna belum ada waktu)

Untuk membuatnya, yang pertama harus anda lakukan adalah merubah format penaggalan blog anda menjadi mm.dd yyyy (bulan, hari, tahun). untuk melakukannya, login ke blogger anda, kemudian pilih "pengaturan-->format", rubah " format header tanggal" mejadi seperti yang saya katakan tadi.

selanjutnya, kita mulai:

1. klik layout-->edit html. lalu centang checkbok "expand widget template".
2. cari kode ini <TITLE><data:blog.pageTitle/></TITLE>,lalu copy kode berikut ini dan paste tepat di bawahnya. <SCRIPT type='text/javascript'> //<![CDATA[ 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. kemudian cari kode seperti di bawah ini: .date-header { margin: 1.5em 0 0; font-weight: normal; color: $dateHeaderColor; font-size: 100%; } atau jika kode diatas tidak ada, coba cari kode yang seperti di bawah ini: h2.date-header { margin:1.5em 0 .5em; }

4. jika anda sudah menemukan kode tersebut, langkah selanjutnya adalah minum kopi dulu biar tidak puyeng salin kode di bawah ini dan paste tepat di bawah kode tadi: .dateblock { background: url("http://lukman.oke.googlepages.com/bluecalend_cominfo.gif") no-repeat; width: 50px; 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; }
5. langkah terakhir adalah cari kode <data:post.dateHeader/>, nah jika sudah anda temukan, ganti kode tersebut dengan script di bawah ini: <DIV class='dateblock'> <SCRIPT> date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>
6. klik "save template"
7. lihat hasilnya, jadi tidak, kalau tidak berhasil, wah.....jangan nangis ya.....selesai

Apabila anda ingin mengganti icon calendernya, lihat kembali langkah no 5. disana ada kode: http://lukman.oke.googlepages.com/bluecalend_cominfo.gif. ini merupakan tempat penyimpana icon-icon tersebut, untuk menggantinya, anda tinggal ganti huruf yang bergaris bawah (bluecalend.gif) dengan nama nama imagenya seperti di bawah ini:

• blackcalend_cominfo.gif
• blue2calend_cominfo.gif
• bluecalend_cominfo.gif
• greencalend_cominfo.gif
• orangecalend_cominfo.gif
• pinkcalend_cominfo.gif
• redcalend_cominfo.gif
• ungucalend_cominfo.gif
• yellowcalend_cominfo.gif

Sebelum saya pamit, satu pesan dulu ya...SELALU BACKUP TEMPLATE ANDA TERLEBIH DAHULU SEBELUM BERURUSAN DENGAN KODE-KODE YANG BIKIN PUSING TERSEBUT, SEHINGGA ANDA TIDAK JUNKIR BALIKPUSING BILA ADA KESALAHAN. selamat nge-blog.

DEMO DISINI (sorry, lagi sibuk, belum sempat bikin demo) useful link useful link2

Tutorial Yg Masih Berhubungan