Mengganti Tanggal Dengan Icon Kalender

Tanggal posting default blogger berupa angka bisa dimodifikasi. Posting kali ini adalah bagaimana kita akan mengganti tanggal dengan icon kalender. Kalau anda bosan dengan format default penanggalan dari blogger, mungkin ini adalah jawaban yang akan membuat anda senang dan dijamin posting akan semakin ceria dan lebih modis. Caranya dengan penambahan kode CSS pada blog.page title template blog anda.

Untuk pengerjaannya, dapat dibagi dalam dua garis besar seperti berikut ini.

Pertama :mengganti format penanggalan.

1. Login ke blogger dengan id anda
2. Tuju Pengaturan
3. Pada tab menu pilih Format
4. Alihkan pandangan ke Format Header Tanggal
5. Ganti dengan format mm/dd/yyyy contoh: 10-12-2009
6. kemudian klik SIMPAN SETELAN

Kedua :menambahkan kode CSS pada template

1. Tuju Tata Letak
2. Klik Edit HTML
3. Centang kotak kecil Expand Template Widget
4. Backup template klik Download Template Lengkap
5. Cari kode ini :
   <title><data:blog.pageTitle/></title>
6. Copy dan paste kode berikut di bawah kode 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>

7. Sekarang cari lagi kode ini :
   h2.date-header {
   ...
   dan seterusnya
   ...
   }
8. Copy dan paste kode berikut di bawah kode tadi :

   .dateblock {
   background: url("http://i37.tinypic.com/4kblzq.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: 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;
   }

9. Kemudian cari kode ini :
   <span class='date-header'><data:post.dateHeader/></span>
10. Hapus dan ganti kode warna merah dengan kode berikut :

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

11. Klik SIMPAN TEMPLATE
12. Selesai

Jika tidak ada kesalahan, icon kalender seperti gambar ini :


Sedikit petunjuk :

• Icon kalender : http://i37.tinypic.com/4kblzq.jpg berwarna hijau dapat anda ganti dengan pilihan icon kalender berikut :

  biru http://i37.tinypic.com/bi8380.jpg
  cyan http://i37.tinypic.com/9gey5j.jpg
  hitam http://i38.tinypic.com/2h68xms.jpg
  kuning http://i33.tinypic.com/28k7e42.jpg
  merah http://i38.tinypic.com/2mesjmc.jpg
  orange http://i36.tinypic.com/2qau0pz.jpg
  pink http://i36.tinypic.com/2r7ub9g.jpg
  ungu http://i36.tinypic.com/am6rso.jpg

• Warna teks bulan dan teks hari ditunjukkan pada kode #fff dan #3366CC silahkan diganti
• Silahkan ganti ukuran dan posisi icon kalender dengan melihat kode width margin dan seterusnya
• Ganti ukuran huruf di font-size
• Dan seterusnya

Nanti kalau sudah jadi, icon kalender ini hanya ditampilkan pada posting terbaru di hari anda memposting artikel. Oke biar gampang, saya kasih contoh. Misalnya anda memposting 4 artikel dalam satu hari. Maka icon kalender hanya akan muncul di posting yang ke empat. Artinya icon kalender hanya muncul satu kali setiap ada posting di hari yang berbeda. Mudah-mudahan tidak ada masalah yang berarti dan semoga bermanfaat.

Related Post:

Trik Blogspot

• Menambahkan Image Pada Judul Posting
• Mengganti Pager Link Blogger Dengan Icon
• Klik Label Tampil Hanya Judul Posting Update
• Klik Label Tampil Hanya Judul Posting
• Menambahkan Icon Pada Label Dan Link Sidebar
• Menghilangkan Icon QuickEdit (Tang dan Obeng)
• Area Sidebar Dalam Kotak Terpisah
• Area Komentar Dalam Kotak Terpisah
• Area Posting Dalam Kotak Terpisah
• Background Warna Pada Teks Posting
• Modifikasi Pesan Pengantar Formulir Komentar
• Beda Tampilan Komentar Pemilik Blog
• Nomor Urut Komentar (Numbering Comment) Blogger
• Pasang Emoticon Di Atas Kotak Komentar
• Membuat Blockquote Dan Modifikasi Blockquote
• Masalah Pada Verifikasi Kotak Komentar
• Membuat Teks Berkedip Blink Text
• Membuat Horizontal Navigasi Blogger
• Avatar Profil Komentar Blogger Update
• Latar Belakang Teks Dengan Efek Stabilo
• Menggunakan Gambar Untuk Latar Belakang Blog
• Pasang Strip-Ad Seperti Navbar Blogger
• Menghilangkan Border Pada Image Posting
• Modifikasi Border Photo Profil Blogger

or or