Skip to main content

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='http://3.bp.blogspot.com/_vLeiVavkV_M/SnleIlLdGwI/AAAAAAAABd8/RfHnWIGGMEY/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://lh4.googleusercontent.com/-ucOlsxvAWoE/UCDHPcOSvDI/AAAAAAAAAC4/CK71lyjuWPw/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:

Comments

Feeds for you

Blogger in Draft says "Try the new Blogger!"

It's been long time that I wrote something here. Interestingly there seems to be a new update in Blogger in Draft (https://draft.blogger.com).

Common issues where custom domain is involved.

In BHF, one of the common issues we face is setting up custom domain. We already have a lot of information on how to setup a custom domain. So I am going to go ahead and write on the troubleshooting tips for custom domain.

This article is dedicated to +Chuck Croll  who has been/is a great mentor to me  since the beginning.

So let's start with the first and foremost golden rule of Custom domain troubleshooting.
Any issue where you have custom domains involved, first check if the custom domain is setup properly.