Add A Feed Icon Beside Your Labels And Give Every Category It's Own Feed




| 9 comments

Recently we have been talking a lot about Rss Feeds, Email feeds and Feedburner.In this post we will stay on that subject, the trick i cover in this post has a few purposes but the main purpose is to give readers of your blog the option to subscribe to a category you write on as well as subscribing to your entire blog.Every label on your blog has its own feed by default but there is no easy way for people to access it.Once you have made this change every label in you labels list will have a feed icon beside it.

You can see the effect used in my labels in the sidebar, i have titled my labels list 'Recommended Categories'.If you click any of the icons you will go to the feed page for that category and will have the option to subscribe to all posts i write using that label.

As well as giving the option to subscribe to a single category, i think the icons look great and enhance the appearance of your label list.To that end i will show you how to change the feed icon image from the one i use and i will give you some samples.

Here is a screenshot of the result :



every label has feed blog


This tutorial involves replacing a section of code and although it's only a small section make sure your template is backed up in case you go wrong, click the 'Extra Help' link at the top of the post to see how.


Adding the icons

Step 1. In your dashboard click 'Layout' ► 'Edit Html' ► Tick the 'Expand Widget Templates' box


Blogger layout

edit html blogger

Expand widget templates blogger



Step 2. You now have to find a small section of code in your blogs html.
Dont worry i will walk you through the process.

Here is the section we will be replacing :


<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>


The best way to find the section is to find the first line of the code shown below :
(Note: Click CTRL and F for a search bar to find the code - For more info on this click the 'Extra Help' link at the top of the post)

<b:loop values='data:labels' var='label'>

Now from the first line you can scan down to locate the entire section.

The section starts with - <b:loop.....
And ends with - </b:loop>


<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>


Step 3. Now you replace the section of code with the code below :


<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:label.name'><img alt='Subscribe To Label' src='http://i941.photobucket.com/albums/ad259/spiceupyourblog/rss-feed-16.png' style='vertical-align:middle;border:0'/></a>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>


Once you have replaced the code save your template and your feed icons have been added.

Change The Image

InfoRemember you can get all these tips sent directly to your email and stay a step ahead.Its a quick and easy service Provided for Free by Google.Just fill in the Email form below the post.
If you need extra help on this or any tutorial just leave a comment, I love comments and feedback so this Blog is Do-Follow - when you comment here it helps Your Blogs Google rank !


You will notice part of the code above is in Bold, that is the URL of the Feed icon being used which is this :

label feed blogger

I have a few different images you could use instead, to use one of the images below just replace the URL in bold with the URL provided below.


label feed blogger
http://i941.photobucket.com/albums/ad259/spiceupyourblog/rss-1.jpg

label feed blogger
http://i941.photobucket.com/albums/ad259/spiceupyourblog/red-feed-16.png

label feed blogger
http://i941.photobucket.com/albums/ad259/spiceupyourblog/16-1.png

For more help with Feeds and using them to improve your blog Click Here.

Thats it have you added the Icons ?


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

9 comments:

  1. Another great idea to have feed for every tag on my blog.You make it easy here thank you.

    ReplyDelete
  2. Thank you i use this method on my blog..after this my blog looks so beautiful thanks...

    ReplyDelete
  3. Hi,

    How about i have different labels and i want to add different icon how i'm going to do that?

    Regards,
    Onin

    ReplyDelete
  4. Hello! I have added this and the images for feed show up perfectly, however when I click on the feed icon for each label, a big list of stange words and nonsesnse comes up on the page instead of a feed subscription (which i assume is what should come up?) Please could you help with this? My website is www.Thespanishsail.com and I am very confused! Thanks! :)

    ReplyDelete
  5. @ Vanessa - I took a look at your blog and see the labels in the footer with the feed icon.As far as i can see it is working fine ?

    ReplyDelete
  6. Hi Paul! I think i've figured out the problem I have! When I look at this through my firefox browser everything seems to work perfectly, however when I use my chrome browser this is when I get the page of text. Do you know how I could solve this? I really appreciate you taking the time to help me with this! Sorry for being a pain :)

    ReplyDelete
  7. I tried to do this on my blog but it didn't work but thanks anyway...

    ReplyDelete
  8. wow..nice posting brother..
    I still learn about blogging in Blogger and found your blog is awesome... :)

    ReplyDelete
  9. Great tips for the RSS feed, i am help from this blog..Thank you

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us