Mengganti Tanggal Posting dengan Icon Kalender

Untuk mempercantik tampilan blog anda, salah satunya adalah mengganti tampilan tanggal posting dengan tanggal yang menggunakan Icon (gambar) Kalender. Anda dapat melihat contohnya pada tanggal posting yang ada di bog ini. Cantik bukan ?????

Penasaran ingin mencoba menggantinya ?????

Adapun cara menghilangkan atau menyembunyikan Tulisan Label di bawah posting adalah sebagai berikut :
1. Masuk ke Blogger dengan ID anda
2. Bila sudah masuk Dashboard klik tab Tata Letak
3. Klik tab Edit HTML
4. Backup template anda dengn mengklik Download Template Lengkap
5. Beri  centang  pada "Expand Template Widget" seperti  gambar  di     bawah ini

6. Cari kode seperti di bawah ini

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

7. Kopi dan pastekan kode berikut ini di bawah kode tersebut

<SCRIPT type='text/javascript'>
//<! [CDATA[
/*********************************/
/* http://al-ridwan.blogspot.com */
/*********************************/
function date_replace(date) {
var bul = date.split('.');
var hari = bul[1], bulan1 = bul[0], tahun = bul[2];
var bulan =
['0','Jan','Peb','Mar','Apr','Mei','Jun','Jul','Ags','Sep','Okt','Nop','Des'];
document.write("<div class='bulan'>"+bulan[bulan1]+" </div> <div class='hari'>"+hari+"</div> <div class='tahun'>"+tahun+"</div>");
}
//]]>
</SCRIPT>

8. Kemudian cari kode ini seperti di bawah ini:

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

Kalau tidak ketemu coba cari kode seperti di bawah ini

h2.date-header {
margin:1.5em 0 .5em;
}

9. Letakkan kode berikut ini di bawah kode tadi

.tanggal {
background: url("http://i711.photobucket.com/albums/ww116/john_rodw/KalenderBiru.gif")no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.bulan {
font-size: 9px;
width: 37px;
margin: -3px 3px 0 0;
text-transform: uppercase;
color: #fff;
}

.hari {
color:#3366CC;
font-size: 17px;
width: 37px;
margin: -3px 3px 0 0;
;
}
.tahun {
color:#3366CC;
font-size: 9px;
width: 37px;
margin: -6px 4px 0 0;
}

10. Langkah selanjutnya cari kode seperti ini ini

<data:post.dateHeader/>

11. Ubah menjadi seperti di bawah ini

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

12. Kemudian klik tombol SIMPAN TEMPLATE
13. Langlah selanjutnya adalah klik tab Pengaturan
14. Kemudian klik tab Format
15. Pada Format Header Tanggal ubah menjadi (mm.dd.yyyy) atau bulan.tanggal.tahun.
16. Kemudian klik tombol SIMPAN SETELAH dan selesai

PENJELASAN :
Pada kode :

.tanggal {
background: url("http://i711.photobucket.com/albums/ww116/john_rodw/KalenderBiru.gif")no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

http://i711.photobucket.com/albums/ww116/john_rodw/KalenderBiru.gif bisa anda ganti dengan URL Image Address anda
width : 55px : bahwa lebar dari gambar 55px bisa anda sesuaian dengan lebar gambar anda
Height: 50px : bahwa tinggi dari gambar 50px bisa anda sesuaian dengan tinggi gambar anda

Pada kode :

.bulan {
font-size: 9px; --------------------------- Ukuran Font untuk bulan
width: 37px; ----------------------------- Lebar
margin: -3px 3px 0 0; -------------------- Batas
text-transform: uppercase;
color: #fff; ------------------------------ Warna font
}

Anda dapat menyesuaikan dengan gambar dan kebutuhan anda. Pada hari dan tahun demikian juga

Pilihan Icon untuk Kalender dan URLnya seperti dibawah ini
https://s26.postimg.cc/12ar1212/KalenderBiru.gif, anda hanya mengganti kode yang berwarna biru untuk URLnya
4rumvj77d/TanggalanBiru.png
qr11irqmh/TanggalanMerah.png
nk6hz4qqx/TanggalanCoklat.png
kdbyfhyl5/TanggalanHijau.png
ep5nomp3t/TanggalanHijauMuda.png
lsdj47cix/TanggalanUngu.png
a39jgabah/TanggalanOrange.png
ggymjit15/TanggalanKuning.png
4rumvjex5/TanggalanHitam.png
klankamh/TanggalanPink.png

Selamat mencoba !!!!!

Semoga berhasil

Artikel Lain Yang Terkait :