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

read more »

Free Link Exchange

Free Link exchange is one of several ways to promote our blog. On Blogger Driver, I will provide a blogroll to place your link. I will be placed in the sidebar and will appear on every page.
Here's the code:

<a href="http://blogger-driver.blogspot.com" target="_blank" title="Blogger Tips &amp; Tricks">Blogger Driver</a>

If you who want to exchange your link with Blogger Driver, please leave a comment below of this post, then place the code in your sidebar and appear on every page.

Perhaps with this Free Link Exchange, we can promote our blog successfully and we can make a better friendship.

Ok, keep blogging!

read more »

Join InstaForex Get 30% Bonus!

Spread this Blog!Bookmark This Blog!

Facebook Twitter Google Buzz Delicious Digg Stumbleupon Linkedin
Yahoo! Bookmarks Google Bookmarks Reddit Mixx Technorati Subscribe via Email Subscribe via RSS Feed
Blogger Driver FeedCount
Receive our updates direcly to your inbox
Please fill the form below:

Chatbox

Followers

Visitor Traffic