So here are the steps to be followed:
1: Adding CSS Code
#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:'a0';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-pi{background:#de3425;text-align:center;overflow:hidden}#share-this a.this-pi i{width:22px; height:18px;text-align:center;padding:0}
#share-this a.this-li{background:#316dce;text-align:center;overflow:hidden}#share-this a.this-li i{width:22px; height:18px;text-align:center;padding:0}
#share-this a.this-wa{background:#3d9610;text-align:center;overflow:hidden}#share-this a.this-wa i{width:22px; height:18px;text-align:center;padding:0}
#share-this a.this-fb:hover,#share-this a.this-tw:hover,#share-this a.this-wa:hover,#share-this a.this-li:hover,#share-this a.this-pi:hover {opacity:.9}#share-this i{background-size: contain;display:inline-block;margin:-3px 0px 0 0}
.this-fb i{background:url(https://1.bp.blogspot.com/-FXuxNLq0-pE/Xq7_-BY6cjI/AAAAAAAAHfs/plEbUYlXSwMnhQbc3sDb-1J0bnNRjbViwCLcBGAsYHQ/s1600/fb.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}
.this-tw i{background:url(https://1.bp.blogspot.com/-c1kA9WTLeVo/Xq7_-h4ZK0I/AAAAAAAAHf4/DgT1uy0WBywM3pq9Y5FMp1zkILT5H3iQwCLcBGAsYHQ/s1600/tw.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}
.this-li i{background:url(https://1.bp.blogspot.com/-mrNWuYwN4k4/Xq7_-PXwGTI/AAAAAAAAHfw/BAUHwSAZKgIfJkLqIx2NAkxPhS7dBeZzwCLcBGAsYHQ/s1600/lin.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}
.this-pi i{background:url(https://1.bp.blogspot.com/–t7TpHohk7Y/Xq7_-SBzQLI/AAAAAAAAHf0/11Iy305XT_EjxrHxgUWWBA6s_ByEXprJwCLcBGAsYHQ/s1600/pi.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}
.this-wa i{background:url(https://1.bp.blogspot.com/-CjXHJTWxnlQ/Xq7_-26ObvI/AAAAAAAAHf8/gfi7xCKeGrQSgfB3YUtJEmjjlq-NMPDQwCLcBGAsYHQ/s1600/wa.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}
.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;}
2: Adding the main Code
Search again for the give below code(you will find many in your template)
<div class=’post-footer’>
you will find many codes but you have to stop at the 2nd one. Paste the below given code above the 2nd <div class=’post-footer’> and Save the Template.
<b:if cond=’data:blog.pageType == "item"’><div class=’shr-btn-scl’>
<div align=’center’>
<div id=’share-this’>
<h4><span>Share this Post Via:</span></h4>
<a class=’this-fb’ expr:href=’"https://www.facebook.com/sharer.php?u=" + data:blog.url’ onclick=’window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;’ rel=’nofollow’ target=’_blank’ title=’Facebook’><i class=’fb-1’/>Facebook</a>
<a class=’this-tw’ expr:href=’"https://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"’ onclick=’window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;’ rel=’nofollow’ target=’_blank’ title=’Twitter’><i class=’tw-2’/>Twitter</a>
<a class=’this-pi’ expr:href=’"https://www.pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.featuredImage + "&description=" + data:post.title’ onclick=’window.open(this.href, 'windowName', 'width=735, height=750, left=24, top=24, scrollbars, resizable'); return false;’ rel=’nofollow’ target=’_blank’ title=’Pinterest’><i class=’gp-2’/>Pinterest</a>
<a class=’this-li’ expr:href=’"https://www.linkedin.com/shareArticle?url=" + data:post.url’ onclick=’window.open(this.href, 'windowName', 'width=950, height=650, left=24, top=24, scrollbars, resizable'); return false;’ rel=’nofollow’ target=’_blank’ title=’LinkedIn’><i class=’tw-2’/>LinkedIn</a>
<a class=’this-wa’ expr:href=’"https://web.whatsapp.com/send?text=" + data:post.title + " | " + data:post.url’ onclick=’window.open(this.href, 'windowName', 'width=900, height=550, left=24, top=24, scrollbars, resizable'); return false;’ rel=’nofollow’ target=’_blank’ title=’Whatsapp’><i class=’tw-2’/>Whatsapp</a> </div></div></div> </b:if>
Now You are done!!! Enjoy blogging if there is any problem then you can ask in comments.
This is great tutorial. But I have one question. How can I make it to be visible not only in post, but in general view bellow all of posts like by original buttons? Thank you for reply:)
Glad to listen from you! I have updated the post with new CSS and code.
the social icons dont show in my post list. It only shows when I open the posts one by one. Kindly help 😀
Many Many Thanks… It Worked