Floating Subscribe Buttons To Blogger/Blogspot Blogs

Recently, one of my readers asked for a widget that will display the subscribe icons fixed on his blog, that is, he wanted to display the subscribe icons static as the page is scrolled to the top or to the bottom. It's pretty simple to add this widget on your blogger or blogspot blog. Just have a look at the final preview of the widget for better understanding.
I hope you are excited about the widget. Create a back up of your template before you modify your template. To do this, navigate to "Design->Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top. Once the back up is over, follow these steps carefully.

1. Search for the following of code in your template. Use "CTRL+F" to fasten your search results. 
<div id='main-wrapper'>
2. Paste the following piece of code just below the line you searched in step 1.
<div style='position: fixed; bottom: 1%; left: 1%;'>
<table border="0"><tr><td>
<a href="http://feeds.feedburner.com/YOURFEEDNAME" target="_blank"><img alt="Rss Feed Options" border="0" src="http://lh6.ggpht.com/_So-xppeH7x0/TQry4q9ls8I/AAAAAAAAAoQ/RJufyB1rm3M/s800/RSS%20Tab.gif" /></a>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=YOURFEEDNAME&loc=en_us' target="_blank"><img alt="Subscribe Via Email Rss" border="0" src="http://lh6.ggpht.com/_So-xppeH7x0/TQry4ixB3kI/AAAAAAAAAoI/2KHpF8rasM8/s800/Email%20RSS%20Tab.gif" /></a>
<a href='YOUR FACEBOOK PROFILE URL' target="_blank"><img alt="Find Us On Facebook" border="0" src="http://lh4.ggpht.com/_So-xppeH7x0/TQry4tMjsEI/AAAAAAAAAoM/4qZB_rMPHqA/s800/Facebook%20Fan%20Tab.gif" /></a>
<a href='http://twitter.com/YOUR TWITTER USERNAME' target="_blank"><img alt="Follow Us On Twitter" border="0" src="http://lh6.ggpht.com/_So-xppeH7x0/TQry4gG96VI/AAAAAAAAAoU/Rm2eoCkzieI/s800/Twitter%20Follow%20Tab.gif" /></a>
Note: You may add the above code as "Page Element" too. Just navigate to "Design->Page Elements->Add A Gadget" from blogger dashboard and choose "HTML/JavaScript" and paste the code in the window that appears and save it.
3. That's it!!! Save your template!!!


Once you add the above code, you need to make the first four changes in the code (those highlighted in green). First, change the text "YOURFEEDNAME" to the feed name of your blog. You can find this when you login to your FeedBurner Account. Next, replace "YOUR FACEBOOK PROFILE URL" with the URL of your Facebook fan page. Last but not the least, replace "YOUR TWITTER USERNAME" with the user name of your twitter profile. Make sure you save these changes!!!

I hope you like this widget. You may express your views about this widget and if you need some widget of your choice, please do post them via comments and I will try to figure out the code for them. We always love to hear from you!!!

Enjoyed the article?
Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

    Other Recommended Posts

  • Blogger Tutorials, Blogger Widgets
Sahil @iBlognet said on December 17, 2010 at 2:18 PM :

Thanks for sharing your blog widget...
Can you show a demo of the widget!!!

The widget is in 2x2 table. Is it possible to make it 1x4, just like a stack???

Mukund said on December 17, 2010 at 4:01 PM :

@Sahil @iBlognet: Yes!! It is possible to make them as a stack. Contact me via email and I will send you the code via mail!!!

Maritime Jones Act said on December 18, 2010 at 12:45 PM :

I appreciate the articles you were sharing. I was doing another blog in Blogger and I really need this information. Thanks!

Mukund said on December 18, 2010 at 4:01 PM :

@Maritime Jones Act: I hope the articles really help your new blog!!!

Abdur Rakib said on January 18, 2012 at 9:44 PM :

Thank you man!


Use the tab below to comment. No spam please!!!