Add Floating Subscribe Buttons To Blogger Blog

One of Blogs Daddy reader asked for a floating widget that will display the subscribe buttons fixed as the page is scrolled to the top or to the bottom on his blogspot blog. So, I am going to share this simple tutorial to do this. It's very easy to add this widget on your blogger blog. I know you are excited about the widget.

Create a back up of your blog template before you edit it. To do this, navigate to "Dashboard->Template>Backup/Restore" and make a backup of your template by clicking on the "Download full template" link at the top. Now, follow these steps carefully. First of all see screenshot below for this widget. You can get our previous widgets here.

• Recommend For You - New Floating Bar With Pinterest & Other Sharing Buttons

How To Add Floating Subscribe Buttons To Blogger Blog

Step# 1 Go To Blogger Dashboard >> Template >> Edit HTML

Step# 2 Search for the following of code in your template.

<div id='main-wrapper'>

Step# 3 Paste the following piece of code just below the line you searched in step 2.

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzr8keXV2TuyuIKiT-v8WjowBX4mnV99DS5iY-3DYjzJWDgXA4ei9tWusk0dypPYwuTkZVkWky36I2fb1bDcMg6lt1zHarT3EQpt2q1JsqnRtpBCvoJ5zQqW0UxPOsuPyAwoG0A8IQqbY/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2E1DdRRtheoKxxaO_7djL-GdvwyTkTEKi3jOQ9R189bnh2GemMpaQUn-XB6taKxKHZUNeESHi2d8hmbe61xqWtw1197eYCI5OjScO7wgJkUd8jjkOtrBJxtXoBzyqp_gM_kLNjaIG33w/s800/Email%20RSS%20Tab.gif" /></a>

</td></tr><tr><td>

<a href='YOUR FACEBOOK PAGE URL' target="_blank"><img alt="Find Us On Facebook" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJRKC2PE_04jsVqwppvukswuaivtYbIisFwoenJFH5Fh5GxWXIihwhKlZNwZb4gMWhpYjX4MLiS5E58IJeuG9QEPO1WlqBbpGhQOt_AyVJT5JHViRy462jMjovqguIDBRR9zZdhCeIFa8/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYUELOA92402d44xc6MJAHyCyMI5qDM1URRouxxqU_KhLWnMwQ9Wn_sJMpmzbSAK1B6612V0GI5V2Rv6dm4FFnwVDWJ_WM-6OINeuleqzejE4NLXMbw8I3F71WePoB_WRaQp1D6oKf2BA/s800/Twitter%20Follow%20Tab.gif" /></a>

</td></tr></table>

</div>

Remember Note: You may add the above code as "Page Element" too. Just navigate to "Blogger Dashboard >> Layout >> Add Gadget" from blogger dashboard and choose "HTML/JavaScript" and paste the code in the window that appears and save it.

Step# 4. 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 yellow). First, change the text "YOURFEEDNAME" to your feed URL. Replace "YOUR FACEBOOK PAGE URL" with your FB fan page URL. And replace "YOUR TWITTER USERNAME" with the user name of your twitter profile. It's done!!!

You May Like To Read:

• Slide Out Floating Sharing Buttons For Blogger Blog
• Floating Social Media Share Buttons On Blogger Side

I hope you like this short tutorial. 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!!! Stay Blessed :)

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.