Show Label Specific Icons Below Post Titles

In this Blogger tutorial, you will learn to display icons or any text/image specific for any label/category under the post titles in your blog.

For example, if these are the four main topics/categories of your blog: Music, Dating tips, Finance and Books reviews/Literature then for posts on book reviews you can show this icon below their post-titles:
Books icon

Similarly for posts on music, finance and dating tips you can show these icons:
Music icon Stats icon Heart icon

Instructions to implement this hack in to your blog:
NOTE 1: If you want to display the same icon below the titles of all your posts irrespective of the labels used, then kindly follow this tutorial.
NOTE 2: You must already have some tags/labels/categories in your blog to use this hack.

STEP #1:
Log in to Blogger, go to Layout -> Edit HTML and tick the tick-box "Expand Widget Templates"

STEP #2
Find (CTRL+F) this code in the template:
<div class='post-header-line-1'/>
and immediately BELOW/AFTER it, paste this code:
<!--LABEL-SPC-ICON-STARTS-->
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;YOUR_LABEL_#1&quot;'>
TEXT OR LINK TO IMAGE COMES HERE
</b:if>
</b:loop>
<!--LABEL-SPC-ICON-STOPS-http://bloggerstop.net-->

If you want to display these icons for four labels (as in the above example), then use this code:
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;YOUR_LABEL_#1&quot;'>
TEXT OR LINK TO IMAGE COMES HERE
</b:if>
<b:if cond='data:label.name == &quot;YOUR_LABEL_#2&quot;'>
TEXT OR LINK TO IMAGE COMES HERE
</b:if>
<b:if cond='data:label.name == &quot;YOUR_LABEL_#3&quot;'>
TEXT OR LINK TO IMAGE COMES HERE
</b:if>
<b:if cond='data:label.name == &quot;YOUR_LABEL_#4&quot;'>
TEXT OR LINK TO IMAGE COMES HERE
</b:if>
</b:loop>

Replace the code in RED with the exact names of your labels/categories (including space " " between two words). And replace the text in GREEN with the link to the icon you want to use. For ex.: To use the books icon displayed above, replace that text in green with this code:
<img src="http://i49.tinypic.com/2elukh4.jpg" alt="Book Reviews"/>

Finally save the template.


This post is based on the request by Christian from World Of Football

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

25 comments

Write comments
January 12, 2010 11:49 AM delete

Thanx for dis lovely trick but i cound't use this in my BLOG

Reply
avatar
January 12, 2010 9:32 PM delete

thanks a lot, wil give it a try

regaards
christian

Reply
avatar
January 12, 2010 10:00 PM delete

tried it and it works, but is there a way to place them at the beginning of post title? for eg, that image followed by post title

Reply
avatar
January 13, 2010 6:27 AM delete

@christian

I just visited your blog, and I think you already got the answer.
Anyways for otehr readers....to display the icons above the POST-TITLES, in STEP #2, instead of pasting the new code AFTER that line, paste it BEFORE the code:
<div class='post-header-line-1'/>

Reply
avatar
January 13, 2010 6:28 AM delete

@Kashif,

Why rn't you able to use it, any errors?

Reply
avatar
Anand
January 15, 2010 12:03 PM delete

Hi Sai,
Cannot Find <div class='post-header-line-1'/>
in my blog.
What to do?

Reply
avatar
January 15, 2010 12:20 PM delete

Hi Anand, make sure you have marked the tick-box "expand widget templates"

Reply
avatar
Anand
January 15, 2010 7:00 PM delete

I have marked the tick-box "expand widget templates"
Even then i am not able to find.

Reply
avatar
January 16, 2010 12:11 PM delete

Hey Anand,

If that code is not there in your template, there must be some other alternative code as this is necessary to display post-titles in blogs. Anyways, if you are unable to find it, then search for this one:
>data:post.body/<

and then immediately ABOVE/BEFORE it, paste that code(from STEP #2).

Reply
avatar
January 18, 2010 10:40 AM delete

This is a great information. One question :-/ (I am non-tech :(). Will this icon work, when I have comment number image behind post title?

Reply
avatar
January 18, 2010 10:58 AM delete

Yes Kanchan it'll work, but it'll be better if you display them on opp. sides, for ex: comments bubble on right and these icons on left.

Reply
avatar
January 19, 2010 4:03 AM delete

Okay, Good Suggession. Thank you. :)
Is there any trick for attractive archives?

Reply
avatar
January 19, 2010 6:24 AM delete

I don't know, if you find this attractive or not, but a different type of archive widget is a calendar blogger archive widget.

Reply
avatar
Anonymous
February 12, 2010 12:16 AM delete

Instead of image or text can I put a widget there? Most likely yes, can someone show me how?

Reply
avatar
February 12, 2010 8:06 AM delete

@Anony

Well if you are talking about retweet/facebook buttons, then here are the tutorials:
Add Retweet/Tweet It buttons to Blogger

Add facebook buttons to Blogger blogs

Reply
avatar
April 21, 2010 9:32 AM delete

You allow me to create an article on how to implement this hack in Portuguese. I promise to give credit to your blog, mine is the noticiaeblog.com.

Reply
avatar
April 21, 2010 10:30 AM delete

Yes you are allowed, but it should not look a copy-pasted translated work and do keep the credits. Glad that you want to share the work :)

Reply
avatar
November 10, 2010 1:28 PM delete

hey can u please help me fast ...i want make my page some tab like urs when we click * Optimize Your Blog* there is more sub page right...how i do that for my blog ...please help ~x( ~x( ~x( ~x( ~x( ~x(

Reply
avatar
November 07, 2011 7:01 AM delete

Wow ... nice tips... i lke.. good job and thnks..

Reply
avatar

Comments are moderated on this blog

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

Comment Like This! and Optimize your blog EmoticonEmoticon