Merubah Tanggal Posting menjadi Icon Kalender

Setelah sekian lama istirahat memposting tentang tips seo atau trik blogger, ternyata banyak pertanyaan dan masukkan dari teman-teman OB melalui kolom komentar. Satu-persatu OB simak dan "duaarrr" tiba-tiba meletus balon hijau (becanda...). Salah satu pertanyaan yang sementara ini dapat OB posting adalah dari sobat Ad4m San. Memang sobat OB yang satu ini rada-rada ganjil. Kadang kalau tidak/belum dipenuhi keinginannya, bisa-bisa waktu ketemu di jalan abis ini kepala pada benjol semua. Dan kalau kamu punya waktu senggang kunjungi juga blognya Ad4m San di sini. Pertanyaannya seperti ini :
"Mas numpang tanya lagi hehehe klo mau buat tanggal disamping judul post kaya di http://www.faizoi.co.cc, gmn mas???"

Ayo kita belajar bersama-sama mengupas trik blogger merubah tanggal posting menjadi icon kalender.

Langkah I :
  • Login ke account blogger kamu.
  • Pilih Pengaturan --> Format
  • Dalam halaman Format, ganti Format Header Tanggal menjadi seperti ini mm.dd.yyyy (bulan.hari.tahun), ex: 6.02.2009.
  • Simpan Setelan

Langkah II:
  • Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
  • Cari kode CSS di bawah ini, letaknya antara <head> ... </head>.
h2.date-header {
...
}

atau
.date-header {
...
}

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.
  • Kalau sudah ketemu, copas kode berikut tepat dibawah kode CSS di atas.
.dateblock {
background: url("http://i647.photobucket.com/albums/uu191/ariamsi/Icon/bluecalend3.gif") no-repeat;
margin: 0 10px 0 0;
font-weight: bold;
width: 33px;
height: 36px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 8px;
width: 34px;
margin: 0 auto;
padding-top: 2px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 12px;
width: 34px;
margin: 0 auto;
padding-top: 2px;
}

Catatan:
  1. Silakan ganti kode yang berwarna merah dengan kode warna di sini.
  2. Silakan pilih image background untuk icon kalender kamu dengan mengganti kode yang berwarna hijau dengan nama file di bawah image berikut.
greencalend3.gifyellowcalend3.giforangecalend3.gif
pinkcalend3.gifungucalend3.gifredcalend3.gif

  • Kemudian lakukan copas kode di bawah ini dan letakkan di atas kode </head>.
<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>
  • Terakhir cari kode di bawah ini.
<data:post.dateHeader/>
  • Dan ganti dengan kode berikut.
<div class='dateblock'>
<script>date_replace('<data:post.dateHeader/>');</script>
</div>
  • Jangan lupa disimpan.
Catatan Penting :
Apabila menggunakan trik blogger ini, tanggal posting (date header) dalam template blog kamu harus berada di atas judul posting (post title) atau posting (post).
Jika 1 atau 2 baris paragraf postingan kamu ikut masuk kmenjorok ke dalam, maka perlu penambahan kode pada CSS .post-body. Kode tambahannya adalah padding-top:10px; (ubah nilainya sampai baris paragraf postingan kamu berada di bawah icon tanggal).

Sumber : Cara Mengganti Tanggal Posting dg Icon Calender by Bang Kendhin.


Selamat merubah tampilan tanggal posting...

