New Mashable Mashshare Social Sharing Widget For Blogger

New Mashable Mashshare Social Sharing Widget For Blogger

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.

Also Read: Flat Social Share Button for 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.

Blogtyrant  published a review about Mashable Mashshare. Although he published this review about wordpress plugin. But you found a main features about this widget from his review.


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/AVvXsEjiWywrssRbWsUO5iFSYdt-N7084dyQt4lV0VEqGY8V-safcL7bXffCb5YsNQFHe7VVvWDTI4IbDhcoLvthHamaZoXPvNomZXZqQrK9crV_y7CJY8nLMbVbPOckBXt3vsbDlOfT4Mqz0tE/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/AVvXsEi0whue_wSP7AvOcsrw8LAftVC21njEUdUycYMoiggGp130pdUP4OzXlTu_Kd0NHggMyd9b96XA1vERNMuur-AbPLphYDc6Oo8why5QKnOn5ce8CGeHW36Eo-CV-JOExws3rlifdPYsIhE/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/AVvXsEg2szhqF69YMjXNOBW5mjYGcIIK5MEXGNaLVxJPRb-AMfuGUsz2e46b2dHxrTVIMgRjyJ6Qtg5eB42X1jMPlHOcvVz7r1YzsRd8mpAB__F95ncajWPqqDrTQVoI3g9es9Rdz-MFRg5HIAc/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/AVvXsEhqVCQeN3gLobVYwx0I2AU_RsWYdpm-aStC8FSBkQZy7sxSqSpQHk9YxrLsYWRzj0AwXtuCiCjAR4w3ucs1nTX641Fzpd4YmYdOqm0krLFayDfl9p2EWL511NEfx1-spKBvTIu7slRQLto/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...
Previous Post
Next Post

post written by:

TemplateMark better known as Template Market provides High quality free and premium Blogger templates. If you running a blog with Blogspot platform, then you can choose more than 20+ free blogger templates for your blog. TemplateMark provides free version of every template. You can highly choice TemplateMark for your digital blog.

1 comment: