Add Floating Social Icons With Rotate Effect

Sharing your blog is very important.After you have shared your blog you can rest assure that your blog is at least known if not popular.Bloggers take interest in social activities.Hence web developers are always on the run making new widgets , share buttons that help the authors in promoting their sites online.

Demo

How To add This Widget To Blogger :-

• Go to Blogger Dashboard > Layout > Add HTML/Javascript.
• Paste Below Code into the Html/Javascript box.

<style>

.computer-zone

{

position:fixed;

right:10px;

top:10% ;

}

.computer-zone img

{

float:right; clear:right; margin:1px;

-webkit-transition: all .0s ease-in-out;

-moz-transition: all .2s ease-in-out;

-o-transition: all .2s ease-in-out;

transition: all .2s ease-in-out;

}

.computer-zone img:hover

{

-moz-transform: scale(1.2) rotate(40deg);

-webkit-transform: scale(1.2) rotate(40deg);

 -o-transform: scale(1.2) rotate(40deg);

-ms-transform: scale(1.2) rotate(40deg);

transform: scale(1.2) rotate(40deg);

 }

</style>

<div class="computer-zone">

<a href="https://www.facebook.com/pages/Computer-Zone/207443462672949" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="http://png-3.findicons.com/files/icons/2230/social_sticker/64/facebook.png" /></a>

<a href="http://twitter.com/computerzone95" title="Follow me on Twitter" target="_blank"><img alt="Follow me on Twitter" src="http://png-4.findicons.com/files/icons/942/hand_drawn_social_media/64/twitter.png" /></a>

<a href="https://plus.google.com/100112315864319722975" title="Follow me on Google Plus" target="_blank"><img alt="Follow me on Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC0DUAokoS7ZpOzm6lrYfJGlqKr2oMc2IhwhhCFuKVMhQe_TCb3Emm0OP9xvoIeTfS3ZH6ibeP2aDurGp-eWLN1oMJQxFCwA3vgn-hAG42IH5X7g0ymYEnH8Rmtbj4DejFZLpW9HQBVUAQ/h120/untitled+copy.png" /></a>

<a href="http://feeds.feedburner.com/computerzone/zvfzc" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="http://png-2.findicons.com/files/icons/1680/supra_rss_icons/64/rss2_3_13.png" /></a>

<a href="mailto:computerzone@consultant.com" title="Email me" target="_blank"><img alt="Email me" src="http://png-5.findicons.com/files/icons/566/isimple_system/64/mail.png" /></a>

</div>

<!-- End -->

Note:- Replace Yellow color link with your facebook.
            Green color link with your twitter.
            Blue color link with your google plus.
            Red color with your feed ID.
            Orange color with your email ID.

• After Replacing Links. Click on Save and See your Result.