45 komentar untuk “Merubah Tanggal Posting menjadi Icon Kalender”

  1. mmmm..... kapan2 tak coba ah..... trims infonya mas..

    BalasHapus
  2. wah mas OB tararengkyuuuu hatur nuhunnnn hehehe~~~ cepet direspon >.<, haduh segitunya ampe kepala penjol ^_^, blog ane juga cepet berkembang mas gara-gara2 ilmu ente, ilmu yang didapat dr ente ane kembangin lagi hohoho~~ jadi pengen promosiin web mas OB juga hikxxzzz pokoknya klo udah merajai google mas OB orang pertama yang dikasih ucapan terima kasih hahaha~~~ jadi curhat gini... keep posting mas!! jangan bosen-bosen direpotin yach (*v*)

    BalasHapus
  3. Buat tambahan pada beberapa template diletakkan diatas <b:if cond='datapost.url'> soalnya ditemplate ane gak ada yang kayak mas OB punya

    BalasHapus
  4. wah,mas OB thnks bgt ni ilmunya,pas bgt n kbtulan emg gw lg nyri nih trik. ud searching2 di mbah google ga ktemu2,akhirnya....:D

    BalasHapus
  5. owya mas,gw lupa..
    sklyan mo tnya dnk mas,gmana sih cra bkin rcent visitor yg kya pnya mas ini..
    gw ud bkin tp ko hsilnnya bda ya..~x(

    BalasHapus
  6. to Ad4m San : Agar postingan Adam ngga ikutan masuk menjorok ke dalam, coba tambahkan kode padding-top:10px; pada kode berikut.
    .post-body {
    margin:0 0 .75em;
    line-height:1.6em;
    padding-top:10px;
    }

    to f3hry: ntar OB bikin postingnya. Kemudian kenapa beda, karena Template F3hry defaultnya sudah terinput icon kalender lain. Coba liat kode CSS
    /* Calendar
    ----------------------------------------------- */

    BalasHapus
  7. nice info bro..
    kapan2 ta coba ah..
    salam kenal..

    BalasHapus
  8. Ma kasih banget mas... tipsnya sangat bagus, ntar Insya Allah gw cobain...soalnya aq baru merangkak hehehee (kayak anak kecil)...

    BalasHapus
  9. terima ksih ya mas OB, template anda maantap banget dan cocok bagi aku yang baru mulai bloggiing. Aku minta izin downlooad ya mas. Mas terus berkarya. Lebih cepat lebih baik ....ok mas

    BalasHapus
  10. mas OB,lyt blog saya deh..
    ko judul posting dan icon clendarnya ga sejajar sih mas?
    mhon pencerahannya..

    BalasHapus
  11. ga jd mas,ud saya utak-atik sndiri dan ternyata berhasil..8-}

    BalasHapus
  12. ko code h2.date-header tidak ditemukan di template blog aku...
    ada cara yang lain nga...Please...

    BalasHapus
  13. to smaertblog: Kelihatannya untuk jenis template kamu, ngga disertakan header tanggal post. Coba dicek ke Tata Letak --> Elemen Halaman. Dalam elemen/kotak Posting Blog, klik Edit. Kemudian amati dalam Pilih Item urutan pertama, ada tidak tanggal postingnya.

    BalasHapus
  14. Mas Gak bisa niy ana.... semua kode yg musti dicari diatas gak ada semua di template blogku... gmn ya??? mohon pencerahannya... Syukron....
    templateku pake Aspire...

    BalasHapus
  15. to Faik: Blog kamu telah memiliki fitur tanggal ini. Agar tanggalnya muncul, coba kamu ganti metode penanggalan dalam Pengaturan Format --> Format Header Tanggal dalam beberapa variasi (umumnya bulan kemudian tanggal)

    BalasHapus
  16. tips bagus,jd pengen coba juga..hehehe

    BalasHapus
  17. Bagus juga tuch mas gambar melayangnya di pojok kiri bawah yang ada tulisannya Cara pasang ini. Gimana tuch caranya pasang tulisang itu di bawah gambar tersebut?

    BalasHapus
  18. to Muhammad As'ad: Cukup dengan menambahkan kode berikut di antara <div> ... </div>
    <small><p><a href="http://link_kamu">Cara pasang ini</a></p></small>
    Ganti link_kamu dengan alamat link yang dituju

    BalasHapus
  19. mampir boz hehe.. lagi searching faizoi09 malah ketemu ama blog mas, faizoi.co.cc dah dibuang mas,nyesel kenapa dari awal pake co.cc napa ga apa adanya aja yah.. sayang padahal dah PR2, mulai dari awal lagi nih ngebangun blog,
    salam perkenalan aja mas..keep blogging..tips triknya keren euy...

    BalasHapus
  20. mas kok di blog saya yang muncul di kotak kalender undefined ya, bukan bulan dan tanggal

    BalasHapus
  21. Bos aku pake gambar kalendernya yach...

    BalasHapus
  22. Lam kenal:)
    Wah sy coba malah kalendernya tidak terlihat jadi bgmana nih =)
    tolong info selanjutnya ,thks sblmnya saya serius loh:) krn sy gatek:)

    BalasHapus
  23. mas, gmn ya gak nemu kode

    h2.date-header {

    trus jd gmn solusinya heheh :)

    muph newbie :D

    BalasHapus
  24. itu ko gambar kalendernya ada tapi gada tanggalnya ya? terus disebelah gambarnya ada tanda '); maksudnya apa? makasih

    BalasHapus
  25. ..
    hm..

    ternayta d blog ku uda ad..
    ;;)

    BalasHapus
  26. ...wah bgus ntu tax coba y..!!!
    makasih bgt infonya..!!
    cari trik blog dsini emang komplit...
    heheheheh :))

    BalasHapus
  27. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  28. salam kenal mas
    saya mau tnya kenapa gambarnya saja yang muncul yaaa
    sedangkan tanggal dan bulannya tidak mohon pencerahannya trim

    BalasHapus
  29. berhasil.. berhasil hore..... thanks om.... kpan2 berkunjung ya di blog ku http://12alam4.blogspot.com

    tpi nanti jangan ngejek ya... soalnya masih amatiran hehehehehehe :))

    BalasHapus
  30. makasih mas OB buat tutornya...
    berguna sekali nih buat saya yang masih belajar ngeblog

    BalasHapus
  31. Thanks bos buat infonya,,, Sangat membatu sekali... sekarang date post ku jadi ikon calender dehhh....
    Update terus ya tips2 nya....

    regards
    JOHNY

    BalasHapus
  32. wah bgus.....master2 nya ada disini

    BalasHapus
  33. bang, kalo munculnya "undefined" kira2 apanya yang salah ya?
    ini blog ane
    www.e-ducation05.blogspot.com

    coba lihat n kasih tahu kenapa bisa salah ya bang.thanks

    BalasHapus
  34. wah koq saya enggak bisa ya?mohon pencerahannya
    http://ypsrandy.blogspot.com

    BalasHapus