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 this code <span class=’post-comment-link’> and go to end of this div tag and paste below code. for example, see the above picture.
<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’/></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’/></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=’tw-2’/></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’/></a>
<a class=’this-wa’ expr:href=’"https://api.whatsapp.com/send?text=" + data:post.title + " | " + data:post.url’ rel=’nofollow’ target=’_blank’ title=’Whatsapp’><i class=’tw-2’/></a>
</div></div></div> </b:if>
Now You are done!!! Enjoy blogging if there is any problem then you can ask in comments.
tank you for this code http://www.ajakiz.com/
Welcome Raaxada For Using Techno Geek Zone.
Satyendra bhai how to show whatsapp button plz share html
@Dinesh I tried my best efforts to implement the code for whatsapp button but failed to do so…However there are many third party apps which provides whatsapp button for mobile blogs such as addthis.
Thank you! Greetings from Greece 🙂
Welcome 🙂
I tried.But didnt work.I couldnt see the sharing buttons in mobile version.PS-the buttons are available in desktop version.
Excellent! Thank you! It's working in my site mobile view. Keep it up!
Thank you. It works !
Than you a lot this post has really helped me. i blog at wizprof.com
Excellent post
https://videographybloginfo.wordpress.com/
Innovative idea.
https://mdasdrne7.wixsite.com/mysite
It works perfect. Thank you so much! Do you know how to show Like button after each post on the mobile view? The iFrame code generated from https://developers.facebook.com/ only works on desktop view.
This codes actually works. Thanks for the awesome post.
http://basketballhooplab.com/
This was very helpful. Thanks.
http://www.healthostyle.blogspot.com
Thank you, nice updated…. http://globallords.blogspot.com