How to add Custom Social Media Share Buttons in Blogger Template

Social Media Share Buttons

The social media share button is required to share any post on social media and tell your friends about it.

Social media share buttons help a website owner to get more engagement and more visitors to their website.

More the attractive your page more visitors will be there.

The sharing buttons developed by us are more stylish and responsive to devices.

How to add our social media share buttons in your blogger template?

Blogger has its own social media share buttons for all posts and pages in your website you can change the style of those buttons or create your own and disabling the default.

Here we are going to disable the default buttons and enable our code. You can use both of them just skip the Step 2: Disabling the default social media sharing buttons in blogger template.

Here are the steps for adding our social media share buttons in the blogger template.

Step 1: Edit HTML

In Blogger admin panel go to Theme > Edit HTML

Step 2: Disabling the default social media sharing buttons in blogger template

In the Edit HTML, press ctrl+f and search Blog1

Step 3: Finding a proper place to paste code

In the Edit HTML, press ctrl+f and search the below code:

<b:include data='post' name='post'/>

Step 4: Add the code:

Paste this code just below the line you have searched in Step 3.

<a class="fa fa-share-alt" title="Share" id='openShareBtn' href="javascript:openShare()"></a><div class="share-container" id='share-container'><div class="share-shape" id='share-shape'><a class="fa fa-times" id='closeShareBtn' href="javascript:closeShare()"></a></div><a class='fab fa-facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'></a><a class='fab fa-twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'></a><a class='fas fa-pencil-ruler' href="https://www.themelites.com"></a>  <a class='fab fa-linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'></a><a class='fab fa-pinterest'  expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'></a><a class='fas fa-envelope' expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=Check out this site: &quot; + data:post.url' title='Share by email' target='_blank'></a><a class='fab fa-whatsapp' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; &gt;&gt; &quot; + data:post.url' rel='nofollow' target='_blank'></a></div>
<script type="text/javascript">
//<![CDATA[
    function closeShare() {document.getElementById('share-container').style.width = '0';
          document.getElementById('share-shape').style.width = '0';
          document.getElementById('share-container').style.height = '0';
          document.getElementById('share-shape').style.height = '0';
          document.getElementById('closeShareBtn').style.display = 'none';
          document.getElementById('openShareBtn').style.display = 'block';    
    }
    function openShare() {
          document.getElementById('share-container').style.width = '230px';
          document.getElementById('share-shape').style.width = '150px';
          document.getElementById('share-container').style.height = '230px';
          document.getElementById('share-shape').style.height = '168px';            
          document.getElementById('closeShareBtn').style.display = 'block';
          document.getElementById('openShareBtn').style.display = 'none';                 
    }
//]]>
</script>

Step 5: Adding CSS

In the <b:skin> tag paste the below CSS code

.share-container{clip-path: circle(50% at 0 50%);width: 0;height: 0;background: rgba(0,0,0,0.1);position: fixed;top: 45%;left:0px;transition: 0.5s;}
.share-shape{clip-path: circle(50% at 0 50%);background: rgba(0,0,0,0.01);width: 0;height: 0;position: absolute; top: 13%;z-index: 1;}
.share-container a{text-decoration: none;font-size: 1.5em;padding: 5px;position: absolute;transition: 0.3s;}
.share-container a:hover{font-size:2rem;}
.share-container .fa-facebook{color: #007bff;left: 3px;top: 3px;}
.share-container .fa-twitter{color: #55ACEE;top: 22px;left: 43px;}
.share-container .fa-linkedin{color: #007bb5;top: 56px;left: 72px;}
.share-container .fa-pinterest{color: #dc3545;top: 42%;left: 80px;}
.share-container .fa-envelope{color: #6c757d;top: 133px;left: 73px;}
.share-container .fa-pencil-ruler{color: #20c997;top: 191px;left: 6px;}
.share-container .fa-whatsapp{color: #28a745;top: 168px;left: 52px;}
.share-container .fa-times{top: 29%;background: rgba(0,0,0,0.1);clip-path: circle(50% at 0 50%);padding: 23px 0 0px 5px;width: 60px;height: 49px;color: #6c757d;display: none;}
#openShareBtn{top: 42%;position: fixed;z-index: 1;background: rgba(0,0,0,0.15);clip-path: circle(50% at 0 50%);padding: 23px 0 0px 5px;width: 60px;height: 49px;color: #6c757d;text-decoration: none;left: 0px;transition: 0.3s;}

Save the code and your share buttons are ready to use.