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:

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

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

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Posts