Floating Subscribe Buttons To Blogger/Blogspot Blogs

Save on del.icio.us Add to Technorati Digg this article! Add it on Reddit! 5 Comments

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>
</td><td>
<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>
</td></tr><tr><td>
<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>
</td><td>
<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>
</td></tr></table>
</div>

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!!!

CUSTOMIZATION:

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!

What's Next?

Save on del.icio.us
Add to Technorati
Digg this article!
Add it on Reddit!
Leave a comment

Other Recommended Posts

• Blogger Tutorials, Blogger Widgets