Cara Menciptakan Share Button With Counter

Kali ini aku akan menawarkan tutorial wacana Cara Membuat Tombol Berbagi dengan Jumlah yang dibagikan, atau Share Button with Count. Yo, pribadi saja ke intinya

1, Login ke Blogger kalian > Template > Edit HTML
pastikan di blog kalian sudah memiliki Fontawesome, Biasanya yang memakai template responsive atau html5 sudah ada. Tapi, kalau belum silahkan kalian masukkan ke blog kalian

 <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Tambah CSS dibawah ini sebelum </style>

 /* CSS Share Button */ .abdurrahim_share_btn{position:relative;z-index:2;width:100%;padding:20px 0;display:inline-block;margin:20px auto;border-bottom:2px solid rgba(0,0,0,.08)} .abdurrahim_share_btn .share_blog {display:block;} .abdurrahim_share_btn .share_blog .wrap {text-align:center;margin:0 auto;display:inline-block;min-width:41px;} .abdurrahim_share_btn .share_blog .wrap1 {display:inline-block;width:31px;float:left;} .abdurrahim_share_btn .share_blog ul {margin:0;padding:0;} .abdurrahim_share_btn .share_blog ul li{list-style:none;list-style-type:none;padding:0;margin:2px;float:left;width:16%;max-width:115px;display:inline-block;font-size:13px;overflow:hidden;text-align:left;height:32px;line-height:32px;color:#fff;border-radius:3px;transition:all .4s} .abdurrahim_share_btn .share_blog ul li a,.abdurrahim_share_btn .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none} .abdurrahim_share_btn .share_blog ul li .fa{color:#fff;font-size:16px;font-weight:normal;font-family:FontAwesome;display:inline-block;text-align:center;padding:0;height:32px;line-height:inherit;width:30px;background-color:rgba(0,0,0,.05)} .abdurrahim_share_btn .share_blog .btn_fb{background:#3a579a}.abdurrahim_share_btn .share_blog .btn_fb:hover{background:#314a83}.abdurrahim_share_btn .share_blog .btn_twtr{background:#00abf0}.abdurrahim_share_btn .share_blog .btn_twtr:hover{background:#0092cc}.abdurrahim_share_btn .share_blog .btn_gplus{background:#df4a32}.abdurrahim_share_btn .share_blog .btn_gplus:hover{background:#be3f2b}.abdurrahim_share_btn .share_blog .btn_pntrst{background:#cd1c1f}.abdurrahim_share_btn .share_blog .btn_pntrst:hover{background:#ae181a}.abdurrahim_share_btn .share_blog .btn_linkdin{background:#2554BF}.abdurrahim_share_btn .share_blog .btn_linkdin:hover{background:#224EB4} .abdurrahim_share_btn .share_blog .share.h6{font-size:10px;font-weight:700;text-align:center;color:#999;border-top:1px solid #e3e3e3;padding:8px 0 0;margin:8px auto 0;line-height:8px;width:42px;letter-spacing:.5px} .abdurrahim_share_btn .share_blog .share{margin:5px 5px 0 0;overflow:visible;width:95px} .abdurrahim_share_btn .share_blog .share .count.h4{font-size:22px;font-weight:700;text-align:center;color:#ff8349;line-height:16px;margin:-8px 0 0;min-height:15px} .abdurrahim_share_btn .share_blog .btn_fb .share-btn,.abdurrahim_share_btn .share_blog .btn_twtr .share-btn,.abdurrahim_share_btn .share_blog .btn_gplus .share-btn,.abdurrahim_share_btn .share_blog .btn_pntrst .share-btn,.abdurrahim_share_btn .share_blog .btn_linkdin .share-btn{position:relative;color:#fff;display:inline-block;text-align:center;font-weight:700;font-size:11px;float:right;min-width:12px;padding:0 8px 0 0}  @media only screen and (max-width: 979px) {  .abdurrahim_share_btn .share_blog .btn_linkdin {width:34px;} .abdurrahim_share_btn .share_blog .btn_fb .share-btn,.abdurrahim_share_btn .share_blog .btn_twtr .share-btn,.abdurrahim_share_btn .share_blog .btn_linkdin .share-btn,.abdurrahim_share_btn .share_blog .btn_gplus .share-btn,.abdurrahim_share_btn .share_blog .btn_pntrst .share-btn{display:none}}  @media only screen and (max-width:768px) { .abdurrahim_share_btn .share_blog ul li a,.abdurrahim_share_btn .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}.abdurrahim_share_btn .share_blog .wrap{min-width:34px}.abdurrahim_share_btn .share_blog .btn_linkdin,.abdurrahim_share_btn .share_blog .btn_pntrst{width:30px}.abdurrahim_share_btn .share_blog ul li{margin:1px 3px}}  @media only screen and (max-width:479px) {  .abdurrahim_share_btn .share_blog .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}.abdurrahim_share_btn .share_blog ul li{width:25px;margin:2px;}.abdurrahim_share_btn .share_blog .wrap{display:none}.abdurrahim_share_btn .share_blog ul li .fa{width:25px}}

3. Lalu Tambahkan Javascript dibawah ini sebelum </body>

 <script type='text/javascript'> //<![CDATA[ // Share Button with Counter   $(document).ready(function(){var t=$("link[rel=canonical]").attr("href");$.getJSON("http://tbncounts-sharecounts.rhcloud.com/?url="+encodeURIComponent(t)+"&callback=?",function(t){shares=t.shares,$(".count").each(function(t,e){service=$(e).parents(".share-btn").attr("data-service"),count=shares[service],count>1e3&&(count=(count/1e3).toFixed(1),count>1e3?count=(count/1e3).toFixed(1)+"M":count+="k"),$(e).html(count)})})}); //]]> </script>

4. dan masukkan script Sharenya dibawah ini sesudah <data:post.body/>

 <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='abdurrahim_share_btn'> <div class='share_blog'> <ul> <li class='share'> <div class='share-btn' data-service='total'>   <div class='count h4'/> <div class='share h6'>SHARES</div> </div> </li>   <li class='btn_fb'><a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'> <div class='wrap1'><i class='fa fa-facebook'/> </div>   <div class='wrap'>Share</div>   <div class='share-btn' data-service='facebook'>         <div class='count'/></div>   </a>   </li>   <li class='btn_twtr'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via www.abdurrahim.id - &quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>   <div class='wrap1'><i class='fa fa-twitter'/></div>   <div class='wrap'>Tweet</div>   <div class='share-btn' data-service='twitter'>         <div class='count'/></div>   </a>   </li>   <li class='btn_gplus'><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'>   <div class='wrap1'><i class='fa fa-google-plus'/></div>   <div class='wrap'>Share</div>   <div class='share-btn' data-service='google'>         <div class='count'/></div>   </a>   </li>   <li class='btn_linkdin'><a 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;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'>   <div class='wrap1'><i class='fa fa-linkedin'/></div>   <div class='wrap'>Share</div>   <div class='share-btn' data-service='linkedin'>         <div class='count'/></div>   </a> </li> </ul> </div> </div> </b:if>

Untuk Demonya dapat kalian pada Blog ini,
Jika mengalami problem silahkan komen dibawah.