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

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--><br /> <b:loop values='data:post.labels' var='label'><br /> <b:if cond='data:label.name == &quot;YOUR_LABEL_#1&quot;'><br /> TEXT OR LINK TO IMAGE COMES HERE<br /> </b:if><br /> </b:loop><br /> <!--LABEL-SPC-ICON-STOPS-->

If you want to display the icons for four labels, then use this code:

<b:loop values='data:post.labels' var='label'><br /> <b:if cond='data:label.name == &quot;YOUR_LABEL_#1&quot;'><br /> TEXT OR LINK TO IMAGE COMES HERE<br /> </b:if><br /> <b:if cond='data:label.name == &quot;YOUR_LABEL_#2&quot;'><br /> TEXT OR LINK TO IMAGE COMES HERE<br /> </b:if><br /> <b:if cond='data:label.name == &quot;YOUR_LABEL_#3&quot;'><br /> TEXT OR LINK TO IMAGE COMES HERE<br /> </b:if><br /> <b:if cond='data:label.name == &quot;YOUR_LABEL_#4&quot;'><br /> TEXT OR LINK TO IMAGE COMES HERE<br /> </b:if><br /> </b:loop>

Replace the code in "YOUR_LABEL_#1" etc with the exact names of your labels/categories (including space " " between two words). And replace the text in "TEXT OR LINK TO IMAGE COMES HERE" with the link to the icon you want to use.

For Example: To use the books icon, replace that text "TEXT OR LINK TO IMAGE COMES HERE" with this code: <img src="http://i49.tinypic.com/2elukh4.jpg" alt="Book Reviews"/>

Finally save the template.

Hey! My friends, If you like my post you can save it using "Save Page as PDF" button below and you can even share them to your friends with social networking buttons provided below this post.