ADD THIS HD SOCIAL BUTTONS WITH 2D ROTATE EFFECT ON BLOGGER

Views

With CSS3 transform, we can move, scale, turn, spin, and stretch elements.A transform is an effect that lets an element change shape, size and position.You can transform your elements using 2D or 3D transformation.

Browser Support

Internet Explorer 9 requires the prefix -ms-
Firefox requires the prefix -moz-
Chrome and Safari requires the prefix -webkit-
Opera requires the prefix -o-

Rotate Effect
With the rotate() method, the element rotates clockwise at a given degree. Negative values are allowed and rotates the element counter-clockwise.The value rotate(30deg) rotates the element clockwise 30 degrees

LETS INSTALL THIS IN YOUR BLOG!

LIVE DEMO

HOW TO INSTALL THIS HD SOCIAL BUTTONS BELOW YOUR BLOG POST?

• Go to your blogger dashboard
• template
• edit html
• proceed
• click “expand widget template”
• press CTRL+F for search shortcut
• and find this code

]]></b:skin>

• and just above it paste the rotate code below,

/*------------ 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 */
}

• And next search for this code,

<data:post.body/>

• and just below/after it paste the following code,

<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>

<!--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/AVvXsEh00KQdTSOQMxYzykmumh7ETj1krK6EJNQEfuq5jcJ1B8dGjb2hRRwl0zQAGO9e0p-u6eObFsJuYZpRajY-vEnya8UA7TnWYTG0dK4DpBirmnAu1d72JYJzo0yZI4NAOj1_ygbw7MSJYXo/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/AVvXsEjq3Zrqy8tMXCWBGI_J51qMR4UoGa8HTCi8RxItQifYjC_CJDdAJRoXIt7W1G7Tz1rdhZBAt9tf7EApOzpNIJ2PN_dEy291AVhfOkmJjrVYW03tyP6QmtUQbNfSfuMFF2UryR2h5A2QEgo/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/AVvXsEgRByPpp8SIYSFmeDBZkI7EXiFzCYbgsFxjChwlrfTD58oVn7rVF1ARDyGCBKphnYDsPKN5ZqZZBv-m4oxy7i6AZZY_EtiOPuxz0F0waresp_4gN5sHQ6KTCG-QHLlC7gWNOsCgnIHE1AU/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/AVvXsEhlV2HDMhqyv5tXfeHyeoGfbVu7711VYNLPCudm4uq5xesT6QDIbJsM7ZPHdYgFulpqNpHSE-4Ge9upaPxzODzfFbr9Dqhb09_DBKbLpohke7EK_xVogfKYlZ9PuJX4QgffWm0ohRuCo08/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/AVvXsEimXpbF-45aaSztuw9Ejqu17jfb1WRonPvKwRK6tnPTRDe8XkXPS9E7oTAtLyIPT89912s_zn_8KVIX3mSM_acaZTWQU8TLd66ucgganAUs6XPUAdgnFDmMF21PDDc_T6IpBqsqhzL2da4/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/AVvXsEjdFKArg68k4kTgVJ_v9Czws8T06CNV3zJprJzeKAnzIK5jdgwlpZ9EQM1eI8Einqkxv916mWUV7EbZyvl_WtaTAOL-UgK99L45hqxhT2EGMW0hantm2xjNF7_NiZoLfYDwhFLVF-3qJns/s200/technorati.png" width='60px' height='70px'/></a></center>

</b:if>

YOU CAN SAVE YOUR TEMPLATE NOW

And see it working perfectly on your blog post.

ARE YOU CONFUSED REGARDING THIS TUTORIAL?

If you have any difficulties implementing and/or following this tutorial, Feel free to keep in touch with me and ill try my best to work it out.