Show Image Icon Before/After Post Titles

Here's another simple hack for Blogger/BlogSpot blogs, by which you can display a small image just before or after all your post titles. It will be displayed like this:

You may use your own image or any other image (which you can even link to either your profile or any other web page).
Follow these easy instructions to add a similar image to your blog titles:

Log in to Blogger, go to "Layout" -> "Edit HTML" -> click on "Expand Widget Templates"
Find (CTRL+F) this code in the template:

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

Now to show the image, just before the title, add the image code right between those two lines, like this:

<b:if cond='data:post.url'>
<img src='http://www.thechangeworks.com/images/still%20penpad.gif'/>
<a expr:href='data:post.url'><data:post.title/></a>

And to show the image just after the title, add the image code after those two lines:

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<img src='http://www.thechangeworks.com/images/still%20penpad.gif'/>

Finally save the template.
NOTE: Instead of using a simple image, you may add the code for Digg/Twitter submit buttons too !

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Posts