Mengganti Tanggal dengan Icon Kalender

Haloo semua....Selamat pagi. Aku punya hacking blog yang baru nih....walaupun aku baru tahu, padahal orang lain sudah tahu dari dulu . Nah...untuk blog hack yang ini saya akan kasih tau bagaimana Mengganti Tanggal dengan Icon Kalender. Pengen tahu contohnya...? Lihat aja nih di blognya mr. robbex. Dah liat...? Pengen tau caranya...?Ok deh langsung aja ya......
  1. Setelah login di blogger, dan sebelum edit HTML anda, pastikan dulu format tanggal blog anda harus mm/dd/yyyy. Kalo belum, silahkan ganti dulu. Caranya...setting--->>formatting trus ganti date header format-nya dengan mm/dd/yyyy. kalo ga tau formatnya seperti ini : 1.25.2008.
  2. Nah..langkah ke-2 yaitu edit HTML. caranya masuk ke layout--->>edit HTML jangan lupa kasih tanda centang di Expand Template Widget.
  3. Kalo udah, Silahkan cari kode HTML di bawah ini :

    <TITLE><data:blog.pageTitle/></TITLE>

  4. Kalo sudah ketemu, copy paste script berikut dibawah kode HTML yang tadi :

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

  5. Kalo udah, cari kode berikut :

    h2.date-header { background:none; margin:1.5em 0 .5em; border:0px; font-size:80%; color:#b33c3c; font-style:normal; }

  6. Kalo dah ketemu, copy kode berikut di bawah kode diatas :

    .dateblock { background: url("http://mizwar.blog.googlepages.com/biru.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: 34px; margin-top:4px; margin-bottom:3px; margin-left:5px; margin-right:5px; text-transform: uppercase; color: #fff; } .day { color:#3366CC; font-size: 19px; width: 37px; margin: 0 5px; }

    Keterangan: Kode http://mizwar.blog.googlepages.com/biru.gif adalah gambar kalender. Kalo anda ingin mengganti gambar kalender tersebut, silahkan ganti text biru.gif dengan text kalender di bawah ini :
    Blue.gifcyan.gifhijau.gif
    orange.gifpink.gifungu.gif
    hitam.gifkuning.gifmerah.gif
    Untuk mengganti warna text bulan, silahkan ganti kode heksa warna #fff dengan warna sesukakamu. Begitu juga jika ingin mengganti warna text tanggal, silahkan ganti kode heksa #3366cc dengan kode warna sesukamu. Apabila letak text bulan tidak sesuai dengan kalender, silahkan ubah kembali marginnya dengan disesuaikan.
  7. Kalo udah selesai, kemudian cari kode html berikut :

    <data:post.dateHeader/>

    Lalu ganti dengan script ini :

    <DIV class='dateblock'> <SCRIPT>date_replace('<data:post.dateHeader/>'); </SCRIPT></DIV>

  8. Save Template dan Selesai

21 komentar:

  1. ngak dpt buat..
    http://pacakjbee.blogspot.com

    BalasHapus
  2. xdapat buat mas..tolong sye mas..xde kluar nombor tarikh

    BalasHapus
  3. ikutan komen ah... nanti tak praktikin.. oke :D

    BalasHapus
  4. makasih ilmunya

    BalasHapus
  5. Punten..... saya dah coba tapi gak bisa alias gagal. Angka hari dan bulan Undifined...Please help

    BalasHapus
  6. @information : silahkan lihat dulu settingan tanggal blog anda. Kalo undefined, kesalahannya pasti disitu. Pake format mm.dd.yyyy

    BalasHapus
  7. apa yang saya terapkan selalu berhasil setelah ikut kursus di blog ini. saluut

    BalasHapus
  8. MAKASIH...http://jotystwintulipware.blogspot.com/

    BalasHapus
  9. Salam kenal, terima kasih artikelnya. Sangat bermanfaat terutama buat saya yang newbie di aktivitas blogging.

    BalasHapus
  10. LOh mas icon kalender ud muncul tp gak ada tgl sm blnY, tp klo dipilih salah satu postingan tampil, apa gak bisa tampil di menu home ?

    thanks's Infonya

    Visit my blog http://itblognewbie.blogspot.com

    BalasHapus
  11. kok ga bisa.. ga kliatan hasilnya tuh kang..
    apa ane yg oon yach?

    BalasHapus
  12. makasih bro..... aku berhasil....

    BalasHapus
  13. duuh,,binun nyari point yg 3,5,7 i atas :(

    BalasHapus
  14. alhamdulillah saya dapat guru dermawan dengan ilmunya.
    mas saya sudah belajar banyak dari sampean dan saya ingin terus belajar
    maklum baru mengenal dunia internet.
    cara menambah menu pada blog seperti home, yang ada diatas itu lho

    BalasHapus
  15. ga bisa euy,yang keluar undified

    kurubah" lagi,malah jadi cuma ada icon kalendernya doang g ada tanggal ma bulan

    visit here http://cunz14.blogspot.com

    BalasHapus
  16. mksh kang buat ilmunya,,

    sy punya rahasia bisnis internet yang mudah banget di pelajari nih
    klik ja http://blog-bisnis-rianriza.blogspot.com

    BalasHapus
  17. mksh yahh :)
    berhasiilll. hhe

    BalasHapus
  18. Kok saya kurang berhasil ya ..

    BalasHapus

blogger