Add Social Sharing Buttons Widget To Blogger

Add Social Sharing Buttons Widget To Blogger
Social Media has become the main source of your Blog/website traffic,there fore never underestimate the social media networks.For Boosting Blog traffic you should add Social Sharing Buttons Widget to your Blog.Which helps you and your visitors to easily share your Blog Contents with their Friends,as a result you will get the bonus of traffic to your blog.The widget we are sharing contain Google+ Share Button,Twitter Tweet Buttons,Stumble,Facebook Send and Like Button,Pinterest,and many other social network buttons.You can add it either above the Blogger Post or Below the Blogger Posts,however it is very simple and clean widget which will not effect your Blog Loading Speed.

How To Add Social Sharing Buttons Widget To Blogger

  • Go To Blogger Dashboard
  • There Click On Template 
  • Now Search for This Script/Code <data:post.body/>
  • After Finding The above Code in Template
  • Copy The Below Script and paste it above(for Showing Buttons above The Blogger Post) or below(for Showing Buttons Below Blogger Post) this Script <data:post.body/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>   <div class="sharethatsblogging"> <center><div class="headingthatsblogging">Like the Post? Do share with your Friends.</div>     <ul class='social' id='cssanimation'>     <li class='facebook'>     <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>     </li>     <li class='twitter'>     <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>     </li>     <li class='googleplus'> <a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>     </li>     <li class='pinterest'> <a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>     </li>     <li class='stumbleupon'>     <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>     </li>     <li class='delicious'>     <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>     </li>     <li class='linkedin'>     <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>     </li>     <li class='reddit'>     <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>     </li>     <li class='technorati'>     <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>     </li>     </ul></center></div>   <link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'/>​ <style> ul.social { list-style:none; display:inline-block; margin:15px auto; }  ul.social li { display:inline; float:left; background-repeat:no-repeat; }  ul.social li a { display:block; width:50px; height:50px; padding-right:10px; position:relative; text-decoration:none; }  ul.social li a strong { font-weight:400; position:absolute; left:20px; top:-1px; color:#fff; z-index:9999; text-shadow:1px 1px 0 rgba(0,0,0,0.75); background-color:rgba(0,0,0,0.7); -moz-border-radius:3px; -moz-box-shadow:0 0 5px rgba(0,0,0,0.5); -webkit-border-radius:3px; -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5); border-radius:3px; box-shadow:0 0 5px rgba(0,0,0,0.5); padding:3px; }  ul.social li.facebook { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOe21wvw2mw2iluIWUErUo3lj1X3MfBBFkFZLHXL9YdUqNuY9ZvlvdThbB8kImgfTjZpvWW0ff9qdDrlON6r8s7XERfcKcL-FXleRowGrDAHECBJoLWUDx282eO0jVR1-OnZd62UbsG1c/s50/facebook.png); }  ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiECM5Pb7jRASP1X7np63s4K49ymz04UY9HDGDKhDWpZqGjB216k89v0PKJw3fBvsScP4mII_3ItF-zRcJ50Ter3U-X3UwNw84T3UvQ1nLgMOa-Lezsi6zRBGdy_k5V-2wZzRchw16xqI/s50/twitter.png); }  ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTpIFpvSAoI4Hyr5D5ixmJ5ZpkIbeJqkCYK9KZ13t1ADbepH_QHEVXf3jhT9WOVtMnd0YpQEH_a0b81qHWWma2T4HVg-2e8f9FbcyzAT7wFss2H8DlJNohiuOzOa8DjjzY8GWpEdn30xw/s50/google%252B.png); }  ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZPQtbqg-wBr8zqZVle-yO49W3VX-1ts2owEa1H1uUyG9zBBwZuiaCrSVi_Zl8eI-WK8k1WDunCioBU7yfibLM6u5gSPQinOLR39z06WaYAFb46lhyqSXv_MMBSTg2hEC_LVHngNFdDZ0/s50/pinterest.png); }  ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK3Vufdjl6bnxIloWrm0nVo20cPf6BE1qy6bS57Q6fLEBBlNNxAnd5jLBp5XiG7YxaFzKXED6BiRFenzMM0X6G-1jEjBrZWDILASPW-s9nWrmKZjFkaWb4pvHHH08738HPDvguzeDtLCM/s50/stumbleupon.png); }  ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuGh6TTQ1sEHHI7RgOwISByNsyd6uJ_dJkKtHsSI0KGXTILKmPha76avxloTAoURgfSUttwUFq8yiRE94Ggt1N1y_9eJ0NdxoP3VXM3CHEi6U2wDZWUrzjMu5BtdjsIcLtzvuwKEYqgrE/s50/delicious.png); }  ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaX6wr9p47nxyqVcNzg0muzBY4tBWJWZ9hnVgi32qo8s3oGxHOmCQUxx8WhL6Vdq_v8qGx_ixNqvD_NcQd6-MttEV5ZXj6Ls2rdi2URKpy3bY57CsmWbQRk5wsch7X5K7UHzijkCewEU/s50/linkedin.png); }  ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqQ8SmbyMLM9OgZdvuqui5vI3PpJdLcWZJnqbuA46pwUifm4PXSOnJ7hSMc7TMrc5s3D_J8T3LRHuUlCDIKQK4Arp9txVr60m-PbDPRTxmtTTodJjQ4_uljWMt_AMY0qyd4dmb0tWNl8Q/s50/reddit.png); }  ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj887oHsdSjQdvMRMXYz56swp2JG4d_ty__gPYf0FHSWiYYZ8VJUi2ih2dceh6PXMhJ8dhFnMLvg_wU1LopA0muTflZvxWasSecV6vr4qI5-UnJox2hNlFeXXB3Nh2fWKUo-q3rTDZu9LnC/s1600/TBI-technorati.png); }  #cssanimation:hover li { opacity:0.2; }  #cssanimation li { -webkit-transition-property:opacity; -webkit-transition-duration:500ms; -moz-transition-property:opacity; -moz-transition-duration:500ms; }  #cssanimation li a strong { opacity:0; -webkit-transition-property:opacity, top; -webkit-transition-duration:300ms; -moz-transition-property:opacity, top; -moz-transition-duration:300ms; }  #cssanimation li:hover { opacity:1; }  #cssanimation li:hover a strong { opacity:1; top:-10px; } .headinglordhtml{     font-size:25px;     font-family: 'Englebert', sans-serif; } .sharelordhtml{   border-top:30px solid #3873CC;      padding:16px;         -webkit-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); -moz-box-shadow:    0px 7px 9px rgba(50, 50, 50, 0.75); box-shadow:         0px 7px 9px rgba(50, 50, 50, 0.75);     transition: background .777s; -webkit-transition: background .777s; -moz-transition:background .777s; -o-transition: background .777s; -ms-transition: background .777s;     background:#D9D6FF; }  .sharelordhtml:hover {         background:white;  }  ​ </style>  </b:if>
