Cara Membuat Like And Share Box Dengan Penghitung

Oleh Unknown

Friday, February 6, 2015

Bagikan :

Tweet

Masih banyak kawan-kawan blogger yang masih bingung bagaimana cara pemasangan Like box dan share box dengan penghitung (counter) yang dapat memperlihatkan jumlah like dan share dalam page atau halaman postingan. untuk mempermudahkanya admin akan membagikan step by step cara pemasangan counter box like and share button untuk blogspot, berikut adalah SS, Demo dan Script untuk pemasangan.

Screenshot

• DEMO

Untuk pemasanganya pertama pasang kode CSS berikut diatas kode ]]></b:skin> 

 .post-ontop{width:200px;height:90px;float:left;margin:0 20px 20px 0;padding:0;background:#fff}
.share-buttons-box {height: 67px;background: url() no-repeat 330px 10px;margin:20px 0 15px;overflow:hidden;}
.share-buttons{margin:0 0;height:67px;float:left}
.share-buttons .share{float:left;margin-right:10px;display:inline-block} 

Selanjutnya Pasang Script berikut di atas atau dibawah kode <data:post.body/> Bila ingin meletakkan share box diatas letakkan diatas namun bila ingin dibawah seperti demo pasang di bawah kode <data:post.body/> 

 <div class='share-buttons-box'>
  <div class='share-buttons'>
   <div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
   <div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
   <div class='share fbshare'><div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div>
   <div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
   <div class='share linkedin'><script src='//platform.linkedin.com/in.js' type='text/javascript'>
   lang: en_US </script><script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/></div>
  </div>
  </div>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script> 

Bila dalam Template kalian belum suport Facebook share, atau setelah kalian simpan like box dan share box facebook tidak muncul, pasang kode berikut di bawah kode </head>

 <div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;js.async=true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script> 

Oke seperti itulah cara pemasangan kode untuk script untuk share box dan like box seperti diatas, Thanks :)

Tag : Blogging, Widget