How To Add Sliding RSS Feed Badge To Your Blog/Site
Yesterday I wrote a tutorial on how to add Twitter sliding badge to your blog. One of our readers Sourish Nath asked me to write a similar tutorial with which we can RSS Feed badge which should be sliding. Well there are some plugins available but why to install plugins when we can do this job manually.
So, here is a post on Sourish’s request on how to add sliding badge for RSS Feeds. This post is for 2 blogging platforms
WordPress
1. First open your WordPress dashboard and under the appearance tab click on Editor.
2. Here, select style.css file and paste this code anywhere you want.
#subscribe{position:fixed;top:40%;left:0;}
#subscribe a{width:30px;display:block;background:url(‘http://i43.tinypic.com/33nys78.p’) no-repeat 0 0;}
#subscribe a.subscribe{height:165px;}
#subscribe a:hover.subscribe{background-position:-30px 0;}
3. Now open footer.php file and paste this code above </body> tag
<div id=”subscribe”>
<a href=”YOUR-LINK-HERE” class=”subscribe”></a>
</div>
4. And Save your work. Now open your template and the Subscribe badge will appear in the left hand side of your template and will look like this :
You can set the size of the image by using any image editor.
Blogger (Blogspot)
Open Blogger and then go to Layout and click on Edit HTML. Here put a tick on Expand Widget Templates and search for </body> tag and paste this code above </body> tag
<div id=”subscribe”>
<a href=”YOUR-LINK-HERE” class=”subscribe”></a>
</div>
Now save your template and you’re done 
If you are facing any problem in using this badge, you can use the comment box and I’ll try to answer your questions as soon as possible.
Troubleshoot
If you are facing any kind of problem in applying the codes, you can download the codes below and then paste it in your blog. It’s a recommended method.
Download the CSS Code Here | Download the Footer code here
Ask Us About Any Tech Related Problem !
Related Posts via Categories
- Adsense Earnings based on Buying Keywords
- 20+ Codes and Hacks Every WordPress User Should Know
- Use Google Related Links To Display Related Articles In Your Blog
- How To Add Gravatar Beside Post Title In Blogger : Tutorial
- How to Create Author.php Page For Your WordPress Blog
- How To Show Next and Previous Post Below Comment Box
- Understanding Different Types Of Hosting
- Moving to Custom Domain in Blogger
- Wblogger The Best Offline Blogging Client
- Welcome To HTML Tutorials : Introduction : Lesson 1
Would you please see my templates and say me what should i know more. I am trying to make simple. Am from Bangladesh. Internet speed is very low. So I try to do in the simplest way. Please check and comment at
BBT Templates
Thank you ! i will try it out on my blog today .
You’re welcome Sourish
Thank you Gagan , well im new into blogging , and ur site is very informative.My friend Debajyoti[Snaphow.com] is already in ur blogroll , and that is how i got inspired to start my own blog.
I’ll be commenting here regularly , if you dont mind
regards ,
Sourish
I tried but its not working ??
Oh sorry Sourish, the code I wrote was incorrect, the image link was not proper, I’ve fixed it. Apply the code now and do reply with your comment
A very detailed post, very well explained. Maybe I will add this to my site. Getting subscribers is important for any site. Thanks for sharing this info
Hi gagan , i have tried it and still not working , nothing is appearing anywhere . Im on wordpress 2.8
I am sorry for the inconvenience, the code is not working because of the quotes. I have written the codes in a txt file and given the link in my post at the last. Give it a try and I am sure the code wil work this time.
Yah working now on my blog http://www.OneTrickADay.com
Wow that is cool but not sure it would look extremely good.Thanks
Ermm Didn’t like the position of it. But your tweet button is at perfect position. I might consider that in my blog.
@ Aditya
You can easily change the position, by tweaking the CSS code
it will not working on blogger unless if you’ll chnge all of the double qoutes(“) to single qoutes (‘). =]
I am having some issue in pasting the code, so I have written the code in a txt file and have uploaded it…
i want add at bottom of page… then what the i get it….
Download and pasted this code in a million different places but can’t make it work. Any suggestions?
Hi, I used the code from the text file, pasted it in the correct locations but its till doesn’t work. Any suggestions?
yay! thanks for this. I used it on my site today and it looks wicked! check it out! http://www.hd-fractals.com many many thanks.