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='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:
Labels:

Comments

  1. Kesava Krishnan12/8/20 3:11 pm

    Hi David,

    Thank you for your comments. This is age old article like you mentioned. I'll write up a new one soon and publish.

    Please keep following the blog for it.

    ReplyDelete

Post a Comment

People also read,

How to secure your Google account and Blogger blog?

As a part of contributions to NCSAM, I am writing this article down on what all should we be aware of with respect to Google's security aspect and how to make sure your blog stays yours forever. What is NCSAM? It's National Cyber Security Awareness Month which is observed during the month of October every year in America. However, we all know cyber security is a world topic and is not limited to just the USA. So let me give some tips with respect to keeping the Google account safe and Blogger blogs safe from hackers. As I secure my account, I hope you people catch up too. In this blog post, I am going to tell about the following, Securing your Google account. Securing your Blogger blog. Securing your Google account Since Blogger is also part of your Google account, let's first see what all we need to do to keep our Google account safe. Don't share your password to anyone. Keep changing your password every 60 - 90 days. Make sure your password is str...
31 comments
Read More

Blogger custom domain confusions - Check before you buy

In the Blogger community forum, I happened to help a user who was not able to publish their blogspot address to their custom domain. After doing all the debugging, there was no option left out but to contact Google and finally we have known what the problem is. The problem was that the URL was not available for use in blogger.  Here on, before spending money on buying a domain, please ensure blogger allows it. Why isn't the custom domain available to buy but not available to use on Blogger? That'd be the first question every user would ask or think to ask. Unfortunately reason is un-disclosed by Blogger themselves.  So how do we know if a domain is available at Blogger or not? Earlier, there used to be no way we could do this as Blogger would throw a more generic error like below, Now, we get a more customised error for this particular case alone like below, So, here on, before spending money on buying a domain, please try publishing your blog in the domain name you are planni...
16 comments
Read More

Blogger HTTPS for custom domain and Cloudflare

In BHF, there was a recent issue related to cloudflare where the browser screams the site is a phishing site. So I thought of writing up how does a service like cloudflare affect your blogger blog. What is Cloudflare? Well we have that written all over Wikipedia: Cloudflare . Let's go on with why Blogger users look for Cloudflare. Anciently Blogger users used Cloudflare for one simple reason. HTTPS for custom domains. So what happens when you introduce Cloudflare into your domain? DNS Redirect. Your custom domain will be configured with the proxy info provided by Cloudflare and when the request is hit, DNS redirect happens. DNS redirect is bad for the site's health. A number of reasons, but the most important is that some browsers, when it detects a DNS redirection, it thinks that it is a phishing site. What is a DNS redirect? I am trying to explain this in easy terms. I'll try not to be too technical. When a custom domain URL is hit, usually the domain reques...
15 comments
Read More