Attractive Floating Social Media Icons to Blogger




In this tutorial, the social sites that I have included are Facebook, Twitter, Delicious


1. Go to Blogger's Design > Edit HTML tab.
2. Find the closing </body> and before it add the following snippets:
<!-- All-Blogger-Tools.Blogspot.com --><div class="flt-wdt"><a href="http://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 -->

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. 




Now 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 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. 

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | coupon codes