Home CSS / HTML / Javascript / Widget

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(http://2.bp.blogspot.com/-JUU52V5MYVo/U_A3giibA_I/AAAAAAAAHCM/SzeQhUA-Bxo/s20/g%2B.png) no-repeat center}
.mbagoogle-plus:active{box-shadow:0 1px 0 0 #43454c}
.mbalinkedin{background:#1aace3 url(http://4.bp.blogspot.com/-QMNlNpoulTE/U_BXjWZny7I/AAAAAAAAHCc/-EfrIknqbWo/s20/in.png) no-repeat center}
.mbalinkedin:active{box-shadow:0 1px 0 0 #12a4db}
.mbapinterest{background:#f16261 url(http://4.bp.blogspot.com/-vOmei_tL7Jk/U_BY4sC_jYI/AAAAAAAAHCo/EkqbJL7hvJg/s20/pinterest.png) no-repeat center}
.mbapinterest:active{box-shadow:0 1px 0 0 #e85756}
.mbastumbleupon{background:#fdaf40 url(http://3.bp.blogspot.com/-VtXmJrq9NWo/U_BZpBmH5gI/AAAAAAAAHCw/2B-pqn5B3Wk/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...

Read Also:

No comments

Post a Comment

to Top