Mengganti Tanggal Posting dengan Icon Kalender

Bosan dengan tampilan biasa tanggal posting artikel? Pada Posting Web Desain kali ini Kak Hady Berbagi akan bagikan cara Mengganti Tanggal Posting dengan Icon Kalender. Tentunya akan terlihat lebih menarik seperti tampak pada screen shoot di samping. Inilah langkah-langkahnya.

1. Login ke akun Blogger anda
2. Pada dasbor blog anda silahkan pilih Tata Letak
3. Klik Edit pada bagian posting hingga muncul jendela Mengkonfigurasi Posting Blog
4. Checklist tanggal dan pilih format tanggal “tanggal bulan tahun” misal 5 Januari 2014
5. Simpan
6. Pada panel kiri klik Template
7. Klik Edit HTML
8. Untuk menjaga hal-hal yag tidak diinginkan, lakukan backup template
9. Cari kode <h2 class='date-header'><span><data:post.dateHeader/></span></h2> dan ganti dengan kode berikut:

<div id='Date'><script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script></div><b:else/><div id='Date'><script>changeDate(&#39;&#39;);</script></div>

10. Cari kode </head>. Letakkan kode berikut sebelum kode </head>

<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
day = "<strong class='date_day'>"+da[0]+"</strong>";
month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
year = "<strong class='date_year'>"+da[2]+"</strong>";
document.write(month+day+year);
DateCalendar = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Calendar style date ----------------------------------------------- */
#Date {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitol7GSnDm1BFIICA2u6IZ3s5GWy-YE6mne-TyQEZ9WiAcFrWJiyNZ7eZaJX1RDeZJee2_UJcPvTNbt2BGC7AXaJen6BPHCGT-dB8A_uYBQxpZ2qCQaa3f4UoI5GoKb5v605ZSTWxK3To/s100-no/framedate.png) no-repeat;
display: block;
width:110px;
height:110px;
float: left;
margin: 15px 2px 0 -100px;
padding: 0 0 8px 0px;
border: 0; text-transform: uppercase;
}
.date_month {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#ffffff; /* Month&#39;s color */
}
.date_day {
display: block;
font-size: 50px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Day&#39;s color */
}
.date_year {
display: block;
font-size: 16px;
margin-top:-8px;
text-align:center;
color:#282828; /* Year&#39;s color */
}
</style>
</b:if>

11. Simpan template dan lihat hasilnya.