BlogTariff


Webmaster Trying something different to educate their subscribers defenitely attracts visitors/readers. Here,BlogTariff goind to present fantastic "Spinning style Social sharing widget" for adding to blogs. This widget is based on CSS3 such as -moz-transform which converts spinning effect to social sharing buttons. There are three types of Spinning scrips codes provided, whenever a readers moser over on these buttons rotates in the directions like left side, right side, slight round and surprise them with their spinning effect method.
By adding this widget to blogs surely convets readers/visitor to loyal subscriber, let's begin the tutorials.

How to Add "Spinning Style Social Sharing Buttons to Blgoger?

Sign into your blogger account
Click on "Design (Layout in the new blogger interface) Page elements"
Click on "Add a Gadget"
Now copy the below given (Choice code) code and paste in it

Left side Spinning down effect

<style>p#btf_socialicons img {
 /* Spinning Social Icons Widget By BlogTariff */
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

p#btf_socialicons img:hover {
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}

/* Spinning Social Icons Widget By BlogTariff */
</style>



<center><p id="btf_socialicons">
    <a href="http://www.facebook.com/ blogtariffcom/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGkFmY87zuPPBilVZ87l7Qgtg_L9x5JcC15BvQnlHKyExkkHEjgjcwwXHIgZ4lLH74p93YSb3BWzxuDNKCuzq9o17v7WujIN0toRL2RM0V6aJgshAxIwEMh8A25Kr1WEJRf0aB-Ba8ru0/s660/blogtariff.com-facebook.png" /></a>
    <a href="http://www.twitter.com/blogtariff/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix7nxekhhq9F3TRvJ-4DteVncjC9VFkOFnaic8yJWlwLbt0AyaxPQyjsQR_2scXjdffBptKSlUAoZMq2PPWUlHk0fkkJHSMTXXEABQSDF9BmTubEL77-uqZ0BMe2MbOqekpBYjgCDEpO4/s660/blogtariff.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/ 106527290580119996124">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzljUoWWT4ur-4o0x_G_L59uT7yFXT6vrGndQVT1CUQvhlrmaGllq1wglqruGUhcC4cbx4byp6mbsoWVUGPHF45Coeh0tOvzrJ0g768mJKo0ODaJ-EcQV9fNl57gHgrGiV5EQ7D4qXCgM/s660/blogtariff.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/ blogtariff/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi36E3wPCZEHXQSPWNxLQ4AnB602MEtD-peIc3gcfk2kOzQ3uI38acgzOrzjic151cRDTozjCHk5XHfnlvHoWf-Fv0HPIQDn5uG8d3Ozg-SPXKWgNoRFHrmcvxLGYP6N9v5fH_twXH1IiQ/s660/blogtariff.com-rss.png" /></a>
    <a href="http://www.youtube.com/blogtariff/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRm6O_Hp5vaFu35MDJIxYvH9fRrTXbV0DHk_BS1hF6NCVYPXYZlPh1rAjK2LBsyXwHP7sxAGrZbR3hpmTt2E88SFafko-YFOTVXPLXSYoxY-TZtqPclbmmsxopaA2xWYJNY7qcbpeeR_g/s660/blogtariff.com-youtube.png" /></a>
</p></center>
  <div align='right'>
   <span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://www.blogtariff.com/' style='text-decoration: none;' target='_blank'><font color='#000' decoration='none'>[Get this widget]</font></a></span>
  </div>

Right side spinning effect

<style>p#btf_socialicons img {
 /* Spinning Social Icons Widget By BlogTariff */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

p#btf_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

/* Spinning Social Icons Widget By BlogTariff */
</style>



<center><p id="btf_socialicons">
    <a href="http://www.facebook.com/ blogtariffcom/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGkFmY87zuPPBilVZ87l7Qgtg_L9x5JcC15BvQnlHKyExkkHEjgjcwwXHIgZ4lLH74p93YSb3BWzxuDNKCuzq9o17v7WujIN0toRL2RM0V6aJgshAxIwEMh8A25Kr1WEJRf0aB-Ba8ru0/s660/blogtariff.com-facebook.png" /></a>
    <a href="http://www.twitter.com/blogtariff/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix7nxekhhq9F3TRvJ-4DteVncjC9VFkOFnaic8yJWlwLbt0AyaxPQyjsQR_2scXjdffBptKSlUAoZMq2PPWUlHk0fkkJHSMTXXEABQSDF9BmTubEL77-uqZ0BMe2MbOqekpBYjgCDEpO4/s660/blogtariff.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/ 106527290580119996124">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzljUoWWT4ur-4o0x_G_L59uT7yFXT6vrGndQVT1CUQvhlrmaGllq1wglqruGUhcC4cbx4byp6mbsoWVUGPHF45Coeh0tOvzrJ0g768mJKo0ODaJ-EcQV9fNl57gHgrGiV5EQ7D4qXCgM/s660/blogtariff.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/ blogtariff/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi36E3wPCZEHXQSPWNxLQ4AnB602MEtD-peIc3gcfk2kOzQ3uI38acgzOrzjic151cRDTozjCHk5XHfnlvHoWf-Fv0HPIQDn5uG8d3Ozg-SPXKWgNoRFHrmcvxLGYP6N9v5fH_twXH1IiQ/s660/blogtariff.com-rss.png" /></a>
