December 24, 2023
As you know that the more of your posts are shared on social networking sites like Facebook, Twitter, WhatsApp, etc. the more your website or post will become popular and more and more users will visit. The best way to share your website's posts on the social site is to have a social sharing button in each of your posts, so that every user can share your post as much as possible. And a stylish social share button attracts the user quickly and shares more.
So today I will teach you in this article how you can add social sharing button under every post of your website.
How To Add Stylish Social Sharing Button In Blogger Post
- Login to your blogger blog Dashboard.
- Then go to Theme > > Edit HTML.
- Click anywhere inside the code area and press Ctrl + F keys to open the search box.
- Now, Search for ]]></b:skin> Or </style> tag and paste below code just above of this tag.
/*== Post Share By TG Gyan ==*/
.post-share{display:inline-block; display:flex; flex-wrap:nowrap; align-items:center; background-color:#fff; padding:1px 0px 0px; position:absolute bottom:0px; z-index:1;}
.post-share svg{width:25px; height:25px; vertical-align:-4px;}
.post-share svg path{fill:#ffffff; transition:all .3s ease;}
.post-share .total{display:inline-block; display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; width:100%; font-size:16px; font-weight:500; color:#005af0; padding:10.8px 0px; border-top:3px solid #005af0; cursor:not-allowed;}
.post-share .total i{font-style:normal; white-space:nowrap;}
.post-share .total svg{margin-right:3px;}
.post-share .total svg path{fill:#005af0;}
.post-share a{width:100%; padding:10px 0px; border-top-width:3px; border-top-style:solid; text-align:center; box-shadow:none; transition:all .3s ease;}
.post-share a:hover svg path{fill:#fff !important;}
.post-share a.facebook{border-color:#3a579a;}
.post-share a.facebook:hover{background-color:#3a579a;}
.post-share a.facebook svg path{fill:#3a579a;}
.post-share a.twitter{border-color:#00abf0;}
.post-share a.twitter:hover{background-color:#00abf0;}
.post-share a.twitter svg path{fill:#00abf0;}
.post-share a.pinterest{border-color:#cd1c1f;}
.post-share a.pinterest:hover{background-color:#cd1c1f;}
.post-share a.pinterest svg path{fill:#cd1c1f;}
.post-share a.linkedin{border-color:#2554BF;}
.post-share a.linkedin:hover{background-color:#2554BF;}
.post-share a.linkedin svg path{fill:#2554BF;}
.post-share a.tumblr{border-color:#314358;}
.post-share a.tumblr:hover{background-color:#314358;}
.post-share a.tumblr svg path{fill:#314358;}
.post-share a.whatsapp{border-color:#4dc247;}
.post-share a.whatsapp:hover{background-color:#4dc247;}
.post-share a.whatsapp svg path{fill:#4dc247;}
.post-share a.messenger{border-color:#448AFF;}
.post-share a.messenger:hover{background-color:#448AFF;}
.post-share a.messenger svg path{fill:#448AFF;}- Now, Search for <data:post.body/> tag and paste below code just after of this tag.
Note :- If you see this code one or more times, Select the code that appears in the last.
<b:if cond='data:view.isPost'>
<div class='post-share'>
<span class='total'><svg viewBox='0 0 24 24'><path d='M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z'/></svg><i><b>SHARE</b></i></span>
<a class='facebook' expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url.canonical' onclick='window.open(this.href,"sharer"," toolbar=0,status=0,width=626,height=436");return false;' rel='nofollow' title='Share to Facebook'><svg viewBox='0 0 24 24'><path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z'/></svg></a>
<b:if cond='data:blog.isMobileRequest'>
<a class='whatsapp' expr:href='"whatsapp://send?text=" + data:post.title + " - " + data:post.url.canonical' rel='nofollow' title='Share to WhatsApp'><svg viewBox='0 0 24 24'><path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/></svg></a>
<a class='messenger' expr:href='"fb-messenger://share?link=" + data:post.title + " - " + data:post.url.canonical' rel='nofollow' title='Share to WhatsApp'><svg viewBox='0 0 24 24'><path d='M12,2C6.5,2 2,6.14 2,11.25C2,14.13 3.42,16.7 5.65,18.4L5.71,22L9.16,20.12L9.13,20.11C10.04,20.36 11,20.5 12,20.5C17.5,20.5 22,16.36 22,11.25C22,6.14 17.5,2 12,2M13.03,14.41L10.54,11.78L5.5,14.41L10.88,8.78L13.46,11.25L18.31,8.78L13.03,14.41Z'/></svg></a>
</b:if>
<a class='twitter' expr:href='"https://twitter.com/share?url=" + data:post.url.canonical + "&text=" + data:post.title + " (by: @username) "' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow' title='Share to Twitter'><svg viewBox='0 0 24 24'><path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z'/></svg></a>
<a class='pinterest' data-pin-config='beside' expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.url.canonical + "&media=" + data:post.featuredImage + "&description=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow' title='Share to Pinterest'><svg viewBox='0 0 24 24'><path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'/></svg></a>
<a class='linkedin' expr:href='"https://www.linkedin.com/sharing/share-offsite/?url=" + data:post.url.canonical + "&title=" + data:post.title' onclick='window.open(this.href," sharer" ,"toolbar=0,status=0,width=626,height=500"); return false;' rel='nofollow' title='Share to Linkedin'><svg viewBox='0 0 24 24'><path d='M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z'/></svg></a>
<a class='tumblr' data-notes='right' expr:href='"https://www.tumblr.com/share/link?url=" + data:post.url.canonical' onclick='window.open(this.href," sharer" ,"toolbar=0,status=0,width=626,height=500"); return false;' rel='nofollow' title='Share to Tumblr'><svg viewBox='0 0 24 24'><path d='M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17'/></svg></a>
</div>
</b:if>- Click Save Theme.