Add Shiny Social Buttons With 2D Rotate Effect For Blogger

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPOlYbXT32nbxFDbIBPukkUJzXH4dfysH6kEaCPUg8U4wYpoc-tLAc78yRrBrRFIFBYfk2StBQRG6wsEDhSaK-0jqOKBEkc-7iRPYaFGUT5F6vidubcuOyi8EwhsQnYWrvJqRftfSiVWA/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXO57S1MoFuOk-NUNnRzjLARZH6gI-11Zj-x13grW4GssHU4C4SucNr1DBmw05KVmCklqa3zfO0I0n4UiPwaPpRXBzVo5PgokId_ioV8eiZpMjizDpcIyDA4WY69SeU9ZxyV4dze2r0Mo/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOyfP80RDIyHGv64GNoxv3Aji9ccdcLRVXiCNHYCp18kgfhAx3YVAu9teeIOrEL1sCdChQVpCYoWBrdpYbyI2TtxeL5gmVo05_L2dZ6mDReTvc9jR0dkeJt6gNW7wbQp0sT9SJYSlKZLo/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim58qXRNZa-40qyIrNouIPGakpWdYA0QoZ40ZTmPQ4nBkWUjbRpXoM4617KcUt5y3MDWxQGXUkJEQ7sHNTGBvoWhkeko5Zym_AEhn7v8W25bY949zQdGc2MJiLPvdfT8Lhsty7qIJZlr4/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA0pDsbsIPziicLyIVPCEvspD8lceymQ7L-YuIYnpFyTftEidf0mDO_ApIEXW7B7LRD1a_KT4rbg39DU55kFAKmoD3u7g5X0mSfbtgF_lkkq13I1ZQH-iZCNm-szZ4yaaL00xxWozXQis/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc3LmuqqxMhBSv_r5AbEKFZMv6ahtSOux2CjwY5B0LdzH1fmrPZmLQwS-L2idPIYiBG3P3rmtnKWSXLhv9lstjmLkpqmhgOk1dflI1FvBygsGxAVQDMKLJaLLKatCnk7tX0rd-4-duKuA/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.