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/AVvXsEgLd8Ryh4yluAmgR0IATF4L_PqcPJ1pmumph2yIL-l-rHMU2fAk8tRnB0K-FL9u3EUasRV8HzDGi8ullkgP9_gHXmr3jSJrFcTmwBx6-o9hGky_gEuSqiyCXJxlIquslwN_DwU9_PMFKE4/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/AVvXsEi-7pWfMnwQ5T9EM8EIA6DZaShJWlYRWyUTikZKmnrEJuxZaLXovMSNESVX5sHcQM9X5XSPKF2rm1Qktgn4XseGaRbzx6eHFp-4JoGbgX0ocWwHw51igB2_aQfT4mNPUsCoillz4KtI0jk/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/AVvXsEjwH-Sp7aRq57_b8SGVfHJ7dhbVtAk2hQSPYfXyYNpWLfTHvNte1Z5Gq6O-eejyFkJFcsU-4I748Xw30OeU8yVnibOlU-r8cxkSmrrfwpRFOiq0QVQqSZpXKZhRhAxme38Jd0DAQDwQv30/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/AVvXsEiBtwUTy-Ov4RFEXTw2HAf_KLZx6OV0Z7IKH0vyI_B1RSxxsWD05jiJXNvgYIAXQy_kv3Wy-eF6TwLDgFxAwAyPe3sHflJ4ZKCyZw-wW7x_u89qnDOfI0L3dSWSufGzXw1aoL-lOB9k-kg/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/AVvXsEgsxGw2071dWv7jowXFZEYeNY_7LoG5MZpuaeBSxnK1jPpGtcVgj8JyzEl5HolFU0kW04YM2YIipZjrJbdA50lyA8r7mmJbV-5SQw9ypS1ujK8HVvDLUYOEfau-AFIRicuENDr3AkS51ys/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/AVvXsEgQ-R9MZ1z0_gXDE2zxJvn3KsCTissuroeRzVZjp-Vom3PhBob-NoxXGWdF7boEqXtiY7c_9Cygahxw4F6qA8OA56cnKK8jUZpVk02E-aOa3rrmNwq7vtPiZYfdmTczqxUq1nWVhBrgcXg/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.

Filed Under: Blogspot, Blogspot Tricks, Facebook Tricks, Google Plus Tricks, New Design, Social Sites Tricks, Twitter Tricks, Widgets on Thursday, 12 September 2013