April 11, 2009

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 comments:

David Bergeron said...

Pretty cool. I was thinking of putting a date icon just before the title. I'll try to add it to my blog a little later.

David Bergeron
http://www.poker006.com/

IDBloggers said...

I Must Do That.. Maybe.. Like MY Blog????

Thanks For Hack IN Tis Time... Bloggerstop...

Anonymous said...

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

Shankar said...

can u give me some tips on adding custom images before our post... suppose if i have an image how to add it before post?

Blogging for profit said...

Wow this is cool.. :D

Anonymous said...

:)) ;)
thanks for this

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

Allowed HTML tags: <b>, <i> and <a>

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy