How to Add Floating Social Media Icons to Blogger

Today we will learn how to add floating social media connect icons to Blogger. The button icons are said to be connect as it will only let your blog readers to connect or subscribe with your blog, as well as you, through social media sites. It's mainly found floating right or left and outside of your blog.

In this tutorial, the social sites that I have included are Facebook, Twitter, Delicious with RSS and Email icon buttons and of-course, you can see them floating. So let's go through the tutorial.

Demo

1. Go to Blogger's Design > Edit HTML tab.

2. Find the closing </body> and before it add the following snippets:

<!-- art4forevr.blogspot.com--><div class="flt-wdt"><!-- Facebook --><a href="http://www.facebook.com/Page id" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="http://your-image.png" /></a><!-- Twitter --><a href="http://twitter.com/Your profile" title="Follow me on Twitter" target="_blank"><img alt="Follow me on Twitter" src="http://your-image.png" /></a><!-- RSS --><a href="http://feeds.feedburner.com/feed-address" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="http://your-image.png" /></a><!-- Email --><a href="http://your blog.blogspot.com/p/Contact page" title="Email me" target="_blank"><img alt="Email me" src="http://your-image.png" /></a><!-- Example/Delete --><a href="Any Social Site" title="Give it a title"><img alt="Give it a title" src="your image.png" /></a></div><!-- End -->

If there are any JavaScript added before the closing body, then add the above codes before the scripts. Below is an example:

Click to enlarge

Now all you have to do is to change the codes marked bold. For example, change the "page id" or the "profile id" to yours. Also upload your own icons, get the direct links and replace "your image.png" with the icons respective to their sites.

If you need to add more floating icons of your favorite social sites, then the format is given within the above codes as "Example/Delete". If you don't need it, then delete these snippets.

3. Find ]]></b:skin> and before it add the following CSS part:

.flt-wdt{position:fixed;right:10px;top:40%;}.flt-wdt img{float:right;clear:right;margin:5px;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}.flt-wdt img:hover{-moz-transform: scale(1.2) rotate(6deg);-webkit-transform: scale(1.2) rotate(6deg);-o-transform: scale(1.2) rotate(6deg);-ms-transform: scale(1.2) rotate(6deg);transform: scale(1.2) rotate(6deg);}

The full widget will be seen in right. Changing every "right" marked in bold in step 3, to "left" will make the widget to float to left. If you need to reset the position of it from the top, then increase or decrease "40%" or leave as it is.

4. At last save your template.

Now you have floating social media buttons for your Blogger blogs