Social Sharing icons under all posts

The following article will help you get a social sharing widget under each blog post as I have in my blog.

It consists of four parts of template Editing :-

1. Adding CSS.
2. Adding XML.

First Backup your template.

Adding CSS

• Goto Dashboard > Template > Customise > Advanced > Add CSS
• Paste the following code in the appearing box,
  
  .sharebutton{
  padding:10px;
  background-color:transparent;
  border-radius:5px;
  box-shadow:0px 0px 3px rgba(0,0,0,0.3);
  border-top:5px solid black;
  }
  .share, .share:hover{
  cursor:pointer;
  padding:5px 10px;
  box-shadow:0px 0px 3px rgba(0,0,0,0.3);
  color:black;
  text-decoration:none;
  }
  .link_share{
  width:100%;padding-bottom:3px;border:3px solid transparent;;border-radius:2px;
   -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -goog-ms-transition-duration: 1s;
    transition-duration: 1s;
  }
  .link_share:focus{
  border-bottom:3px solid black;
   -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -goog-ms-transition-duration: 1s;
    transition-duration: 1s;
  }

Adding XML

• Press Ctrl + F and Find <b:if cond='data:post.hasJumpLink'>
• The code around it will look like,
  
  <b:if cond='data:post.hasJumpLink'>
  <div class='jump-link'>
  <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
  </b:if>
• Right after that place the below code,
  <p class='sharebutton'><b>Share this post</b><br/><br/>
  
  <span class='post-icons'>
  <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Facebook'><img alt='Add To Facebook' border='0' class='icon-action' height='36' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcnUmMyStCZCr23NNaO0IXSUp154VHzGvv49eXhSKaRyytpxh82iKP_cNxTjcZfl0NZ5ErbdNUk504nkp8zsw8-2mig5MXNe_johDiIxtPZ_HWO07dxZO5_YmLeDrKG5ojkUSQRz-g0dI/s200/facebook.png' width='36'/></a>
  <a expr:href='&quot;https://twitter.com/intent/tweet?button_hashtag=howtoblog&amp;text=&quot; + data:post.url' target='_blank' title='Tweet this'><img border='0' class='icon-action' height='36' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8LBiwnW55czl758IX_7vhRa68x58pSby17pKkKRFdsobUQTcgq4ZXQZ1UwbptXf05iDjRwWhQmWOEBNw01eQ3raA9oyqfywMLPNpAW7yY7jbytmDk6aaPW-9V9FCVodI5MBTNV6kdxUQ/s512/Twitter%2520Icon.png' width='36'/></a>
  <br/><br/>
  <krish style='width:100%;font-weight:bold;font-style:italic;'>Share Link : <input class='link_share' expr:value='data:post.url' onfocus='this.select()' type='text'/></krish>
  </span>
  
  <font size='2'>Click <a href='http://howtoblog.krishnainfotron.com/2012/08/social-book-marking-buttons-in-all.html'>here</a> for <b>Social sharing icons V2</b>.</font>
  </p><br/>

After completing these, click on "Save Template" and view your blog. You should see the social sharing icons appearing on the template. 

See related posts:

• Blogger Tricks