Social Widget With Cool Hover Effect

There’s this widget that I’ve noticed have been appearing all over the Blogger community lately, which is a floating social subscribing widget with a cool hover effect. This is inspired by an earlier TUTORIAL from Rahul Ippar, and what happens is that the icons will tilt and also increase in size a little whenever you hover your mouse cursor over it.
So how does one put it on their blog? Just follow the quick and easy-to-follow instructions below.
As with all Blogger gadgets, you start off with the usual steps:

1. On your dashboard, go to ‘Layout’
2. Click on ‘Add a Gadget’
3. Choose ‘HTML/JavaScript’
4. Copy/Paste the code below

<style>

.btsnts-flt-wdt{

position:fixed;

right:10px;

top:30%;

}

.btsnts-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;

}

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

<!-- btsnts.blogspot.com -->

<div>

<!-- Facebook -->

<a href="http://www.facebook.com/FBusernameURL" title="Join me on Facebook" target="_blank"><img alt="Join me on 

Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglg0kivONVY_5pyhj0YAfQUgUWe51UQPJoF4_d5344wQMUp455DXqPz3LNXR3hUPo8qE3a8OrBtKk-4Lo6-F9fP8Oky6DA8Zjs7NAzKvYzzoTkGQlmtWpvUCW4vkRwlfKZLaH6xm7LVQc/s1600/facebook.png" 

/></a>

<!-- Twitter -->

<a href="http://twitter.com/twitterusername" title="" target="_blank"><img alt="Follow me on Twitter" 

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5puDkVAQE2k2MoLLmQu4gwDE4EK7WgwCyoftGsByKadp1jYMrNYegONQpfz25hHRrVALlko50-VtHBrXF2iZBEAiGXuVowSHGMVxDR2Cl5IMFYMLPsVl9gtJUzvt2_3vy8PEhSZht2o0/s1600/twitter2.png" 

/></a>

<!-- RSS -->

<a href=" feedburnerURL " 

title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="http://4.bp.blogspot.com/-

v8adyG27cBs/TzNgdRZJzaI/AAAAAAAAAwM/k3HJWWhY0jY/s1600/Rss.png" /></a>

<!-- Email -->

<a href=" contactpageURL " 

title="Email me" target="_blank"><img alt="Email me" src="http://3.bp.blogspot.com/-

6ZNwVUqx9eo/TzNhk_KXPvI/AAAAAAAAAwk/uxsSpqb3sdI/s1600/Mail.png" /></a>

</div>

 <!-- End -->

Make the necessary changes to the following details which are all highlighted in bold and red font: FBusername, twitterusername, feedburnerURL, and contactpageURL.

Filed Under: Blogspot, Blogspot Tricks, Facebook Tricks, Google Plus Tricks, New Design, Social Sites Tricks, Twitter Tricks, Website Tips, Widgets on Thursday, 12 September 2013