
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='"http://plus.google.com/share?url=" + 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='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + 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='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + 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='"http://digg.com/submit?phase=2&url=" + 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='"http://del.icio.us/post?url=" + data:post.url + "&title=" + 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='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + 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='"http://www.technorati.com/faves?add=" + 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>
<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='"http://plus.google.com/share?url=" + 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='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + 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='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + 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='"http://digg.com/submit?phase=2&url=" + 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='"http://del.icio.us/post?url=" + data:post.url + "&title=" + 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='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + 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='"http://www.technorati.com/faves?add=" + 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









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