Membuat Share With Counter Pada Blogger

Membuat Share With Counter Pada Blogger - Kali ini bloggerku akan membagikan cara untuk membuat share with counter. Karena ada yang request tutornya jadi saya akan bagikan disini. Tombol share ini akan berguna bila sobat ingin mengetahui berapa banyak yang share artikel sobat pada social media seperti Twitter, Facebook, dan Google Plus. Untuk sementara hanya menghitung ke 3 social media tersebut.

Share With Counter ini sudah banyak sekali yang pakai khususnya pada Wordpress, dan saya tertarik untuk membuatnya pada blogger. karena memang sangat bagus :) . Nah bagi yang ingin memasangnya juga silahkan simak tutorialnya di bawah :)

Cara Memasang Share With Counter Pada Blogger

1. Seperti biasa sobat login dulu ke Blogger.com
2. Masuk ke Template > Edit HTML
3. Cari kode ]]></b:skin> , gunakan CTRL + F agar pencarian lebih mudah.
4. Lalu tambahkan kode 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
}
.bloggerku-count {
padding:0 20px
}

5. Tambahkan kode di bawah ini tepat di atas kode <data:post.body/>

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

6. Terakhir tambahkan juga kode ini tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,d){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--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[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 t(a){a.h.i||(a.h.i=0);4.8+=a.h.i;l()}2 u(a){4.8+=G(a);l()}2 l(){7.I(".F").Q=4.8}2 K(a,c,b,e){a=(a+"").x(/[^0-9+\\-R.]/g,"");a=w(+a)?+a:0;c=w(+c)?6.P(c):0;e="z"==y e?",":e;b="z"==y b?".":b;5 d="",f=2(a,c){5 b=6.L(10,c);k""+(6.A(a*b)/b).M(c)};k d=(c?f(a,c):""+6.A(a)).N("."),3<d[0].j&&(d[0]=d[0].x(/\\B(?=(?:\\d{3})+(?!\\d))/g,e)),(d[1]||"").j<c&&(d[1]=d[1]||"",d[1]+=O(c-d[1].j+1).r("0")),d.r(b)}5 4=2(){2 a(a){5 b=7.S("J");b.E=!0;b.D=a;7.H.C(b)}k{s:2(c,b){a("q://Z.1i.v/?T="+c+"&o="+b)},m:2(c,b){a("q://h.1h.1g/1f.1c?1d="+c+"&o="+b)},8:0}}();4.s(n,"t");4.m(n,"u");7.1e(\'<p 1a="1b-11:Y;X:U;V-W:12;13:18;"><a 19="17://16.14.v/"> 15</a></p>\');',62,81,'||function||socialGetter|var|Math|document|initCount|||||||||share|share_count|length|return|updateShareCount|getGplusCount|urlshare|callback|span|https|join|getFacebookCount|facebookCallback|getGplusCallback|com|isFinite|replace|typeof|undefined|round||appendChild|src|async|count|parseInt|body|querySelector|script|number_format|pow|toFixed|split|Array|abs|innerText|Ee|createElement|id|block|text|align|display|0px|graph||size|right|visibility|bloggerku|Bloggerku|www|http|hidden|href|style|font|xml|url|write|gpp|ru|yandex|facebook'.split('|'),0,{}))
//]]>
</script>

7. Selesai, lalu sobat Save/Simpan dan Lihat hasilnya.

Itulah cara untuk Memasang Share With Counter Pada Blogger. Bagi yang kesulitan bisa bertanya di kolom komentar yang disediakan :D .
Jangan lupa tinggalkan jejak di komentar yah.. :D

Semoga Bermanfaat.