3D FOLLOW ME BUTTON WIDGET FOR BLOGGER

Pure Css Buttons For blogger with Effects like Floating, Hover, Black and White to Coloured. This Buttons Include Facebook Fanpage Link,Twitter Follow me Link , Rss Feed Post link and Google+ Profile link. This buttons will float on the right side of webpage and on hover the uncoloured buttons will transform into a 3D coloured button.This are made by Lokjeeth Singh and the icons are taken from Devainart.com.

View Demo

FOLLOW THE BELOW STEPS:

• Login to Dashboard.
• Go to Layout--->Add a Gadget.
• Choose for Html/Javascript.
• Copy and Paste the below code there.

<style>.blogtoolz-flt-wdt{position:fixed;right:10px;top:36% ;}.blogtoolz-flt-wdt 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;}.blogtoolz-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); }</style><div class="blogtoolz-flt-wdt">
<style>.BlogToolz1 { display: block; width: 64px; height: 64px; background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/facebook_rollout_64x64.png') bottom; text-indent: -99999px;}.BlogToolz1:hover {        background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/facebook_color_64x64.png') bottom;height: 64px;}</style><a class="BlogToolz1" href="Your Facebook Link Here"></a>


<style>.BlogToolz2 { display: block; width: 64px; height: 64px; background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/twitterl_rollout_64x64.png') bottom; text-indent: -99999px;}.BlogToolz2:hover {        background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/twitter_color_64x64.png') bottom;height: 64px;}</style><a class="BlogToolz2" href="Your Twitter Link Here"></a>


<style>.BlogToolz3 { display: block; width: 64px; height: 64px; background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/feed_rollout_64x64.png') bottom; text-indent: -99999px;}.BlogToolz3:hover {        background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/feed_color_64x64.png') bottom;height: 64px;}</style><a class="BlogToolz3" href="Your Rss Feed Link Here"></a>


<style>.BlogToolz4 { display: block; width: 64px; height: 64px; background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/google_rollout_64x64.png') bottom; text-indent: -99999px;}.BlogToolz4:hover {        background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/google_color_64x64.png') bottom;height: 64px;}</style><a class="BlogToolz4" href="Your Google Plus Link Here"></a>
</div><!-- End -->

• Now, Click On Save.

It's Done.