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 !

6 thoughts on “Show Image Icon Before/After Post Titles

  1. how to make the icon before the post title changed regarding to the label of that post,
    suppose that the post is under news label
    so i want my icon to be news.jpg
    if my another post is under video label
    so my icon should be video.jpg

    i dont know how to script it.

    so if i have 7 post in my blog page,
    every post should display different icon before its title depend on their label for each post.
    i will be very thankful if you can help me
    im waiting your response..

Leave a Reply

Your email address will not be published. Required fields are marked *