How to Add Floating Social Media Icons to Blogger

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 with your blog, as well as you, through
social media sites, so do not misunderstand this with bookmarking icons.

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.

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

2. Find the closing </body> and before it add the following snippets:
<blockquote><!-- SimpleBloggerTutorials.com -->
<div class="flt-wdt">
<a href="https://www.facebook.com/Page id" title="Join me on Facebook"><img alt="Join me on Facebook" src="your image.png" /></a>

<a href="http://twitter.com/Your profile" title="Follow me on Twitter"><img alt="Follow me on Twitter" src=""your image.png" /></a>

<a href="http://www.delicious.com/Profile" title="Find me on Delicious"><img alt="Find me on Delicious" src=""your image.png" /></a>

<a href="http://feeds.feedburner.com/feed-address" title="Subscribe to RSS"><img alt="Subscribe to RSS" src=""your image.png" /></a>

<a href="http://your blog.blogspot.com/p/Contact page" title="Email me"><img alt="Email me" src="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 --></blockquote>If there are any JavaScripts 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 favourite 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:
<blockquote>.flt-wdt{
position:fixed;
margin-right:10px;
right:0;
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) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1.2) rotate(6deg);
}</blockquote>The whole 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.