New Mashable Mashshare Social Sharing Widget For Blogger

Yeah! Here it is present. New Mashable Mashshare Social Sharing Widget For Blogger - in this session i will share a topic with you about Mashable Mashshare sharing widget for blogger. In this tutorial i shared this, how to add mashable mashshare in blogger.

This thing made by Sharrre (you can visit their website for further information). When i visit some website, then i see this type of widget. Although those websites are wordpress base. You know wordpress plugins are not supported in blogger. Recently i hard tried to make a Mashable Mashshare social sharing widget for blogger. I succeed but some resource are founded from internet those are freeware.

Now lets start this tutorial. Before starting work, please keep a backup file of your template for safety.

Go to Blogger Dashboard > Template > Edit HTML and copy past below CSS before
  ]]></b:skin>

 #sharrrrre{float:left;margin:0 5px 0 0;padding:8px;border-right:1px solid silver}
.sharrre .count{color:#7fc04c;font-weight:700;display:block;font-size:50px;position:relative;text-align:center;text-decoration:none;width:100px;line-height:40px;padding:0}
.sharrre .share{color:#666;display:block;font-size:10px;height:10px;text-align:center;text-decoration:none;width:100px;padding:0}
.social-div a{text-decoration:none!important;display:inline-block}
.social-div a img{display:inline-block;width:auto;height:auto;margin:0 8px 0 -5px;vertical-align:middle}
#socialshare{display:inline-block;vertical-align:middle;text-align:center;color:#fff;font-size:16px;padding:14px 20px 15px;text-decoration:none;font-family:Open Sans;margin-right:5px;-webkit-font-smoothing:antialiased;-webkit-text-rendering:optimizeLegibility;text-transform:uppercase}
#socialshare:active{padding:15px 20px;margin-bottom:-1px}
#socialshare:hover{opacity: 0.9;}
.share-toggle{position:relative;display:inline-block;cursor:pointer;vertical-align:middle;text-align:center;color:#fff}
.share-toggle a{color:#fff;text-decoration:none;}
.social-div{vertical-align:middle;margin: 25px;}
#expand-social{display:inline-block;position:relative;vertical-align:middle;height:53px}
#social-expand{display:inline-block;vertical-align:middle;position:relative;top:0;left:0}
.expand{background:#FF4949;position:relative;width:40px;height:40px;line-height:40px;font-size:200%}
.expand:active{box-shadow:0 1px 0 0 #c5bebe;height:41px;margin-bottom:-1px}
.expand:hover{opacity:.9}
.expand-minus{display:none}
.socialshare2{width:50px;height:50px;display:inline-block}
.socialshare2:active{height:51px;margin-bottom:-1px}
.socialshare2:hover{opacity:.9}
.mbafacebook{background:#507bbf}
.mbafacebook:active{box-shadow:0 1px 0 0 #4671b5}
.mbatwitter{background:#63cef2}
.mbagoogle-plus{background:#4d4f54 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCLGQ_p4WRez20qhWtTPh1-xsC6JqRruBnVQM5uJZDQG7YWejC15vPZmN2D_oevXAw8oypM_FhCCurlpfwTy9zb2Z4TN-qNUY_YJVScNswVwsRRcE4XglsgRw3hEGd8uS-9n84K2oLXXg/s20/g+.png) no-repeat center}
.mbagoogle-plus:active{box-shadow:0 1px 0 0 #43454c}
.mbalinkedin{background:#1aace3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifMJ9WhWhUvdijBq5MNHfoSdA9QEhcH3qSkApjFHoW128k36ujx6YBZLGFJfCRwp9FPYYFTz4owJXnxCkEa8rgUTrxQs6YJCE0hStcl8J9bER-iz_BMVV2PqzaXsHYpCJOIwDoQV1UW0Q/s20/in.png) no-repeat center}
.mbalinkedin:active{box-shadow:0 1px 0 0 #12a4db}
.mbapinterest{background:#f16261 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbHIp7tDVsMp80y53dKvmIzLqj11wZdrcW-SSCeqF9znIBu8p5Gt0mmjlr4YlnniJoAlMLwsAYoAZV6O3YP_CAF8IovyZm7HcPBTW2EqfAm7rOkYo-fINuLFFJumPuytyGOIaYSsIDDwg/s20/pinterest.png) no-repeat center}
.mbapinterest:active{box-shadow:0 1px 0 0 #e85756}
.mbastumbleupon{background:#fdaf40 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDqq8KEzrncKmhwugK5cJy85JdA0Hs8itLjlJ-gqUKyodrQW-EM8CUppcg9CJDoLjRspMkL3AzOvOz_DYts3m0x_nPifrh6VUbemkTwuRjkHbuW3j96DgzabXqLiF0YuPzSBTUvHmhYe4/s20/stumble.png) no-repeat center}
.mbastumbleupon:active{box-shadow:0 1px 0 0 #f5a635} 

Now Copy past below code right after <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='social-div'>
<div id='sharrrrre'>
  <div data-title='SHARES' id='shareme'/>
</div>
<div style='display: inline-block; margin-bottom: 20px;'>
 <a class='mbafacebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' id='socialshare' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
 <img src='https://googledrive.com/host/0B8D3MQmcZTyvN1kzV3lfS2h6NW8'/>
 Share on Facebook
 </a>
 <a class='mbatwitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' id='socialshare' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
 <img src='https://googledrive.com/host/0B8D3MQmcZTyvVXp2Qm5OSzRMUmM'/>
 Share on Twitter
 </a>
</div>
<div id='expand-social' style='display:none;'>
<a class='socialshare2 mbagoogle-plus' data-title='Google+' expr:href='&quot;https://plus.google.com/u/0/share?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
 </a>
<a class='socialshare2 mbalinkedin' data-title='Linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;source=&quot; + data:blog.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' target='_blank'>
 </a>
<a class='socialshare2 mbastumbleupon' data-title='Stumble-Upon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
 </a>
<a class='socialshare2 mbapinterest' data-title='Pin it' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
 </a>
</div>
<div class='share-toggle'>
<div id='social-expand' onClick='toggle(&apos;expand-social&apos;);'>
<div class='expand-plus expand'>+</div>
<div class='expand-minus expand'>-</div>
</div>
</div>
  </div>
</b:if>

Now last step. Copy past below Javascript before </body>

<script src='https://cdn.rawgit.com/msdesign92/ms-design/master/mashable-share.js'/>
<script type='text/javascript'>
 $(function(){    
    $(&#39;#shareme&#39;).sharrre({
  share: {
    googlePlus: true,
    facebook: true,
    twitter: true,
    stumbleupon: true,
    linkedin: true,
    pinterest: true
  },
  enableTracking: true,
      enableHover: false,
});
  });
</script>
<script type='text/javascript'>
function toggle(d)
{
$(&quot;#&quot; + d).animate({width:&#39;toggle&#39;},400);
}
$(document).ready(function(){
$(&quot;#social-expand&quot;).click(function(){
$(&quot;.expand-plus&quot;).toggle();
$(&quot;.expand-minus&quot;).toggle();
});
});
</script>

Now Save Template. 

Hope you like it. If you found any problem then feel free to leave a comment and if you think our posts are helpful then do not forget share our posts. Thanks...