March 3, 2010

How to Replace Posting Date with a Calendar Icon

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:

Green Calendar Icon Orange Calendar Icon Pink  Calendar Icon Purple Calendar Icon Red Calendar Icon Yellow Calendar Icon

- #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...

Comments :

GED online said...

Amazing post and very interesting stuff you got here! I definitely learned a lot from reading through some of your earlier posts as well and decided to drop a comment on this one!

Post a Comment