Add A 3D “Follow Me” Button With Hover Effect

Here’s a beautifully designed set of “Follow Me” buttons from a young blogger named Aditya Thakker from India. The design is that of an animated three dimensional square that rises or extends upward and changes from gray to colored once you hover your mouse cursor over it.
You can check it out in action in Thakker’s demo page, you’ll see it floating on the right side of the page. Just follow the set of instructions below:

• In your Blogger dashboard, head over to the “Layout” section and click on “Add a Gadget”
• Choose HTML/JavaScript on the list of gadgets
• Copy/paste the code below:

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

<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 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 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 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 href="Your Google Plus Link Here"></a>

</div>
<!-- End -->

• Save the gadget and that’s it! You’re done.

Enjoy your new “Follow Me” Blogger gadget!