Home Blogger CSS JavaScript Script Cara Membuat Share Button with Counter

Cara Membuat Share Button with Counter

Diterbitkan


Kali ini saya akan memberikan tutorial tentang Cara Membuat Tombol Berbagi dengan Jumlah yang dibagikan, atau Share Button with Count. Yo, langsung saja ke intinya

1, Login ke Blogger kalian > Template > Edit HTML
pastikan di blog kalian sudah mempunyai Fontawesome, Biasanya yang menggunakan template responsive atau html5 sudah ada. Tapi, jika 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 setelah <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 bisa kalian pada Blog ini,
Jika mengalami masalah silahkan komen dibawah.

Related Posts

myabdurrahim ID

Personal Blog.

Next Post
Previous Post

Berikan komentar anda sesuai Topik yang ada.

Langganan: Posting Komentar (Atom)