Selasa, 07 Februari 2017

Cara Memasang Share Button with Counter

Share Your Article to Boost Traffic & Popularity Your Web or Blog

Alfin Media - Malam hari ini saya akan memberikan sebuah tutorial " Cara Memasang Share Button with Counter Terbaru " Share Button kali ini terdapat penghitungnya atau counter. Pasti kalian sudah sering melihat share button hampir semua website mempunyai share button. Share button itu sangat bermanfaat bagi kita dan pengunjung karena pengunjung bisa membagikan konten kita dan kita mendapat traffic yang banyak dan popularitas web atau blog meningkat.

Widget ini mengandung " Fontawesome " harap kalian memasangnya terlebih dahulu jika belum memasangnya

 Cara Memasang Share Button with Counter


1. Seperti biasa kalian login ke dashboard blogger > kemudian template editor. Masukan kode di bawah ini sebelum ]]></b:skin> atau </style> .

.popular_share_button_counter{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)}
.popular_share_button_counter .share_blog {display:block;}
.popular_share_button_counter .share_blog .wrap {text-align:center;margin:0 auto;display:inline-block;min-width:41px;}
.popular_share_button_counter .share_blog .wrap1 {display:inline-block;width:31px;float:left;}
.popular_share_button_counter .share_blog ul {margin:0;padding:0;}
.popular_share_button_counter .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}
.popular_share_button_counter .share_blog ul li a,.popular_share_button_counter .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none}
.popular_share_button_counter .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)}
.popular_share_button_counter .share_blog .btn_fb{background:#3a579a}.popular_share_button_counter .share_blog .btn_fb:hover{background:#314a83}.popular_share_button_counter .share_blog .btn_twtr{background:#00abf0}.popular_share_button_counter .share_blog .btn_twtr:hover{background:#0092cc}.popular_share_button_counter .share_blog .btn_gplus{background:#df4a32}.popular_share_button_counter .share_blog .btn_gplus:hover{background:#be3f2b}.popular_share_button_counter .share_blog .btn_pntrst{background:#cd1c1f}.popular_share_button_counter .share_blog .btn_pntrst:hover{background:#ae181a}.popular_share_button_counter .share_blog .btn_linkdin{background:#2554BF}.popular_share_button_counter .share_blog .btn_linkdin:hover{background:#224EB4}
.popular_share_button_counter .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}
.popular_share_button_counter .share_blog .share{margin:5px 5px 0 0;overflow:visible;width:95px}
.popular_share_button_counter .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}
.popular_share_button_counter .share_blog .btn_fb .share-btn,.popular_share_button_counter .share_blog .btn_twtr .share-btn,.popular_share_button_counter .share_blog .btn_gplus .share-btn,.popular_share_button_counter .share_blog .btn_pntrst .share-btn,.popular_share_button_counter .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) {
 .popular_share_button_counter .share_blog .btn_linkdin {width:34px;}
.popular_share_button_counter .share_blog .btn_fb .share-btn,.popular_share_button_counter .share_blog .btn_twtr .share-btn,.popular_share_button_counter .share_blog .btn_linkdin .share-btn,.popular_share_button_counter .share_blog .btn_gplus .share-btn,.popular_share_button_counter .share_blog .btn_pntrst .share-btn{display:none}}
 @media only screen and (max-width:768px) {
.popular_share_button_counter .share_blog ul li a,.popular_share_button_counter .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}.popular_share_button_counter .share_blog .wrap{min-width:34px}.popular_share_button_counter .share_blog .btn_linkdin,.popular_share_button_counter .share_blog .btn_pntrst{width:30px}.popular_share_button_counter .share_blog ul li{margin:1px 3px}}
 @media only screen and (max-width:479px) {
 .popular_share_button_counter .share_blog .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}.popular_share_button_counter .share_blog ul li{width:25px;margin:2px;}.popular_share_button_counter .share_blog .wrap{display:none}.popular_share_button_counter .share_blog ul li .fa{width:25px}}

2. Setelah kalian berhasil memasang CSS di atas. Kalian masukan kode di bawah ini baik di atas atau di bawah <data:post.body/> atau <div class='post-footer'> .

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='popular_share_button_counter'>
<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 @Auzikri_Alfin - &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_pntrst'><a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' 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-pinterest'/></div>
  <div class='wrap'>Pin</div>
  <div class='share-btn' data-service='pinterest'>
        <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>

3. Sesudah kalian memasang semua kode di atas. Terakhir kalian tinggal memasang counternya. Taruhlah kode di bawah ini tepat di atas </body> .

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var t=$("link[rel=canonical]").attr("href");$.getJSON("http://sharecount.twistblogger.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>
</b:if>

4.  Save Template kalian dan lihatlah pada postingan kalian apakah sudah terlihat atau belum.

Kalian ganti @Auzikri_Alfin dengan username twitter kalian.

Artikel Terkait

Saya ini seorang blogger dari Indonesia yang masih nubie :v , salam kenal dan sehat selalu.