Note:-
- In Magazine Blogger Templates,there are more then two Scripts similar to <data:post.body/>,so do paste the above Script after each script.
  • Now when you paste the above script after <data:post.body/> ,take a Preview and Then Hit save Template.
  • That's it,now take a look on your blog post social sharing widget will dancing there :)

So What's UP

Actually this widget is the main source of many blogger to get a flood of traffic,however this widget is very easy to navigate,so it will help your readers to share your blog contents with their friends.Share your beautiful ideas with us,stay Blessed Happy Blogging :)
SHARE

Iftikhar Uddin

I am a Web Developer,Graphic Designer,Blogger Wizard,WordPress Samurai,Code Engineer,SEO Guru,Software Engineer and food hunter.

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

19 comments:

  1. Ifti, is there any missing/mistake in the script? I can't make it happen in my blog. By the by I found two Scripts/code similar to and pasted your Script after each script that is twice in total. Plz visit my blog: Faster Maths and suggest me. Thanks in advance.

    ReplyDelete
  2. Great blog.. I have learn a to on your post here..



    ArcMail Defender

    ReplyDelete
  3. Replies
    1. Yah, that works.
      @ Sangram Barge,
      u'll have to look for
      twice
      This may vary for different templates.
      So if u have that twice then paste twice

      Delete
    2. @Barge Yas Ofcourse it works perfectly follow the steps carefully !

      Delete
  4. I am noy finding the , and I dont have that tab to search it!
    @Iftikhar uddin

    ReplyDelete
  5. Your article is very informative, specially to the new individual entering to the field of blogging..... Make Money , Blogging Tips

    ReplyDelete
  6. Thanks your sir.. :D i added it to my blog ..

    ReplyDelete
  7. hey its work for me checkout http://mybloggertipstricks.com

    ReplyDelete
  8. Hi, just twitter button doesnt work 4 my blog site what can ı do? it's not share any post my page..

    ReplyDelete
  9. I am fixed twitter problem but Technorati & pinterest codes are not working..

    ReplyDelete
  10. Thanks alot, it worked for me. check it out on my site www.eupdates247.com

    ReplyDelete
  11. good post, thanksssssssssssss
    http://www.mycodingland.com/

    ReplyDelete
  12. Great work. thank you for sharing great ideas with us.
    http://problogworld.blogspot.com

    ReplyDelete
  13. This widget looks nice but not working with my blog, still trying to fit it in my blog
    http://pharmacyhelps.blogspot.com/
    http://itnews-solutions-tips.blogspot.com/

    ReplyDelete