How to Add Expandable Social Media Sharing Widget into Blogger

Here I Will show you how you can add an expandable social media sharing widget to your Blogger blog. Social media sharing widget allow you and your readers to drive more traffic to your blog by sharing blog post to social sites.

Although this widget is built with HTML, CSS, jQuery, Javascript, and XML, SO it won’t affect your blog’s loading speed.

How to Add Expandable Social Meadia Sharing Widget

Let’s get started:

• First Login to your blogger Dashboard.
• Now go to Template >> Editor.
• Now you have to find </head> tag and paste the bellow code just befor </head> . You can easily find by Using CTRL + F, and locate </head>

<script src='https://code.jquery.com/jquery-1.9.1.js'/>
<link href='https://googledrive.com/host/0B8D3MQmcZTyvZllGZW55UGhJM0k' rel='stylesheet' type='text/css'/>
<script>
function toggle(d)
{
var o=document.getElementById(d);
o.style.display=(o.style.display==&#39;none&#39;)?&#39;inline-block&#39;:&#39;none&#39;;
}
$(document).ready(function(){
$(&quot;#social-expand&quot;).click(function(){
$(&quot;#expand-plus&quot;).toggle();
$(&quot;#expand-minus&quot;).toggle();
});
});
</script>

• And now Using CTRL + F, locate <b:if cond=’data:blog.metaDescription == &quot;&quot;’> and paste the bellow code above it:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='social-div'>
<a class='facebook' expr:href='&quot; https://www.facebook.com/sharer.php?u=&quot; + data:post.url' id='socialshare' target='_blank'>
<img src='https://googledrive.com/host/0B8D3MQmcZTyvN1kzV3lfS2h6NW8' style='margin-right:8px;margin-bottom:-7px;margin-left:-5px;'/>
Share on Facebook
</a>
<a class='Twitter' expr:href='&quot;https://twitter.com/share?text=&quot; + data:post.title' id='socialshare' target='_blank'>
<img src='https://googledrive.com/host/0B8D3MQmcZTyvVXp2Qm5OSzRMUmM' style='margin-right:8px;margin-bottom:-5px;margin-left:-5px;'/>
Share on Twitter
</a>
<div id='expand-social' style='display:none;'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' id='google-plus' target='_blank'>
<img src='https://googledrive.com/host/0B8D3MQmcZTyvV0NHX0xLXzEwc1U'/>
</a>
<a expr:href='&quot; https://www.stumbleupon.com/submit?url=&quot; + data:post.url' id='stumbleupon' target='_blank'>
<img src='https://googledrive.com/host/0B8D3MQmcZTyvc3pYZFhDLXlBNFk'/>
</a> </div>
<script>
$(&#39;.Twitter, .facebook, #google-plus, #stumbleupon&#39;).click(function(event) {
var width = 575,
height = 400,
left = ($(window).width() - width) / 2,
top = ($(window).height() - height) / 2,
url = this.href,
opts = &#39;status=1&#39; +
&#39;,width=&#39; + width +
&#39;,height=&#39; + height +
&#39;,top=&#39; + top +
&#39;,left=&#39; + left;
window.open(url, &#39;.Twitter, .facebook, #google-plus, #stumbleupon&#39;, opts);
return false;
});
</script>
<div class='share-toggle'>
<div id='social-expand' onClick='toggle(&apos;expand-social&apos;);'>
<div class='plus-div'>
<a id='expand-plus'> + </a>
</div>
<div class='minus-div'>
<a id='expand-minus'> - </a>
</div>
</div>
</div>
</div>
</b:if>

• Now Click on Save.

Your expandable social sharing widget should be installed and working now.