Mashable Mashshare Social Media Sharing Widget For Blogger V2

Here it is! "Mashable Mashshare Social Sharing Widget for Blogger v2"

1. Intro
2. Demo
3. HTML
4. CSS
5. Script
6. Final Words

• Prev
• Next

1. Introduction

   Now comes with a new and stylish look, with total shares counter - this thing has been made possible thanks to Sharrre, you can visit their website for more details. Enough with the introductions because nothing is more important than having this widget into your blog!

   
   

   Features

   Lightweight CSS
   Minified Script
   Improved HTML
   SEO friendly
   Fully Customizable
   Flat Design
   

   Requirements

   Jquery Library v1.2.3 or higher (?)
   

2. Demo

   Demo not available.

3. HTML

   Go to Blogger » Template » Backup your Template » and Edit HTML
    Search for <div class='post-footer-line post-footer-line-1'> then copy the following code right after it
   *you might not see <div class='post-footer-line post-footer-line-1'> in your template so please look for any similar code, and also you can paste the code anywhere you want the widget to be shown
   
   

   <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;https://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;https://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;https://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;https://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;https://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>
   

4. CSS

    Search for ]]></b:skin> then copy the following code above it
   
   

   #sharrrrre{float:left;margin:-10px 5px 0 0;padding:15px 15px 15px 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF10Yah8mDwslbwde3QJwQwI2CIhfHbsgEiCIyuvQtBr9mdWzqYAHVYCzF6ZNhQzzkpYQdjBNOGJ4xnmfNxE3dbiDA2t4yiPj7C8Q1pG4_EOKD_VkuR4jango5sqmG5U2M7CU39Qd3p8s/s1600/diagonal.png) no-repeat 100% 50%}.sharrre .count,.sharrre .share{display:block;text-align:center;text-decoration:none;width:100px;padding:0}.sharrre .count{font-weight:700;position:relative;line-height:40px;color:#7fc04c;font-size:50px}.sharrre .share{color:#666;font-size:10px;height:10px}.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,.share-toggle{display:inline-block;text-align:center}#socialshare{vertical-align:middle;font-size:16px;padding:14px 20px 15px;font-family:Raleway;margin-right:5px;-webkit-font-smoothing:antialiased;-webkit-text-rendering:optimizeLegibility}#socialshare:active{padding:15px 20px;margin-bottom:-1px}#socialshare:hover{opacity:.9}.share-toggle{position:relative;cursor:pointer;color:#fff}#socialshare,.share-toggle a{color:#fff;text-decoration:none}.share-toggle,.social-div{vertical-align:middle}#expand-social,#social-expand{display:inline-block;vertical-align:middle;position:relative}#expand-social{height:53px}#social-expand{top:0;left:0}.expand{box-shadow:0 3px 0 0 #c5bebe;background:#cdcccc;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;box-shadow:0 3px 0 0 #4671b5}.mbafacebook:active{box-shadow:0 1px 0 0 #4671b5}.mbatwitter{background:#63cef2;box-shadow:0 3px 0 0 #57c4e9}.mbatwitter:active{box-shadow:0 1px 0 0 #57c4e9}.mbagoogle-plus{box-shadow:0 3px 0 0 #43454c;background:#4d4f54 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJqORwwICE9f-6oIOKylljk8Mw9upzwmc4dEqcQ9hjR4nbtCfV1nEydx-rfrDM3m5CKrbENvrzT9AoYUHXQn0yDnBC9iGCcUqK20g-31UGCNa-LVqatFGVnnqNPwhLKJDceV8xNKTgpFY/s20/g+.png) no-repeat center}.mbagoogle-plus:active{box-shadow:0 1px 0 0 #43454c}.mbalinkedin{box-shadow:0 3px 0 0 #12a4db;background:#1aace3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Unwt0ataxl4l2Sh_2gHmYBaUWKpzXYAkZqV6h56ALz9bxmtgswKoJt4hBMThx-cIlp4caLyFp-PKjFcVTsT9x93m__xkrQZG3-FLPF23G6V-LkTjXiJjq74WbGv8hyphenhyphen3FBlY7WOVewss/s20/in.png) no-repeat center}.mbalinkedin:active{box-shadow:0 1px 0 0 #12a4db}.mbapinterest{box-shadow:0 3px 0 0 #e85756;background:#f16261 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPILC6gdCtozyxCE85QyVweVYfOhR1ohm77lnvatwo6xQYqG-W95Ak0-2Wru4srXSO4-6etz6YH5ejhog3ttPQvCwN2XEc_tDcT9cSqJtD_Li_D5Ji5gpvlRgow7FSuUs-usxNqCdnkA0/s20/pinterest.png) no-repeat center}.mbapinterest:active{box-shadow:0 1px 0 0 #e85756}.mbastumbleupon{box-shadow:0 3px 0 0 #f5a635;background:#fdaf40 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4ZcpaQC3t5pOZYqWzBdC9EWNxWuExJmkif6l72-h4Lul2Ua_LFvu8v-gDUx6cqZEPmsvAMRExxd8_nLuiU1D0OTwqkCz-asGiUNiDj1gV_63mfNIVFxFCHMV6-O8xIkTKfuVSezYYHYk/s20/stumble.png) no-repeat center}.mbastumbleupon:active{box-shadow:0 1px 0 0 #f5a635}

   
   

    Save your Template

5. Script

    Now search for </body> and just above it copy the following code
   
   

   <script src='https://c8e27177358b76154f67a92cab4608cc54cd08c0.googledrive.com/host/0B72-8N3aLQVmai0zWDl1U1AxeTQ'/>
   <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>
   

   
   

   Save your template

6. Final Words

   Hope you liked it. Express your thoughts by leaving a comment. Until next time, Thank you!