Add Simple Social Share Buttons To Blogger

Sharing blog posts on social networks is the best way to get traffic on your blog. Almost every person is on social network and if you have not added any social media share gadget on your blog then you are just lagging behind.




Add Simple Social Share Buttons To Blogger


Social sharing buttons lets the visitors of your blog to share the contents of your blog. This helps you to get traffic on your blog. There are many social networking sites but Facebook, Twitter and Google Plus are the ones which most of the people use.

You can use these sites to get traffic on your blog.

Steps to follow


  • Open blogger
  • Go to 'Template' and click on 'Edit HTML'
  • Search for this piece of code


]]></b:skin>


  • Now paste this code directly above bskin


#share-this {
overflow:hidden;
margin:20px auto 0 auto;
line-height:1.4em;
display:table;
text-align:center;
}
#share-this h4 {
position:relative;
overflow:hidden;
margin:0 0 10px;
letter-spacing:1px;
font-size:120%;
font-weight:700;
padding:0 8px;
text-align:center;
transition:all 0.5s ease-out;
}
#share-this h4:before,#share-this h4:after {
position:absolute;
top:51%;
overflow:hidden;
width:50%;
height:1px;
content:&#39;\a0&#39;;
background-color:#ddd;
}
#share-this h4:before {
margin-left:-50%;
text-align:right;
}
#share-this span {
position:relative;
display:inline-block;
padding:0 10px;
margin:auto;
}
#share-this a {
float:left;
display:block;
color:#fff;
padding:10px 14px;
text-align:center;
margin:0 3px 3px;
font-size:12px;
}
#share-this a.this-fb {
background:#395796;
}
#share-this a.this-tw {
background:#4cb0ea;
}
#share-this a.this-gp {
background:#de3425;
text-align:center;
overflow:hidden;
}
#share-this a.this-gp i {
text-align:center;
padding:0;
}
#share-this a.this-fb:hover,#share-this a.this-tw:hover,#share-this a.this-gp:hover {
opacity:.9;
}
#share-this i {
display:inline-block;
margin:-3px 10px 0 0;
}
.this-fb i,.this-tw i,.this-gp i {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx1_7oNUKRBnL8cfTJw4jo8xOrDgDFtfF718xufR9_YK64cw1N0Z4HHRSkz5YKNwDSDYXvDqdTejybfZxq6cH58TYySIUGPE8rGTZ8kE5450uqbHa3yVi6NNYEqVa74k9vevVu_WwcI4DP/s1600/sosmed2.png) no-repeat;
width:22px;
height:18px;
display:inline-block;
vertical-align:text-top;
margin-top:-6px;
text-align:center
}
.this-fb i {
background-position:0 -100px;
margin-top:-4px;
}
.this-tw i {
background-position:0 -150px;
}
.this-gp i {
background-position:0 -200px;
}
.notpay {
font-size:13px;
line-height: 22px;
border:2px #df3f2a solid;
padding:3px 15px;
text-align:center;
margin:0 0 25px;
}
.pay {
font-size:13px;
line-height: 22px;
border:2px #5973b0 solid;
padding:3px 15px;
text-align:center;
margin:0 0 25px;
}



  • Now search for this code


<div class='post-footer'>


  • Just paste this code after that



<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='shr-btn-scl'>
<div align='center'>
<div id='share-this'>
<h4><span>Share it</span></h4>
<a class='this-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Facebook'><i class='fb-1'/>Facebook</a>
<a class='this-tw' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Twitter'><i class='tw-2'/>Twitter</a>
<a class='this-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Google+'><i class='gp-2'/><span class='gp-del'>Google+</span></a>
</div>
</div>
</div>
</b:if>


  • Save your template


You can now visit your blog posts to see if social share buttons are working or not.

Don't forget to share this post with your friends.

I like blogging as much as I like coding and designing though not more than traveling.
If I'm not here publishing stuff then you will find me researching about SEO and marketing.
Love to meet new people and try to help every person.
Find me interesting or have any issue?
Shoot a message and I'll be with you.

2 comments:

  1. Regretfully, they are not working at all on my blog.

    ReplyDelete
    Replies
    1. I've tested every code many times before posting them here. Please make sure you're following all the steps. Also please check if you've pasted second code in right place as there can be two or three post footer. ☺

      Delete

Don't forget to check 'Notify me' box to get notification of reply.