MENGGANTI TANGGAL POSTINGAN DENGAN ICON KALENDER

Anda bosan melihat format tanggal postingan pada blog..??. Gantilah dengan tampilan beda yaitu dengan memakai latar image kalender.
Ada beberapa pilihan warna yang dapat anda tampilkan atau anda berkreasi sendiri dengan membuat latar image yang anda sukai.
Caranya dapat anda ikuti seperti berikut ini :

Langkah pertama :

1. Log in ke Blogger dengan ID anda.
   
2. Pilih Pengaturan.
3. Pilih Format.
4. Kotak pada Format Header Tanggal ganti dengan format bulan, tanggal, tahun. Contoh 5.01.2009 (Bulan Mei, Tanggal 1, Tahun 2009).
5. Klik tombol Simpan Perubahan

Langkah kedua : Sebelum mengedit template, back up dulu templatenya agar jika terjadi kegagalan anda dapat mengembalikan template tadi. Klik Download Template Lengkap, kemudian simpan pada komputer anda.

1. Pilih Rancangan
   
2. Pilih Edit HTML
3. Kasih tanda centang pada kotak Expand Template Widget.
4. Cari kode ini :
   
   <title><data:blog.pageTitle/></title>


5. Copy kode dibawah ini kemudian paste tepat dibawah 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>
   


6. Cari kode ini
   
   
   
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
   
   


7. Kalau tidak anda jumpai, coba anda cari kode ini :
   
   
   h2.date-header {
margin:1.5em 0 .5em;
}



8. Copy kode dibawah ini, kemudian paste tepat dibawah kode tadi.
   
   
   
.dateblock {
background: url("https://lh3.googleusercontent.com/_1j80TgNqd_8/TV1F8f50XKI/AAAAAAAABvo/GVOfSuDvM9o/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: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
padding: 4px 0px 0px 0px;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;
padding: 4px 0px 0px 0px;
}

• color: #fff; merupakan kode warna putih untuk bulan. Gantilah dengan warna pilihan anda.
• color:#3366CC; merupakan kode warna biru untuk tanggal. Gantilah dengan warna pilihan anda.


• Kode https://lh4.googleusercontent.com/_1j80TgNqd_8/TV1GiewVZhI/AAAAAAAABwE/8dwtHYzDfBg/putih.gif : adalah gambar icon kalender. Anda bisa menggantinya dengan gambar-gambar dibawah ini cukup hanya dengan mengganti tulisan yang dicetak tebal dengan kode gambar berikut ini, misalnya anda ingin kelender yang berwarna merah, caranya ganti text dengan merah

birumuda.gif	biru.gif	hijau.gif
putih.gif	hitam.gif	kuning.gif
merah.gif	oranye.gif	ungu.gif

Langkah selanjutnya, anda cari kode <data:post.dateHeader/>.
Setelah ketemu kode yang dicari, ganti kode tersebut dengan kode dibawah ini :

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

Klik Simpan Template, dan lihat hasilnya

Catatan :

• Kalau Tanggalnya berubah menjadi tulisan "Undefine", kemungkinan ada kesalahan dalam melakukan pengeditan, coba anda ulangi dengan lebih teliti.

---

Jika artikel ini bermanfaat..? Bagikan lewat :

BACA JUGA ARTIKEL DIBAWAH INI