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. 

Comments

Popular posts from this blog

Meet a spammer

Let me start by a warning, This blogpost has nothing to do with howtoblog and is a story of a spammer.

Years ago we had to face a spammer in the forum(Probably during Pistachio?) who was very persistent. He was a link dropping spammer who kept sharing his blog URL under every reply in the forum and somewhere to his blogposts which merely had instructions from Blogger Help Centre.

It went as,
Thanks and Regards,
HIS NAME
HIS BLOG URL Probably it was so difficult for TCs to make him go away as I happened to see him for months, spamming in the forum and one fine day he disappeared and never returned.

I happened to find him and interview him which I am writing down here,

Blogger Language Confusions

In BHF, we recently had a great confusion on Blogger Platform language and Blogger Blog language. So I decided to go ahead and write in detail about it.

There are two important terms here to begin with,
Blogger PlatformBlogger BlogBlogger Platform is what you see when you go to https://www.blogger.com. The operating system that helps you write and manage your blogs on Blogger.