How to Install a Share Button on Blogspot Blog

How to Install Share Button on Blogspot Blog

How to Install a Social Share Button on a Blog - You have certainly seen the share button installed on the side of blog posts, above articles, and below Blogspot posting articles. It is intended that our articles can be shared by blog visitors to social media such as Google Plus, Facebook, Pinterest, Linkedin, Tumblr, Twitter, and Whatsapp.

If we post articles or tutorials that are very useful, visitors will volunteer to share via social media. By providing a share button, visitors can easily share our articles through the available buttons. Of course, this is very helpful, because our posts/articles can be read by many people. 

This Share button has proven effective because, in addition to traffic from search engines, we can also better optimize visitors from social media. But of course, it must also be accompanied by quality article writing, so that it really benefits those who read it. 

How to Install a Share Button on Blogspot Blog

Well, in this post I will share how to install a custom share button under a blog article. This share button is very simple and cool, easily visible to visitors and fast loading is also responsive.

How to Install Share Button on a Blogger Blog

The share button with this elegant look is widely used to share on various social media platforms. So, your blog will be more cool and wonderful if you install this button. dgntemplate.in has been using it for a long time.

To make it quite easy, please follow the instructions below.

  • Add CSS code
  • Add Javascript code

Step-1: Adding CSS Code

➊ Login into the Blogger Dashboard

ThemesEdit HTML

➌ Copy the following CSS code and paste it just Before/Above the  ]]></b:skin> tag (usually old templates still use this tag)  or it could be </style> tag.

/* Install a Share Button by dgntemplate.in */
.amanShare{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;margin-top:20px}
.amanShare svg{width:17px;height:17px;vertical-align:-4px}
.amanShare svg path{fill:#fff}
.amanShare a{width:100%;padding:7px 0px;text-align:center;box-shadow:none}
.amanShare a:hover{box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.25)}
.amanShare a.facebook{background-color:#3a579a}
.amanShare a.twitter{background-color:#00abf0}
.amanShare a.pinterest{background-color:#cd1c1f}
.amanShare a.linkedin{background-color:#2554BF}
.amanShare a.whatsapp{background-color:#4dc247}

Step-2: Adding HTML code

➊ Login into the Blogger Dashboard

ThemesEdit HTML

➌ Look for the code <data:post.body/>

➍ Copy the following HTML code and paste it just After/Below the <data:post.body/> tag.

/* Install a Share Button by dgntemplate.in */
<b:if cond='data:blog.pageType == &quot;item&quot;'>
	<div class='amanShare'>
		<a class='facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url.canonical' onclick='window.open(this.href,&quot;sharer&quot;,&quot;   toolbar=0,status=0,width=626,height=436&quot;);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>
		<a class='whatsapp' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; - &quot; + data:post.url.canonical' onclick='window.open(encodeURI(this.href),&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=626,height=500&quot;);   return false;' 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='twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url.canonical + &quot;&amp;text=&quot; + data:post.title + &quot; (by: @username) &quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   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-do='buttonPin' expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url.canonical + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   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>
	</div>
</b:if>  

➎  Click to Save theme.

Oh Yes!! Don't forget to save all settings with the click of a button Save theme. Then the social media share button will appear below the post/article.

Conclusion

That's it How to install a share button on a blogger blog to share various social media platforms, hopefully, it can be useful and your articles can be shared on various social media. If this tutorial is useful, please share it with the available social media buttons. Cultivate comments when you read. 

👍Good luck!!

Dgntemplate - High Quality Blogger Templates 2021

Download Latest Free Blogger Templates to Make your blog Professional and Increase your Blog Ranking!
Don't miss the latest template notification from Dgntemplate