Home » Blogger Tutorials, Tricks and Hacks » Add Shiny Social Buttons With 2D Rotate Effect For Blogger

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

|| View All Tutorials ||

Add Shiny Social Buttons With 2D Rotate Effect For Blogger

Add Shiny Social Buttons With 2D Rotate Effect For Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,115 views

Here’s another nicely designed social sharing buttons tutorial for you. It’s from a blogger named Debbie Navarro of TheYellowBulb from the Philippines, and it’s a set of shiny icons that look as though they’re resting on top of a reflective surface, that rotate at a specified degree clockwise or counter-clockwise once you hover your mouse cursor over them. This rotating animation is accomplished using CSS3’s transform property.

Demo page

To install, follow the steps below.

  • Go to your Blogger dashboard and head over to the “Template” section
  • Click on “Edit HTML” and then “Proceed
  • Click to check the “Expand Widget Template” box
  • By pressing “Ctrl+F”, look for ]]></b:skin> in the template code
  • Copy and then paste the following CSS code right before it:
/*------------ TYB Image Rotate--------------*/ 
.social img:hover 
{ 
transform: rotate(-30deg); 
-ms-transform: rotate(-30deg); /* IE 9 */ 
-webkit-transform: rotate(-30deg); /* Safari and Chrome */ 
-o-transform: rotate(-30deg); /* Opera */ 
-moz-transform: rotate(-30deg); /* Firefox */ 
}

NOTE: The current rotation value is set to -30deg, which means the icons/buttons will rotate at a 30-degree angle counter-clockwise.

  • To change the rotation to clockwise, just remove the negative (-) symbol.
  • To increase the degree of rotation, simply indicate a higher value (e.g. 360 for full rotation).
  • Save your template.
  • Now go to the “Layout” section on your Blogger dashboard.
  • Click on any “Add a Gadget” button where you want the social sharing widget to be placed.
  • Select “HTML/JavaScript” on the gadgets list.
  • Copy/paste the following code in to the content box:
<b:if cond='data:blog.pageType == &quot;item&quot;'><center>

<span style='color: #7AA1C3; font-size: 16px; font-family: Verdana;'><b>Thank you for making this possible ! Kindly Bookmark and Share it.</b></span><br><br>

<!--Facebook-->
<a class='social' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img src="http://3.bp.blogspot.com/-ZXTHHjldPDE/UB_mNQ1r58I/AAAAAAAACIo/GGiwE7cDtXs/s200/facebook.png" width='60px' height='70px'/></a>

<!-- Twitter -->
<a class='social' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img src="http://4.bp.blogspot.com/-fCzj-iIwkGA/UB_mVJ2lAOI/AAAAAAAACJQ/srvFhqp98TQ/s200/twitter.png" width='60px' height='70px'/></a>

<!--Stumble-->
<a class='social' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img src="http://3.bp.blogspot.com/-6rCtjovX8Gg/UB_mSKVs0xI/AAAAAAAACJA/IyODIWNBJ8I/s200/stumbleupon.png" width='80px' height='80px'/></a>

<!--DIGG-->
<a class='social' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img src="http://4.bp.blogspot.com/-vTJ-UGMtgKU/UB_mMNaTq-I/AAAAAAAACIg/C4bIUY9AmNw/s200/digg.png" width='80px' height='80px'/></a>

<!--Reddit-->
<a class='social' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img src="http://3.bp.blogspot.com/-F-u1729U3zI/UB_mQfgqYGI/AAAAAAAACI4/tH7t9wx1p8w/s200/reddit.png" width='60px' height='70px'/></a>

<!--Technorati-->
<a class='social' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img src="http://4.bp.blogspot.com/--kX0uVAf30E/UB_mTdyJOxI/AAAAAAAACJI/8zhiUSVTMLQ/s200/technorati.png" width='60px' height='70px'/></a>

</center></b:if>     
  • Save the gadget and preview your blog.

Congratulations! You’re done. Enjoy your new social buttons.

Liked It ? Please Share

Comments

6 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Raheel says:

    Bro Its Not Working Icon Is Show But Link Not Work Please Check

    • Rudy says:

      I think the problem is with “href”. You can try and just remove the “expr:” and replace “&quot” with the actual single quote symbol (‘).

  2. sam says:

    hi,can you please help me by telling how to add link on these social site button
    thanks

  3. sam says:

    can u plz tell me how to add link on these social box?
    thanx

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