loading...
/ / Merubah Tanggal Posting menjadi Icon Kalender

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

44 komentar untuk “Merubah Tanggal Posting menjadi Icon Kalender”

  1. kucrit2 Juni 2009 pukul 20.23

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

    BalasHapus
  2. Ad4m San™2 Juni 2009 pukul 20.36

    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. Ad4m San™2 Juni 2009 pukul 21.38

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

    BalasHapus
  4. f33 Juni 2009 pukul 00.32

    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. f3hry3 Juni 2009 pukul 00.35

    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. Unknown3 Juni 2009 pukul 12.06

    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. IdeHosting4 Juni 2009 pukul 12.12

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

    BalasHapus
  8. Penyejuk Hati6 Juni 2009 pukul 10.14

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

    BalasHapus
  9. Anonim6 Juni 2009 pukul 12.32

    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. f3hry12 Juni 2009 pukul 18.27

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

    BalasHapus
  11. f3hry12 Juni 2009 pukul 19.18

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

    BalasHapus
  12. smartblog24 Juni 2009 pukul 01.09

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

    BalasHapus
  13. Unknown24 Juni 2009 pukul 01.58

    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. Faik2 Juli 2009 pukul 17.29

    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. chepul384 Juli 2009 pukul 11.30

    boleh ngelink nggakk???

    BalasHapus
  16. Unknown4 Juli 2009 pukul 13.08

    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
  17. afiftkj6 Juli 2009 pukul 15.39

    makasih ea bozzz!!!

    BalasHapus
  18. xtremesh0p11 Juli 2009 pukul 19.09

    tips bagus,jd pengen coba juga..hehehe

    BalasHapus
  19. Muhammad As'ad16 Juli 2009 pukul 17.18

    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
  20. Unknown18 Juli 2009 pukul 23.53

    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
  21. faiz7 Agustus 2009 pukul 06.36

    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
  22. Heart Disease14 Agustus 2009 pukul 16.15

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

    BalasHapus
  23. DAFFA20 Agustus 2009 pukul 15.21

    Bos aku pake gambar kalendernya yach...

    BalasHapus
  24. JUSUF3 Oktober 2009 pukul 18.47

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

    BalasHapus
  25. Desi Safitri6 Oktober 2009 pukul 17.41

    mas, gmn ya gak nemu kode

    h2.date-header {

    trus jd gmn solusinya heheh :)

    muph newbie :D

    BalasHapus
  26. Unknown10 Oktober 2009 pukul 16.52

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

    BalasHapus
  27. R Katu Unggara14 Oktober 2009 pukul 13.36

    ..
    hm..

    ternayta d blog ku uda ad..
    ;;)

    BalasHapus
  28. andi17 Oktober 2009 pukul 23.26

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

    BalasHapus
  29. Hanny Sofiana30 Januari 2010 pukul 18.51

    Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  30. Hanny Sofiana30 Januari 2010 pukul 18.52

    susaaaaaahhhhhhhhhhhhhhhhhh

    BalasHapus
  31. nowGoogle.com adalah Multiple Search Engine Popular1 Februari 2010 pukul 13.59

    ini yg kucari, thanks

    BalasHapus
  32. street article1 Februari 2010 pukul 14.00

    salam kenal dari ku

    BalasHapus
  33. nowGoogle.com adalah Multiple Search Engine Popular6 Februari 2010 pukul 07.43

    mantap nih ye

    BalasHapus
  34. jun2 Maret 2010 pukul 21.04

    coba ah :)

    BalasHapus
  35. Buku gaul14 Maret 2010 pukul 19.37

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

    BalasHapus
  36. Forantum I Blogging is My Life I Tutorial Blog I Tips dan Trik Blog I SEO I Free Template13 Mei 2010 pukul 18.49

    Sangat menarik...

    BalasHapus
  37. putrahosting.com dapur hosting hemat18 Mei 2010 pukul 11.09

    makasih infonya om

    BalasHapus
  38. putrahosting.com dapur hosting hemat27 Mei 2010 pukul 10.22

    trik yang sangat bermanfaat

    BalasHapus
  39. hiez_bi4 Juni 2010 pukul 00.03

    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
  40. Bayu14 Juni 2010 pukul 20.45

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

    BalasHapus
  41. Unknown27 Oktober 2010 pukul 23.09

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

    regards
    JOHNY

    BalasHapus
  42. The Warrior19 Desember 2010 pukul 18.34

    wah bgus.....master2 nya ada disini

    BalasHapus
  43. Unknown8 Januari 2011 pukul 20.31

    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
  44. Mr.Randy5 April 2011 pukul 11.16

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

    BalasHapus

Komentar baru tidak diizinkan.

Langganan: Posting Komentar (Atom)