Blogger Driver

March 3, 2010

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

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 & 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!

Optimize Blog Title to Get a Better Search Result

Title usually located in front of the blog posting title. As the smart seo, optimize title that will affect us in creating blogs in the top rank search results. Surely people would prefer to vote click on the search results display the title of the posting directly. Examples of this in my blog.
If you are using tricks to change the title of your blog post title then it would be great to go into the front ranks of search engines, or more Search Engine Friendly.

Changing Blog Title with Post Title

1. Login to your Blogger account

2. Select Layout » Edit HTML

3. Find the following code:

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

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

4. Replace code with:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

5. Finally, click Save Template.

To the main page title will remain the title of the blog. But if you try to open a post, the post title would later become the title of the blog.

Good luck...