Beranda Blog & Website Cara Membuat Share With Counter Pada Blog

Cara Membuat Share With Counter Pada Blog

167
0
BERBAGI
membuat share counter untuk blog

Kali ini saya akan membagikan Cara Membuat Share With Counter Pada Blog. Karena banyak yang mencari tutorialnya jadi saya akan bagikan disini. Tombol share ini akan berguna sekali bila sobat ingin mengetahui berapa banyak yang share artikel anda pada social media seperti Facebook, Twitter, dan Google Plus. Untuk sementara saya hanya menghitung untuk ke 3 social media tersebut.

Share With Counter ini sudah banyak sekali yang menggunakannya khususnya pada pengguna WordPress, dan saya tertarik untuk membuatnya pada blogger karena memang sangat bermanfaat. Nah bagi yang ingin memasangnya juga silahkan simak tutorialnya di bawah ini.

Cara Membuat Share With Counter Pada Blog

  • Seperti biasa silahkan login terlebih dulu ke Blogger.com
  • Masuk ke Template > Edit HTML
  • Cari kode ]]></b:skin> gunakan CTRL + F agar pencarian lebih mudah.
  • Lalu tambahkan kode CSS dibawah ini tepat di atas kode ]]></b:skin>.
    • .share-count {
      float:left;
      text-align:center;
      font-size:16px
      }
      .tombol-share a {
      color:#fff;
      height:35px;
      float:left;
      line-height:35px;
      font-size:15px;
      padding:5px 20px
      }
      .tombol-share .tw {
      background:#1da1f2
      }
      .tombol-share .fb {
      background:#3a5795
      }
      .tombol-share .tw:hover {
      background:#44B8FF
      }
      .tombol-share .fb:hover {
      background:#5E78B1
      }
      .tombol-share a {
      margin-left:10px;
      color:#fff
      }
      .arsitektour-count {
      padding:0 20px
      }
  • Tambahkan kode HTML di bawah ini tepat di atas kode <data:post.body/>.
    • <div class='arsitektour-count'>
      <div class='share-count'>
      <div class='count'>0</div>
      <span class='count-text'>Shares</span>
      </div>
      <div class='tombol-share'>
      <a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/> Facebook</a>
      <a class='tw' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/> Twitter</a>
      </div>
      <script type='text/javascript'>
      var urlshare = &#39;<data:post.url/>&#39;;
      </script>
      <div class='clear'/>
      </div>
  • Terakhir tambahkan juga kode JavaScript ini tepat di atas kode </body>.
    • <script class='jshilang' type='text/javascript'>
      //<![CDATA[
      eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p}('2 A(e){e.k||(e.k=0),4.7+=e.k,8()}2 x(e){4.7+=w(e),8()}2 8(){$(".S").p(4.7)}2 L(e){O(2(){5 t=w(e.y);$(".N-E b").Z().p(q(t))},15)}2 q(e,t,a,n){e=(e+"").C(/[^0-9+\\-R.]/g,"");5 r=m(+e)?+e:0,o=m(+t)?6.M(t):0,l="u"==v n?",":n,i="u"==v a?".":a,c="",s=2(e,t){5 a=6.11(10,t);h""+(6.z(e*a)/a).1b(t)};h c=(o?s(r,o):""+6.z(r)).1s("."),c[0].j>3&&(c[0]=c[0].C(/\\B(?=(?:\\d{3})+(?!\\d))/g,l)),(c[1]||"").j<o&&(c[1]=c[1]||"",c[1]+=P Q(o-c[1].j+1).D("0")),c.D(i)}5 4=2(){2 e(e){5 t=f.T("U");t.V=!0,t.W=e,f.X.Y(t)}h{F:2(t,a){e("G://12.y.H/?13="+t+"&I="+a)},J:2(t,a){e("G://E.16.17/18.19?1a="+t+"&I="+a)},7:0}}();4.F(K,"A"),4.J(K,"x");f.1c("<b 1d=\\"1e-1f:1g;1h:1i;1j-1k:1l;1m:1n;\\"><a 1o=\\"1p://1q.1r.H/\\"> 14</a></b>");',62,91,'||function||socialGetter|var|Math|initCount|updateShareCount|||span||||document||return||length|shares||isFinite|||html|number_format||||undefined|typeof|parseInt|getGplusCallback|facebook|round|facebookCallback||replace|join|share|getFacebookCount|https|com|callback|getGplusCount|urlshare|socialCallback|abs|total|setTimeout|new|Array|Ee|count|createElement|script|async|src|body|appendChild|last||pow|graph|id|Arsitektour|1e3|yandex|ru|gpp|xml|url|toFixed|write|style|font|size|0px|display|block|text|align|right|visibility|hidden|href|http|www|arsitektour|split'.split('|'),0,{}))
      //]]>
      </script>
  • Selesai, lalu anda Save/Simpan dan Lihat hasilnya.

Itulah sedikit tutorial mengenai Cara Membuat Share With Counter Pada Blog. Bagi yang kesulitan silahkan login terlebih dahulu kemudian bisa bertanya pada chat yang saya sedian. Sekian artikel dari saya dan semoga bermanfaat. Jangan lupa untuk selalu berbagi satu kebaikan dengan cara share atau bagikan artikel ini ke teman-teman di sosial media, cukup dengan klik tombol SHARE disitus ini, terimakasih!

LEAVE A REPLY

Please enter your comment!
Please enter your name here