How To Add an Expandable Social Sharing Widget to Blogger

Today We shows us how to add an expandable social sharing widget to your Blogger site, allwing you and your readers to drive more traffic to your blog. Although this widget is built with HTML, CSS, jQuery, Javascript, and XML, it won’t affect your blog’s loading speed.

Let’s get started:

• Login to your Dashboard, then go to Template >> Editor.
• Using CTRL + F, locate </head> and paste the following code above it:

<script src='http://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=='none')?'inline-block':'none';

 }

 $(document).ready(function(){

 $("#social-expand").click(function(){

 $("#expand-plus").toggle();

 $("#expand-minus").toggle();

 });

 });

 </script>

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>

 <div class='social-div'>

 <a  class='facebook' expr:href='&quot;  http://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;http://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;  http://www.stumbleupon.com/submit?url=&quot; + data:post.url'  id='stumbleupon' target='_blank'>

 <img src='https://googledrive.com/host/0B8D3MQmcZTyvc3pYZFhDLXlBNFk'/>

 </a> </div>

 <script>

 $('.Twitter, .facebook, #google-plus, #stumbleupon').click(function(event) {

 var width  = 575,

 height = 400,

 left   = ($(window).width()  - width)  / 2,

 top    = ($(window).height() - height) / 2,

 url    = this.href,

 opts   = 'status=1' +

 ',width='  + width  +

 ',height=' + height +

 ',top='    + top    +

 ',left='   + left;

 window.open(url, '.Twitter, .facebook, #google-plus, #stumbleupon', 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>

• Click on Save.

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