Membuat Tombol Share dengan Counter untuk Blogger

Sosial Media Share memang sangat banyak digunakan oleh orang-orang yang ingin membagikan review produk atau hasil karyanya kepada orang-orang yang menggunakan sosial media. Di sini saya akan bagikan cara untuk membuat tombol share dengan counter atau penghitung pada blogger yang dimana ini akan memberi tahu anda seberapa banyak kah pengunjung yang telah men-share artikel anda ke sosial media.

Widget tombol social share yang saya bagikan ini menggunakan dua media social populer, yaitu tombol berbagi ke Twitter, dan tombol berbagi ke Facebook. Widget social button ini sangat cocok diletakkan di bawah postingan.

Widget seperti ini banyak dipakai oleh para blogger, karena navigasinya yang sangat mudah dan ringan. Ditambah dengan penghitungnya yang akan membuat tertarik para pengunjung untuk segera berbagi enggunakan akun social media mereka terhadap postingan-postingan yang mereka sukai.

Cara Membuat Tombol Share with Counter for Blogger

1. Login Blogger

2. Template - Edit HTML

3. Simpan kode di bawah ini sebelum kode ]]></b:skin>

/* Share Button Farhanweb */
.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
}
.ouma-count {
padding:0 20px
}

4. Simpan kode di bawah ini sebelum kode <data:post.body/>

<div class='ouma-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>

5. Simpan kode di bawah ini sebelum 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[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);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|Bloggerku|1e3|yandex|ru|gpp|xml|url|toFixed|write|style|font|size|0px|display|block|text|align|right|visibility|hidden|href|http|www|bloggerku|split'.split('|'),0,{}))
//]]>
</script>

Demikian, selamat mencoba