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 -
- Go to Blogger Dashboard ? Design ? Page Layout
- Then Choose Add A Gadget ? HTML/JavaScript.
- 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/AVvXsEiUEixQDYP3oXOU8fFYP0UEiZciKhHgOylUF18fonKBOGOvPWJU_rfliFFip7jDynOazHZDnZWr4hoKRPClliUC9YuffLDxhqE2hEJuR9T0Dpgspdif5ZANo_SDVUf7icxjjE3-mZxgYns/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/AVvXsEj4oAxdNoT8-365eP2fAsIAfAs40ymkNR5gkkk4vhnZePpj0E_EP4lq9NSo4MF0zzeKUZ98tHEnxYqAvndYOnz7T-qQFq3sEjoLePZYMKNZFhgSgCYfRmf-55BsArKTaS4ommiJMJ3WpgY/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/AVvXsEjL4hPsTP1Nb6xC9_3mgIFOG5BlcoD0nw64tDdrS5aX1fSesElVfFV4ZlyZcO7lentMNnd-LiEGvELYq_sAKP1DpjOd7C_Be2tIDaTDTZXAiwcxtW-OieBAxMAMaRLfeWDmeiu4bhO9IdA/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/AVvXsEixE1dOnj9NzKH-Mj6afM2uiVGu1SkZUR5SjDl3hq1Y1_kwasNK7RM67qU_m8dCrBpla1l2ce4bsJiAsELl5X5ubzutXm6pAhn6LqFAdNiLSti_RzaeNxEtXpuo4x1UrW3G1F7Kk992xV0/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/AVvXsEiUEixQDYP3oXOU8fFYP0UEiZciKhHgOylUF18fonKBOGOvPWJU_rfliFFip7jDynOazHZDnZWr4hoKRPClliUC9YuffLDxhqE2hEJuR9T0Dpgspdif5ZANo_SDVUf7icxjjE3-mZxgYns/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/AVvXsEj4oAxdNoT8-365eP2fAsIAfAs40ymkNR5gkkk4vhnZePpj0E_EP4lq9NSo4MF0zzeKUZ98tHEnxYqAvndYOnz7T-qQFq3sEjoLePZYMKNZFhgSgCYfRmf-55BsArKTaS4ommiJMJ3WpgY/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/AVvXsEjL4hPsTP1Nb6xC9_3mgIFOG5BlcoD0nw64tDdrS5aX1fSesElVfFV4ZlyZcO7lentMNnd-LiEGvELYq_sAKP1DpjOd7C_Be2tIDaTDTZXAiwcxtW-OieBAxMAMaRLfeWDmeiu4bhO9IdA/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/AVvXsEixE1dOnj9NzKH-Mj6afM2uiVGu1SkZUR5SjDl3hq1Y1_kwasNK7RM67qU_m8dCrBpla1l2ce4bsJiAsELl5X5ubzutXm6pAhn6LqFAdNiLSti_RzaeNxEtXpuo4x1UrW3G1F7Kk992xV0/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