June 20, 2008

Adding RSS feed/icon tutorial in Blogger, Blogspot

So you want to add an RSS feed and your own awesome icon to your Blogger blog? Here's how I did it, in case you were wondering:

Step1
Log into your Blogger.com account. This will take you to your Blogger Dashboard, which is a list of all of your blogs on the site along with controls for customizing them.

Step
2
Select "Layout" for your desired blog. The "Layout" tab will be displayed, providing a graphical representation of your blog, including the area where blog posts appear and areas where you can add customized elements.

Step
3
Click on "Add a Page Element." Another window will open with a list of elements that you can add to your blog. Select "HTML/Javascript" by clicking the "Add to Blog" button located beneath it. Additionally, you could use the "Feed" option but that'll be another topic.

Step
4
On the editor that pops out, fill up the title, and for the content, click "Edit HTML" and add this three lines to the text area:
taken from http://www.mohdshakir.net/2007/12/13/adding-rss-atom-feed-icon-to-blogger-blogspot
You can change http://yourblog.blogspot.com/rss.xml to http://yourblog.blogspot.com/atom.xml, whichever that you prefer, and then http://www.any-website.com/rss-icon.jpg is a URL to (the FUN part) any RSS icon in the net that you prefer (or upload your own).
Note, if you're using blogger and find that didn't quite work out, try this (for RSS only): http://yourblog.blogspot.com/feeds/posts/default?alt=rss
Additionally, you could just sign up at feedburner, and set up your RSS url there, and in turn replace the link with your feedburner link. e.g. http://feeds.feedburner.com/youraccountname
instead of
http://yourblog.blogspot.com/rss.xml or http://yourblog.blogspot.com/feeds/posts/default?alt=rss

Step
6
Save your changes. This will lead you back to your Page Elements page. Make your selections, review how the feed will look on your blog, and select "Save" on that page when satisfied.

Step7
Click "Preview" to see how your new feed appears. Voila!
Here are some useful resources that helped me sort my problems:
http://help.blogger.com/bin/answer.py?hl=en&answer=42662
http://groups.google.com/group/blogger-help-howdoi/browse_thread/thread/23b3923b115bd286
http://www.mohdshakir.net/2007/12/13/adding-rss-atom-feed-icon-to-blogger-blogspot
http://help.blogger.com/bin/answer.py?answer=42663&useful=0&show_useful=1&comment=3:%20&

I hope it was clear enough. The steps above may not be accurate as I didn't go through it again. If there were typos or errors, kindly inform me and I'll edit it and give you credit. So, use it as a reference. Take note that there's always other ways to do it like for example using Blogger's feature by adding the "Feed" page element. However, that doesn't give you the privilege to add your killer rss icon. Obviously, you could always google to find out how. Hordes of results on this, I tell you. And I'm sure you know that. ^^;
If you need help, do not hesitate to ask. Either leave a comment or drop me a bomb and hope that I get struck by it. ^^;

2 comments:

z-vet said...

Thanks, this is a useful tip.

Markie Milan said...

Glad it helped ;)