Cara Memasang Sosial Sharing Blog Dengan New Mashable Mashshare

Kali ini saya akan memberikan tutorial mengenai Cara Memasang Sosial Sharing Blog Dengan New Mashable Mashshare yang barangkali Anda sedang mencari-cari tutorial ini. Share button yang saya bagikan ini terdiri dari tiga jaringan social media yang populer yaitu google +, facebook dan twitter disertai dengan box count yang terletak di bawah postingan.

Dengan adanya tombol share di blog Anda juga dapat meningkatkan pengunjung blog Anda. Mengapa ? karena jika Anda memasang tombol share pada blog Anda sama saja Anda mempermudah pengunjung blog Anda untuk membagikan artikel Anda ke social media seperti google plus, facebook dan twitter. Baik langsung saja simak tutorial dan caranya di bawah ini.

CARA Memasang Sosial Sharing Blog Dengan New Mashable Mashshare 

1. Login ke Blogger > Template > Klik Edit HTML > Letakkan kode CSS di bawah ini tepat sebelum kode ]]></b:skin> atau </style>

 #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} 

2. Setelah itu anda taruh kode dibawah ini tepat di bawah kode <data:post.body/> atau bisa juga diletakkan di bawah <div class='post-footer'>

 <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> 

3. Kemudian salin kode JavaScript di bawah ini lalu letakkan di atas kode </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>