Optimize the date of Blogger template to look better [below the post title] and also better SEO

Advertisement

You should have noticed that in default blogger template, the date of the post comes above the title wrapped inside a h2 tag. Well not only it looks bad but also it has a negative impact on the template SEO [Search engine optimization]. So today we shall discuss how to move the date header of the post below post title (As shown on the picture right!) and also tweak it to make our template SEO friendly [Don't worry, it is not a Black hat SEO]. Personally I have done this tweak and this has helped me a lot. So, now sharing this trick with all of you! Note that for this tweak you need to edit your template.

Having a little knowledge of CSS and XHTML will obviously help you but we shall try to cover the whole tutorial in such a manner that you will be able to modify, even if you are a newbie blogger. Please read on below to know about the implementation…

Result of this modification and requirement:

After this modification we shall have

• Moved the Post date below the title;
• Have wrapped then inside a <div> tag, instead of <h2> and will also apply styles to it!
• a Better SEO friendly template.

The only requirement is that you need a Blogger blog [@BlogSpot] and a good web browser like Firefox. Also if you wish to edit the theme not on the browser but on a good editor like Notepad++ then download it from here. Now we are ready to make the changes

STEP 1: Moving the date below title and wrapping with a div tag:

As usual go to your blogger dashboard > Layout > Edit HTML and click on the “Expand widget Templates” tab.

Now search for the following piece of code(Ctrl+F) [Tip: search for date-header]

<b:if cond='data:post.dateHeader'>

    <h2 class='date-header'><data:post.dateHeader/></h2>

</b:if>

and Delete that code.

Now search for this piece of code(Ctrl+F) [Tip: search for data:post.title]

<b:if cond='data:post.title'>

  <h3 class='post-title entry-title'>

    <b:if cond='data:post.link'>

        <a expr:href='data:post.link'><data:post.title/></a>

    <b:else/>

        <b:if cond='data:post.url'>

            <a expr:href='data:post.url'><data:post.title/></a>

        <b:else/>

          <data:post.title/>

        </b:if>

    </b:if>

  </h3>

</b:if>

Just after the whole code add this piece of code:

<div class='date-header'>

    <data:post.dateHeader/>&amp;nbsp;&amp;nbsp;at&amp;nbsp;<data:post.timestamp/>

</div>

So that the whole code looks like this:

<b:if cond='data:post.title'>

  <h3 class='post-title entry-title'>

    <b:if cond='data:post.link'>

        <a expr:href='data:post.link'><data:post.title/></a>

    <b:else/>

        <b:if cond='data:post.url'>

            <a expr:href='data:post.url'><data:post.title/></a>

        <b:else/>

          <data:post.title/>

        </b:if>

    </b:if>

  </h3>

</b:if>

<div class='date-header'>

    <data:post.dateHeader/>&amp;nbsp;&amp;nbsp;at&amp;nbsp;<data:post.timestamp/>

</div>

Just preview the template now! If you have done this correctly then you should see the post date below the post title like this…

Don’t worry about the looks. We are going to change it on out next step. Having the time-stamp along with the date stamp is highly recommended as Blogger do not show date if 2 or more posts have same. Where as each one has its own time-stamp. So better we leave this code intact.

STEP 2: Styling up the Post date:

Now comes the fun part. We shall now look into the CSS code to style up the date format. After proper formatting it should look like this!

Ok so here is how! First search for some codes similar to this [Tip: Search for .date-header]:

h2.date-header {

  margin:1.5em 0 .5em;

}

And DELETE that. Don’t worry about what is there inside the curly braces “{……}”. Just delete it! We will add our own style now. Now inplace of that add the following snippet of CSS code:

.date-header {

    background: transparent url(http://i41.tinypic.com/ousaw2.png) no-repeat scroll left center;

    font-size: 13px;

    font-family: Arial;

    line-height: 1.6em;

    padding: 4px 0 4px 30px;

    margin: 5px 0 30px 0;

}

If you don't want to modify the code then just simply click on the “Preview” button. You should see something similar to this!

Explanation, Notes and Things to remember:

• If you have some knowledge on CSS then feel free to modify what ever you want [For example play with font-size and family].
• Also if you wish to change the clock then search for your icon here. Replace the URL under the background: definition like this (Replace the IMAGE_URL with the URL of your image)

  background: transparent url(IMAGE_URL) no-repeat scroll left center;

• Also change the line-height and padding in accordance to your image dimension. [Go for some hit and trial experiments]
• Here we have kept a margin of 5px 0 30px 0 [Obviously in the order of Top Right Bottom Left] to have some space below the date. This is a good practice as the date will not mess up with the post body and the theme will look clean. If you are not satisfied with this then do change the values and see what suits you best.

And Finally HIT THE SAVE TEMPLATE Button and you are done. Note that this tutorial is based on the default Minima template. This will also work if you are using other default blogger template. If you are using custom templates then you need to understand it at your own. The basic thing is you need to delete the default date heading and put the code inside a div tag having a class date-header. Do your own part of experiments to figure this out!

Well that’s it! Now we have a better SEO tweaked Good-Looking template. Do share this with your friends if you have liked this. Also if you have faced any problem then feel free to ask us!

Hi there! Enjoyed this post? Make sure to Subscribe to our Feed to get Regular Updates. Alternately Enter Your Email Here to get them in your Mail-box

Confused? Click Here to know more about RSS Feeds and other Category wise subscription method.

Still looking for something?

Loading Twitter trackbacks..