Wednesday, 5 September 2012

ADD CSS3 SPINNING SOCIAL SHARING ICONS/BUTTONS BELOW EVERY POST IN BLOGGER


Social Bookmarking and sharing buttons helps your blog visitors to easily bookmark or Share your blog content with popular social websites like Facebook, Twitter, etc. This widget is based on CSS3 such as -moz-transform which converts spinning effect to social sharing buttons. Whenever you hover the mouse on these buttons they rotates in slight round and surprise them with their spinning effect method. In this post we are going to show you how to add simple social sharing buttons below every post in blogger. In this widget we added Facebook, Twitter, Google Plus,  Delicious, Digg, Stumble upon, Technorati icons. If you are ready to add these sharing widget below every post in your blogger blog, then kindly follow these steps.

SOCIAL SHARING WIDGET PREVIEW


HOW TO ADD SOCIAL SHARING WIDGET

  • Go to Blogger Dashboard --> Template --> Edit HTML --> Proceed
  • Backup your Template before making any changes to your blog
  • Now  Expand Widget Templates
  • Press Ctrl + F and search the code shown below
  • Now Find the code shown below using [ctrl+F]


<div class='post-footer-line post-footer-line-1'/>


  • Now Paste the Code Shown Below just below/after it


<b:if cond='data:blog.pageType == "item"'>
<style>
p#socialicons img {    -moz-transition: all 0.2s ease-in-out;    -webkit-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;} p#socialicons img:hover {    -moz-transform: rotate(70deg);    -webkit-transform: rotate(70deg);    -o-transform: rotate(70deg);    -ms-transform: rotate(70deg);    transform: rotate(70deg);}
</style>
<center><p id='socialicons'>
<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQU5-TAqHIYUhZAI40sug4qS8rMj_yyvW52gckcRy-rLB9A1p59tc9VU9lYGTWEITjaCx4akq2-iczEJ7zJ3sJ8TGF0i_1we_mvNiUQfyJmWzjpGwVFnDuQVpVI_boq9Kbhw57krpBmlM/s1600/latesthack.com-google_plus.png'/></a>
<a 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 border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfoRWbGLkTg-XEtGN8PzkVSNCZrbsreWZP-PrPLY9ZIs7U-3csx_r6Dy_OazU4bLVGvoD2CaLPRxSxTilUSEGJ7p66DAPuAgWopomx5Uxhgq1cCzQqSbC992kNQwXJkKUWsCqdT2DhpLg/s1600/latesthack.com-facebook.png'/></a>
<a 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 border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiezT2DPDuSh0rKYTYjHejxmjSxGQRkjrY0gFr5dNHZqAaHozQ1c9OYANjeTok0z5KNA5OVthCaWWJEJv2G9oOsdvm6URu3sMD8NwK6qEPvQ9WXFf6fPsNjbC4pR2OTNxGHdbNDiakxWbY/s1600/latesthack.com-twitter.png'/></a>      
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGAxgKH9ZqBLgGZmt97Ge3wkVi1CgD2LTqnbvE7dCp8HRDXr2svG8by1EWl9WwPYBcs0NmWAj1BJfb1EHcZtPwFT9u_f1sF3rsNPIGkCEfL2ZnZX3piKdadk81QVnyY90qL6WEMIRXGsMg/s1600/digg.png'/></a>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ToapWMcLt6b2dM9Vn0yy841JLXIeT7Wssbegz1G0UCSwOdMzM1gQgIQXbv5E2IH1PnEKGR8-64S4LDaeVxg5etXJeGo8I0tGpmnyDNcu77nkrxvhaOZPQJZFkFdVzlPtp-c9Mx0VAW54/s1600/delicious.png'/></a>
<a 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 border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgovT07ToSM5b0BvruUyZYTZv8fjK_uVCbAL7aqQuS7FPwmvUwjarPUqsXUZZxvzReIPt_6a6azw_WcHbu6T6c9hSSLlUTtx76fsJm7meyzlvUeHdfQOI0hEsGrs-9OD4AnBhBhaEBIpJIw/s1600/stumbleupon.png'/></a>
<a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTMDMphUyBjKLZnbytorMJ7Io80UNIcwkFuGvXSbTSfKrFit6xHEyGggpgt-7CI_lc9IYz5RJWba0gCSll8QFycrWFM-sA67N2C_V0g788WhLFhMb2vIg1VKqBgcvS5ZDUZyNiT9QnGAhv/s1600/technorati.png'/></a></p></center><p style='display:none;'>Spinning icons by <a href='http://www.latesthack.com'>Latest Hack</a></p></b:if>

  • Now save your template

1 comment:

  1. What is this ? i can not add this coding into my blog how can it work ? tell me??

    ReplyDelete

Sample Text

About

Pages

Powered by Blogger.

Ads 468x60px

Social Icons

About Me

Blog Archive

Featured Posts