<a href="http://www.blogtariff.com/"></a>
    <a href="http://www.youtube.com/ blogtariff/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRm6O_Hp5vaFu35MDJIxYvH9fRrTXbV0DHk_BS1hF6NCVYPXYZlPh1rAjK2LBsyXwHP7sxAGrZbR3hpmTt2E88SFafko-YFOTVXPLXSYoxY-TZtqPclbmmsxopaA2xWYJNY7qcbpeeR_g/s660/blogtariff.com-youtube.png" /></a>
</p></center>
 <div align='right'>
   <span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://www.blogtariff.com/' style='text-decoration: none;' target='_blank'><font color='#000' decoration='none'>[Get this widget]</font></a></span>
  </div>

Left side spinning effect

<style>p#btf_socialicons img {
 /* Spinning Social Icons Widget By BlogTariff */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

p#btf_socialicons img:hover {
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
}

/* Spinning Social Icons Widget By BlogTariff */
</style>

<center><p id="btf_socialicons">
    <a href="http://www.facebook.com/blogtariffcom/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGkFmY87zuPPBilVZ87l7Qgtg_L9x5JcC15BvQnlHKyExkkHEjgjcwwXHIgZ4lLH74p93YSb3BWzxuDNKCuzq9o17v7WujIN0toRL2RM0V6aJgshAxIwEMh8A25Kr1WEJRf0aB-Ba8ru0/s660/blogtariff.com-facebook.png" /></a>
    <a href="http://www.twitter.com/ blogtariff/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix7nxekhhq9F3TRvJ-4DteVncjC9VFkOFnaic8yJWlwLbt0AyaxPQyjsQR_2scXjdffBptKSlUAoZMq2PPWUlHk0fkkJHSMTXXEABQSDF9BmTubEL77-uqZ0BMe2MbOqekpBYjgCDEpO4/s660/blogtariff.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzljUoWWT4ur-4o0x_G_L59uT7yFXT6vrGndQVT1CUQvhlrmaGllq1wglqruGUhcC4cbx4byp6mbsoWVUGPHF45Coeh0tOvzrJ0g768mJKo0ODaJ-EcQV9fNl57gHgrGiV5EQ7D4qXCgM/s660/blogtariff.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/blogtariff/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi36E3wPCZEHXQSPWNxLQ4AnB602MEtD-peIc3gcfk2kOzQ3uI38acgzOrzjic151cRDTozjCHk5XHfnlvHoWf-Fv0HPIQDn5uG8d3Ozg-SPXKWgNoRFHrmcvxLGYP6N9v5fH_twXH1IiQ/s660/blogtariff.com-rss.png" /></a>
<a href="http://www.blogtariff.com/"></a>
    <a href="http://www.youtube.com/blogtariff/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRm6O_Hp5vaFu35MDJIxYvH9fRrTXbV0DHk_BS1hF6NCVYPXYZlPh1rAjK2LBsyXwHP7sxAGrZbR3hpmTt2E88SFafko-YFOTVXPLXSYoxY-TZtqPclbmmsxopaA2xWYJNY7qcbpeeR_g/s660/blogtariff.com-youtube.png" /></a>
</p></center>
 <div align='right'>
   <span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://www.blogtariff.com/' style='text-decoration: none;' target='_blank'><font color='#000' decoration='none'>[Get this widget]</font></a></span>
  </div>

Required Corrections

  • Replace "blogtariff" with your Facebook page ID as highlighted in Red color
  • Replace "blogtariff" with your Twitter username as highlighted in Blue color
  • Replace " 106527290580119996124" with your Google plus ID as highlighted in Pink color
  • Replace "blogtariff" with your Rss feed username ID as highlighted in Green color
  • Replace "blogtariff" with your Youtube Channel name as highlighted in Brown color

Appreciation:

We hope you've enjoyed the above article let know your views and suggestions via comments.

Posted by
Share to:

Post a Comment Gmail ID

Do not Try to Add Spam Comments

Subscribe to: Post Comments (Atom)
 
Top