Home » Blogger Tutorials, Tricks and Hacks » Social Widget With Cool Hover Effect

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Social Widget With Cool Hover Effect

Social Widget With Cool Hover Effect

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error


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
.btsnts-flt-wdt img{
-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);
<!-- btsnts.blogspot.com -->
<!-- Facebook -->
<a href="http://www.facebook.com/FBusernameURL" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="http://3.bp.blogspot.com/-zl6GiZgl17w/TzNgd4y2VKI/AAAAAAAAAwQ/yl5f0NXI_Ng/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="http://twitter.com/twitterusername" title="" target="_blank"><img alt="Follow me on Twitter" src="http://1.bp.blogspot.com/-oZXlXaVZ0NQ/TzNgee09cVI/AAAAAAAAAwY/UVUjQ9LlLuk/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>
 <!-- End -->

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


Liked It ? Please Share

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here