In this article i am going to tell the easiest process to add social media sharing buttons in blogger or blogspot which helps you to boost your website traffic.
Overview of Contents of this Post
show
Websites become popular if they are shared on social media platforms and we get more views too. And the best way to share your blogger posts on social media sites is to embed a social sharing buttons in every post, so that every visitor can share your post from their social accounts.
- Step-1: Login in to Blogger.com Dashboard.
- Step-2: Go to the Theme Section >> Edit HTML
- Step-3: Search for ]]></b:skin> by pressing Ctrl+F
- Step-4: Now Paste the below code just above ]]></b:skin>
.post-sharing{display:flex; display:inline-block; flex-wrap:nowrap; align-items:center; background-color:#fff; padding:1px 0px 0px; position:absolute bottom:0px; z-index:1;}
.post-sharing svg{width:25px; height:25px; vertical-align:-4px;}
.post-sharing svg path{fill:#ffffff; transition:all .33s ease;}
.post-sharing .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-sharing .total i{font-style:normal; white-space:nowrap;}
.post-sharing .total svg {margin-right:3px;}
.post-sharing .total svg path{fill:#005af0;}
.post-sharing 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-sharing a:hover svg path {fill:#fff !important;}
.post-sharing a.whatsapp {border-color:#4dc246;}
.post-sharing a.whatsapp:hover {background-color:#4dc246;}
.post-sharing a.whatsapp svg path{fill:#4dc246;}
.post-sharing a.facebook{border-color:#3a569a;}
.post-sharing a.facebook:hover {background-color:#3a569a;}
.post-sharing a.facebook svg path {fill:#3a569a;}
.post-sharing a.messenger {border-color:#448AFE;}
.post-sharing a.messenger:hover {background-color:#448AFF;}
.post-sharing a.messenger svg path {fill:#448AFE;}
.post-sharing a.twitter {border-color:#00abf0;}
.post-sharing a.twitter:hover {background-color:#00abf0;}
.post-sharing a.twitter svg path {fill:#00abf0;}
.post-sharing a.pinterest {border-color:#cd1c1e;}
.post-sharing a.pinterest:hover {background-color:#cd1c1e;}
.post-sharing a.pinterest svg path {fill:#cd1c1e;}
.post-sharing a.linkedin {border-color:#2553BF;}
.post-sharing a.linkedin:hover {background-color:#2553BF;}
.post-sharing a.linkedin svg path {fill:#2553BF;}
.post-sharing a.tumblr {border-color:#314257;}
.post-sharing a.tumblr:hover {background-color:#314257;}
.post-sharing a.tumblr svg path {fill:#314257;}Step-4: Now Search for <data:post.body/> and paste the below code just above this tag.
<b:if cond='data:view.isPost'>
<div class='post-sharing'>
<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='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>
<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>
</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='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='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='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>Also Read: How to Add Stylish Alert Box in Blogger
I needed to thank you for this excellent read!! I certainly enjoyed every little bit of it. I have got you saved as a favorite to check out new things you postÖ
I am not sure where you’re getting your information, but good topic.
Thanks for fantastic information. What trips can you recommend in 2024? Astro tourism, eco diving, home swapping, train stations are the new food destinations,sports tourism, coolcationing, gig tripping, private group travel?