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.




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="http://3.bp.blogspot.com/-zl6GiZgl17w/TzNgd4y2VKI/AAAAAAAAAwQ/yl5f0NXI_Ng/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="http://twitter.com/rahulippar" 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="http://feeds.feedburner.com/btsnts" 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="Your Contact Page URL" 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 -->


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="http://3.bp.blogspot.com/-zl6GiZgl17w/TzNgd4y2VKI/AAAAAAAAAwQ/yl5f0NXI_Ng/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="http://twitter.com/rahulippar" 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="http://feeds.feedburner.com/btsnts" 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="Your Contact Page URL" 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 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.

Post a Comment

  1. Is there a way for this to be fixed to the top as opposed to moving as I scroll down the page? My site is www.thesneakerreserve.com. Thank you. Great gadget by the way!

    ReplyDelete

  2. Java is programming language which is used in almost all the applications and games which are on the web. Java is being used extensively and it will be used extensively in near future. So getting trained in Java will surely be helpful.
    Regards,
    Java course in chennai | Best JAVA Training in Chennai | JAVA Training

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top