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://lh3.googleusercontent.com/-5aJFYuy9VTs/UsTFcWawemI/AAAAAAAAAto/rTNT7Da1fmc/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.

Baca juga:

Kak Hady Berbagi

1. Terima kasih telah berkunjung dan membaca artikel ini

Judul : Mengganti Tanggal Posting dengan Icon Kalender
URL : http://hady-berbagi.blogspot.com/2014/01/mengganti-tanggal-posting-dengan-icon.html
Diposkan oleh : Kang Hady
Pada : Minggu, 05 Januari 2014.
Pukul : 05:33
Label/kategori : Ilmu Komputer , Web Desain
Bagikan ke : Facebook | Google+ | Twitter | Digg

2. Saya mengharapkan kritik dan saran dari pembaca semua. Untuk itu silakan berkomentar pada setiap postingan blog ini;
3. Setiap komentar yang anda berikan adalah masukan bagi saya agar blog ini lebih baik.