Jul 8, 2012

Show Label Specific Icons Below Post Titles

3 comments
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 tips you can show these icons:
Music icon Stats icon 
Instructions to implement this hack in to 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-->
<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 music icon displayed above, replace that text in green with this code:


http://files.softicons.com/download/application-icons/oropax-icon-set-by-878952/png/512/Music.png

Finally save the template.


If you feel this is helpful or you like it, Please share this using share buttons available on page.

3 comments :