Awesome Floating Social Subscribing Widget With Cool Hover Effect For Blogger

Introducing awesome floating social subscribing widget with cool hover effect.It attracts your visitors because of its cool hover effect.In results it may increase your number followers on social network.On mouse hover effect it expands and rotates a little.This hover effect makes this widget very cool.The icons are used from iconarchive.com and I take a preference from simplebloggertutorials.Now lets see how to add this awesome widget to blogger.You can  add this widget in two ways.

• 1st Way - Adding it as HTML/JavaScript widget.
• 2nd Way - Adding it in your template.

View Demo 

1st Way - Adding it as HTML/JavaScript widget

If you want to add this widget as HTML/JavaScript widget then follow my steps -

1. Go to Blogger Dashboard  ►  Design  ►  Page Layout
2. Then Choose Add A Gadget  ►  HTML/JavaScript.
3. Paste code and save it.

<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 class="btsnts-flt-wdt">
<!-- Facebook -->
<a href="http://www.facebook.com/btsnts" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj71JjXPTPZOOMrjzR__lTBJf75h_jBg4RBqJ8JgTPnjZoEmPn_nY7uMSXg8avJxXAWGlVTn4XZUwbS5K-0VWpcRSe330XS467DqmIeSBXbDWYdez-3xlZME1y_9fsn8nCjGFi7nfqUDkA/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="http://twitter.com/rahulippar" title="" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtxeC_4A2ibRcElEqpj2ty_ldECRuNGBf3uND-cxAJ53oJLI9cNIyIdpg63RDcRz3cCTv2ZFI1kp2JtS8u4ZcSqrYld4NeF2_9oiHhzUvplKJebb-MF2Jo3SMKhvUScnz7d0QgLZYW0ok/s1600/twitter2.png" /></a>
<!-- RSS -->
<a href="http://feeds.feedburner.com/btsnts" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNVowpmmaBHRujMi4CCMa06UsHgKNdGC_SHrcPlBawZJ2RGBmSl7kXF2SicpsngwnUMDuBu9E8kltXJqtEB7f6bty5U-2jeW8HeQ3t0Y0SPNd1HxoOU16FaJwwn6AR1yNaqdxnT5EMjn4/s1600/Rss.png" /></a>
<!-- Email -->
<a href="Your Contact Page URL" title="Email me" target="_blank"><img alt="Email me" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_DutuZoTTmGdPvKM2fcPK0RLXOdzdTsj93CFi6idMqsFa6BmFaCygrjKUhvXWNdSBneEZKPRXnmDu_sFqXbYNfjE5EFCx0lu5PUZdCJa927uXYLL_jgNhWnaMN_kA07gR2NRpzVJ-TNg/s1600/Mail.png" /></a>
</div>
<!-- End -->

Some Changes

• Now replace http://www.facebook.com/btsnts  with your facebook page url.
• Now replace http://twitter.com/rahulippar  with your twitter page url.
• Now replace http://feeds.feedburner.com/btsnts  with your feed address.
• Now replace Your Contact Page URL  with your contact page url.

___________________________________________________________________________

2nd Way - Adding It In Template

If you want to add this widget in your template then just follow these simple steps -

• Go to Blogger Dashboard  ►  Design  ►  Edit HTML
• Then find ]]></b:skin> and below code just above it.

.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);
}

• Now find </body> tag and paste below code just above it.

<!-- Social Subscribing Widget By btsnts.blogspot.com -->
<div class="btsnts-flt-wdt">
<!-- Facebook -->
<a href="http://www.facebook.com/btsnts" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj71JjXPTPZOOMrjzR__lTBJf75h_jBg4RBqJ8JgTPnjZoEmPn_nY7uMSXg8avJxXAWGlVTn4XZUwbS5K-0VWpcRSe330XS467DqmIeSBXbDWYdez-3xlZME1y_9fsn8nCjGFi7nfqUDkA/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="http://twitter.com/rahulippar" title="" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtxeC_4A2ibRcElEqpj2ty_ldECRuNGBf3uND-cxAJ53oJLI9cNIyIdpg63RDcRz3cCTv2ZFI1kp2JtS8u4ZcSqrYld4NeF2_9oiHhzUvplKJebb-MF2Jo3SMKhvUScnz7d0QgLZYW0ok/s1600/twitter2.png" /></a>
<!-- RSS -->
<a href="http://feeds.feedburner.com/btsnts" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNVowpmmaBHRujMi4CCMa06UsHgKNdGC_SHrcPlBawZJ2RGBmSl7kXF2SicpsngwnUMDuBu9E8kltXJqtEB7f6bty5U-2jeW8HeQ3t0Y0SPNd1HxoOU16FaJwwn6AR1yNaqdxnT5EMjn4/s1600/Rss.png" /></a>
<!-- Email -->
<a href="Your Contact Page URL" title="Email me" target="_blank"><img alt="Email me" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_DutuZoTTmGdPvKM2fcPK0RLXOdzdTsj93CFi6idMqsFa6BmFaCygrjKUhvXWNdSBneEZKPRXnmDu_sFqXbYNfjE5EFCx0lu5PUZdCJa927uXYLL_jgNhWnaMN_kA07gR2NRpzVJ-TNg/s1600/Mail.png" /></a>
</div>
<!-- End -->

Make These Changes

• Now replace http://www.facebook.com/btsnts  with your facebook page url.
• Now replace http://twitter.com/rahulippar  with your twitter page url.
• Now replace http://feeds.feedburner.com/btsnts  with your feed address.
• Now replace Your Contact Page URL  with your contact page url.