Add cool floating social icons to your blog

Add This To Del.icio.us Share on Facebook StumbleUpon This Add to Technorati Digg This

Having a floating social media icon in your website lets the users connect with your profile thus the more you connect the more the visitors to your blog

1.Open www.blogger.com

2.Go to Design and choose edit HTML option

3.Backup your template by downloading it and then find code </body>

4.Copy and paste the below code before </body> 

<!--http://www.v7b7.blogspot.com/--> <div class="float-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 -->

Now you have to change the "page id" to your own id name and also upload your icons to blogger and copy and paste the direct link instead of "your image.png"

  5.Find ]]></b:skin> in template coding and add the below css coding before  it

.float-wdt{ position:fixed; margin-right:10px; left:0; top:40%; } .float-wdt img{ float:left; clear:left; 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; } .float-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); }

Adding floating bookmarking icons to the right of your website:

If you want to add it to the right of your website or blog just change left to right in the above css coding.

6.Then click on save template

Its all done

For Further Reading,

About the Author

Aman, the founder of Tech Lab. He's a freelance writer on topics related to Website Optimization (SEO), blogger customizations and making money online. He's blogging since 2008 and He's currently a guest blogger on Blogging With Success.
Follow Me On Twitter or On Facebook