How to Replace Posting Date with a Calendar Icon

Changing the posting date with a calendar icon will make your blog more beautiful. It will not make your page load be slower because the image size is only 3kb. You can do it by raeading this tutorial carefully, so keep a close eye on it.

Here are The Steps to Change Your Posting Date with a Calendar Icon

1. Login to your Blogger account

2. Choose Layout » Edit HTML, then check the Expand Widget Templates. Before we do more, please backup you template to prevent any mistkes.

3. If you're done, find the following code:

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

and just after it, place the next code:

<script type='text/javascript'>
//<![CDATA[
/* http://blogger-driver.blogspot.com */
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>

4. Find ]]></b:skin> code, then paste the next code just before it:

.dateblock {
background: url(http://tipsbloggerzacky.googlecode.com/files/bluecalend.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;
}
.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;
}

note:
- http://tipsbloggerzacky.googlecode.com/files/bluecalend.gif is your calendar icon url, you can replace it with this icons:


- #3366CC is your date font color, you can change it by reading this html color codes post.

5. Finally, click Save Template.

Click here for the demo test.

Good luck...