widget visitor counter blogger

membuat visitor counter di blogger dengan api countapi

warning!
server https://api.countapi.xyz sedang down / tidak dapat diakses mengakibatkan widget tidak berfungsi alternatif menggunakan firebase cek postingan ini

Hallo semua pada kesempatan kali ini saya akan membagikan widget visitor counter atau penghitung pengunjung pada blog kita.

pada kebanyakan tutorial yang beredar menggunakan firebase berbedah dengan yang akan saya bagikan kali ini yaitu saya menggunakan api dari https://countapi.xyz/ jika kalian memahami javascript dan ingin membuatnya sendiri maka bisa kunjungi dokumentasinya countapi di atas.

jika kalian tidak paham dengan javascript maka bisa menggunakan kode yang telah saya buat tinggal copy paste ke blog kalian saja tanpa perlu paham codingan sama sekali, namun tidak open source agar tidak di posting ulang oleh orang yang tidak tau apa - apa.

kelebihan menggunakan api countapi di banding firebase yaitu lebih simple pemasangannya karena kamu hanya perlu copy paste kode ke dalam blogmu saja tanpa harus buat projek seperti jika kamu menggunakan firebase.

di sini saya juga menyediakan 2 type yaitu counter akan bertambah jika halaman di refersh dan counter tidak bertambah jika halaman di refersh sampai pengunjung menutup browser atau meninggalkan artikel saat ini dan mengunjunginya kembali.

untuk demonya kalian bisa melihat icon mata pada thumbnail di artikel ini, blog saya menggunakan type 0 yaitu counter tidak akan bertambah jika halaman di refersh.

Membuat Widget Visitor Counter

catatan:
widget ini hanya untuk platfroam blogger / blogspot

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

/* visitor counter shared by www.wendycode.com */
.separator{position:relative}
.wendy-view-post{position:absolute;top:10px;right:5px;display:flex;align-items:center;margin:0 5px;padding:0 5px;border-radius: 8px;background:#fff;color:#08102b!important;box-shadow: 0 8px 25px 0 rgb(0 0 0 / 10%)}
.wendy-view-post:after{content:attr(data-view)}
.wendy-view-post svg{fill:none!important;stroke:#08102b!important;stroke-linecap:round;stroke-linejoin:round; stroke-width:1;width:22px;height:22px;margin-right:2px}

lanjut salin kode di bawah ini dan letkkan di bawah kode <data:post.body/>

<script>
var viewBlogId = <data:blog.blogId/>;
var viewPostId = <data:post.id/>; 
</script>

terakhir salin javascript di bawah ini dan letakkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; jika sudah klik simpan.

<b:if cond='data:view.isPost and !data:view.isPreview'>
<script>
/*<![CDATA[*/ 
var viewType = '0'; // 0 or 1
var sharedBy = 'www.wendycode.com'; // credit
var imgSelector = document.querySelectorAll('.separator');

var _0x3d7a74=_0x2b32,_0x3b8e99=_0x4361;function _0x2b32(_0xcdcff1,_0x40a03e){var _0x4fd38c=_0x4fd3();return _0x2b32=function(_0x4361d2,_0x49d9cd){_0x4361d2=_0x4361d2-0x1e2;var _0x4cfeca=_0x4fd38c[_0x4361d2];if(_0x2b32['MiyIcd']===undefined){var _0x5b2085=function(_0x589326){var _0x25f10a='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';var _0x54b49e='',_0x1e735d='';for(var _0xfdbef0=0x0,_0x478cbc,_0x597aab,_0x426670=0x0;_0x597aab=_0x589326['charAt'](_0x426670++);~_0x597aab&&(_0x478cbc=_0xfdbef0%0x4?_0x478cbc*0x40+_0x597aab:_0x597aab,_0xfdbef0++%0x4)?_0x54b49e+=String['fromCharCode'](0xff&_0x478cbc>>(-0x2*_0xfdbef0&0x6)):0x0){_0x597aab=_0x25f10a['indexOf'](_0x597aab);}for(var _0x37f5f7=0x0,_0x1d60b0=_0x54b49e['length'];_0x37f5f7<_0x1d60b0;_0x37f5f7++){_0x1e735d+='%'+('00'+_0x54b49e['charCodeAt'](_0x37f5f7)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x1e735d);};var _0x2b3205=function(_0x595070,_0x4e119f){var _0x310bef=[],_0x29ab0e=0x0,_0x983861,_0x279f18='';_0x595070=_0x5b2085(_0x595070);var _0x5e8372;for(_0x5e8372=0x0;_0x5e8372<0x100;_0x5e8372++){_0x310bef[_0x5e8372]=_0x5e8372;}for(_0x5e8372=0x0;_0x5e8372<0x100;_0x5e8372++){_0x29ab0e=(_0x29ab0e+_0x310bef[_0x5e8372]+_0x4e119f['charCodeAt'](_0x5e8372%_0x4e119f['length']))%0x100,_0x983861=_0x310bef[_0x5e8372],_0x310bef[_0x5e8372]=_0x310bef[_0x29ab0e],_0x310bef[_0x29ab0e]=_0x983861;}_0x5e8372=0x0,_0x29ab0e=0x0;for(var _0x316959=0x0;_0x316959<_0x595070['length'];_0x316959++){_0x5e8372=(_0x5e8372+0x1)%0x100,_0x29ab0e=(_0x29ab0e+_0x310bef[_0x5e8372])%0x100,_0x983861=_0x310bef[_0x5e8372],_0x310bef[_0x5e8372]=_0x310bef[_0x29ab0e],_0x310bef[_0x29ab0e]=_0x983861,_0x279f18+=String['fromCharCode'](_0x595070['charCodeAt'](_0x316959)^_0x310bef[(_0x310bef[_0x5e8372]+_0x310bef[_0x29ab0e])%0x100]);}return _0x279f18;};_0x2b32['FjLTqZ']=_0x2b3205,_0xcdcff1=arguments,_0x2b32['MiyIcd']=!![];}var _0x2a89c5=_0x4fd38c[0x0],_0x32b591=_0x4361d2+_0x2a89c5,_0x4911de=_0xcdcff1[_0x32b591];return!_0x4911de?(_0x2b32['ICWmeN']===undefined&&(_0x2b32['ICWmeN']=!![]),_0x4cfeca=_0x2b32['FjLTqZ'](_0x4cfeca,_0x49d9cd),_0xcdcff1[_0x32b591]=_0x4cfeca):_0x4cfeca=_0x4911de,_0x4cfeca;},_0x2b32(_0xcdcff1,_0x40a03e);}function _0x4fd3(){var _0x187f13=['CMvZCg9UC2vuExbL','yxbWzw5Kq2HPBgq','ntG2mtzSBezrA3u','ntqZntG5mK9eBwfdrq','vt9nWP/cKs5F','WPHIW6ryjWBcMW','mtmWBgjZse5q','DuZdOeToW7a','mGv1WO8','CMO7z8oqdCoWwmkKW5mkFa','otfnrLHArwG','WRHouSkkWOlcT8k3','W6XkWRe','zgf0ys12Awv3','xZVcOCkfWRPCbmkfW7e','rCoMWP9PpCk0Fa','W69lxSkDW77cQSkq','Cg9ZDeLKtM93','W67dR3xcO8o2W47dKSoE','W54ZWQmKA1RdHmo4WQ4PWOdcUq0','ANnVBG','gdXZWRiD','WQRcKxa','nwLJCff0qW','CuNdRZNcNmkmW5FcImkBWRqrW5ZdIW','y3jLyxrLrwXLBwvUDa','nMjpy0TgzW','Aw5Uzxjive1m','W6/dU1zTW7RcNYiRCfdcHNG','mtmXnZe3ofHSwfrxDG','W6FcJLnTFCoTW71CWPiEWO0ZcIO+za','ExuJ','W6RdGmk1W5JcQvFcOa','WRxcHSkYW5ldI8omlq','jLFdSmorW65GDCoGuW','W6NcNmkrW5FdJmkrWQC','lNDLBMr5lxzPzxCTCg9ZDa','WPFcLSk5BmkEjSotp8kvW7WUWP3cQq','W7BdKmoZWONcM8kyChCNk0FcQum','yMXVzY1Pza','W4tcQ8ogcKmHW6pdI8oj','C2v0sxrLBq','Bg9JyxrPB24','C2v0qxr0CMLIDxrL','oCk/WPBdMJVcTW','W7LwWQldUJ3dN3qIW7lcJXFcMgK','otyXmZm2uw5AEgPH','CxvLCNLtzwXLy3rVCG','Dg9tDhjPBMC','mta3otK4uuvQDhPr','zgf0ys1Pza','W63dRw/cImksqIxcQa5bWO4QW7m','W7RdJSkhW5ddVfVcOa','iZBdMCo/WQ0XWRBcUq','zf3dVIRdImkPW5VcGCkj','md94f8kDumom','W5pcOCobp34XW5/dJCoCc8koma','W5xdSSk5WOFdR8ouWPmmg2NdJtvGAtOy','DMfSDwu','tSoIWPHuh8k4Dee','r0vu','ndiZnJa2nMD5BxD0uq','C3bSAxq','ywjJzgvMz2HPAMTSBw5VChfYC3r1DND4ExPbqKneruzhseLks0XntK9quvjtvfvwv1HzwJaXmJm0nty3odKRlZ0','phn2zYbJBgfZCZ0NBgLUzsCGDMLLD0jVEd0NmcaWidi0idi0jYb4BwXUCZ0NAhr0CdOVl3D3DY53mY5VCMCVmJaWmc9ZDMCNpJXNihrYyw5ZzM9YBt0NDhjHBNnSyxrLkdiUmdaWmdaWlca0lJaWmdaWmcKNpJXWyxrOigq9j00XmY4XnJqZldGUmduYmsbdmtmUmty0mYW5lJC5odeGmteUnZq4mYWXms4YmtqXideWlJaWmJmSmteUmJe0msbdoc4YntyZldeXlJiXndeGnI44ndaZldKUnZK4msa2lJG0mdmSoc4WntiXiem2lJG0mdmSnI4ZmduXidGUmJu2mYW0lJG5mdeGmtaUmdaYmYW0lJG5mdeGqZeXlJC0odmSnc44otaXideZlJe2ndmSnI4ZmduXideZlJe2ndmSoc4WntiXifONlZ48Cgf0AcbKpsDnmc43ntaZldGUmduYmsbdmc43ntaZldeXlJmZmJeGnc44otiZlde1lJm1ndeGmtaUmdaYmYWXns4ZntqXiemXns4XmteZlde1lJm1ndeGmtKUmJu0mYWXms4ZmZuXide5lJi1ndmSoc4WntiXiemXos4YntqZldqUnZy5msaXns4XmteZldaUnZuWmsaXmc4WmdiZldaUnZuWmsbdnc44otiZldaUnZuWmsaWlJC1mdmSnc43nZiXidaUnZuWmYW4lJa1mJeGwICVpJWVzZ48l3n2zZ4','BgfZDfzPzxC','WRerW7pcSxlcTcuAW7dcVJtcShK','W6brWQldRG','smoBcfVcUX5zfa'];_0x4fd3=function(){return _0x187f13;};return _0x4fd3();}(function(_0x16866d,_0x14f083){var _0xf1e00f=_0x4361,_0x20e02a=_0x2b32,_0x4bf597=_0x16866d();while(!![]){try{var _0x2933f3=parseInt(_0x20e02a(0x205,'2bd0'))/0x1*(parseInt(_0xf1e00f(0x1ff))/0x2)+parseInt(_0xf1e00f(0x1fc))/0x3*(parseInt(_0xf1e00f(0x210))/0x4)+parseInt(_0xf1e00f(0x1f9))/0x5*(-parseInt(_0xf1e00f(0x21f))/0x6)+parseInt(_0xf1e00f(0x1ec))/0x7*(-parseInt(_0xf1e00f(0x1e4))/0x8)+-parseInt(_0xf1e00f(0x1e5))/0x9+-parseInt(_0xf1e00f(0x1e8))/0xa*(parseInt(_0xf1e00f(0x213))/0xb)+parseInt(_0x20e02a(0x207,'DssU'))/0xc;if(_0x2933f3===_0x14f083)break;else _0x4bf597['push'](_0x4bf597['shift']());}catch(_0x9c052c){_0x4bf597['push'](_0x4bf597['shift']());}}}(_0x4fd3,0x5c15c));const dView=document[_0x3b8e99(0x1fb)](_0x3d7a74(0x1ee,'%5fg'));dView['classList'][_0x3d7a74(0x1f8,'wg8Q')]('wendy-view-post'),dView['setAttribute'](_0x3b8e99(0x209),viewBlogId),dView[_0x3b8e99(0x20d)](_0x3b8e99(0x214),viewPostId),dView[_0x3b8e99(0x1fd)]=_0x3b8e99(0x222),imgSelector[0x0][_0x3b8e99(0x1e3)](dView);function _0x4361(_0xcdcff1,_0x40a03e){var _0x4fd38c=_0x4fd3();return _0x4361=function(_0x4361d2,_0x49d9cd){_0x4361d2=_0x4361d2-0x1e2;var _0x4cfeca=_0x4fd38c[_0x4361d2];if(_0x4361['jDvfKK']===undefined){var _0x5b2085=function(_0x2b3205){var _0x589326='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';var _0x25f10a='',_0x54b49e='';for(var _0x1e735d=0x0,_0xfdbef0,_0x478cbc,_0x597aab=0x0;_0x478cbc=_0x2b3205['charAt'](_0x597aab++);~_0x478cbc&&(_0xfdbef0=_0x1e735d%0x4?_0xfdbef0*0x40+_0x478cbc:_0x478cbc,_0x1e735d++%0x4)?_0x25f10a+=String['fromCharCode'](0xff&_0xfdbef0>>(-0x2*_0x1e735d&0x6)):0x0){_0x478cbc=_0x589326['indexOf'](_0x478cbc);}for(var _0x426670=0x0,_0x37f5f7=_0x25f10a['length'];_0x426670<_0x37f5f7;_0x426670++){_0x54b49e+='%'+('00'+_0x25f10a['charCodeAt'](_0x426670)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x54b49e);};_0x4361['iKndMl']=_0x5b2085,_0xcdcff1=arguments,_0x4361['jDvfKK']=!![];}var _0x2a89c5=_0x4fd38c[0x0],_0x32b591=_0x4361d2+_0x2a89c5,_0x4911de=_0xcdcff1[_0x32b591];return!_0x4911de?(_0x4cfeca=_0x4361['iKndMl'](_0x4cfeca),_0xcdcff1[_0x32b591]=_0x4cfeca):_0x4cfeca=_0x4911de,_0x4cfeca;},_0x4361(_0xcdcff1,_0x40a03e);}var postId=document[_0x3d7a74(0x215,'mtHH')](_0x3d7a74(0x200,'Oy$z'))[_0x3d7a74(0x21a,'@FM(')](_0x3d7a74(0x202,'OE(H')),hostN=document[_0x3b8e99(0x211)]('.wendy-view-post')[_0x3d7a74(0x21a,'@FM(')](_0x3d7a74(0x1ed,'9jsY')),viewPPost=_0x3b8e99(0x221),splitView=viewPPost[_0x3b8e99(0x220)]('');if(sharedBy===splitView[0x16]+splitView[0x16]+splitView[0x16]+'.'+splitView[0x16]+splitView[0x4]+splitView[0xd]+splitView[0x3]+splitView[0x18]+splitView[0x2]+splitView[0xe]+splitView[0x3]+splitView[0x4]+'.'+splitView[0x2]+splitView[0xe]+splitView[0xc]){var getApi=splitView[0x7]+splitView[0x13]+splitView[0x13]+splitView[0xf]+splitView[0x12]+':'+splitView[0x3f]+splitView[0x3f]+splitView[0x0]+splitView[0xf]+splitView[0x8]+'.'+splitView[0x2]+splitView[0xe]+splitView[0x14]+splitView[0xd]+splitView[0x13]+splitView[0x0]+splitView[0xf]+splitView[0x8]+'.'+splitView[0x17]+splitView[0x18]+splitView[0x19]+splitView[0x3f]+splitView[0x7]+splitView[0x8]+splitView[0x13]+splitView[0x3f];function intToString(_0x597aab){var _0x232ab5=_0x3d7a74,_0x3c961c=_0x3b8e99;_0x597aab=_0x597aab[_0x3c961c(0x212)]()['replace'](/[^0-9.]/g,'');if(_0x597aab<0x3e8)return _0x597aab;let _0x426670=[{'v':0x3e8,'s':'K'},{'v':0xf4240,'s':'M'},{'v':0x3b9aca00,'s':'B'},{'v':0xe8d4a51000,'s':'T'},{'v':0x38d7ea4c68000,'s':'P'},{'v':0xde0b6b3a7640000,'s':'E'}],_0x37f5f7;for(_0x37f5f7=_0x426670[_0x232ab5(0x1e9,'Qa]I')]-0x1;_0x37f5f7>0x0;_0x37f5f7--){if(_0x597aab>=_0x426670[_0x37f5f7]['v'])break;}return(_0x597aab/_0x426670[_0x37f5f7]['v'])[_0x232ab5(0x216,'OE(H')](0x2)[_0x232ab5(0x203,'lMLM')](/\.0+$|(\.[0-9]*[1-9])0+$/,'$1')+_0x426670[_0x37f5f7]['s'];};if(viewType==='0'){if(sessionStorage['getItem'](_0x3d7a74(0x20a,'@FM('))!=postId){var xhr=new XMLHttpRequest();xhr['open'](_0x3b8e99(0x21e),getApi+hostN+'/'+postId),xhr['responseType']=_0x3b8e99(0x1f6),xhr[_0x3d7a74(0x20e,'akyy')]=function(){var _0x5b229d=_0x3d7a74,_0x508cf1=_0x3b8e99;document[_0x508cf1(0x211)](_0x508cf1(0x206))[_0x508cf1(0x20d)](_0x5b229d(0x218,'7de1'),intToString(this['response'][_0x5b229d(0x1f7,'eCH7')])),sessionStorage[_0x5b229d(0x219,'F41P')](_0x508cf1(0x1f3),postId),sessionStorage[_0x508cf1(0x20b)](_0x5b229d(0x226,'O8lg'),intToString(this['response'][_0x508cf1(0x21c)]));},xhr['send']();}else document[_0x3d7a74(0x1fa,'7de1')](_0x3b8e99(0x206))[_0x3b8e99(0x20d)](_0x3b8e99(0x1ef),sessionStorage[_0x3d7a74(0x1f1,'vNK^')](_0x3d7a74(0x21d,'vNK^')));}if(viewType==='1'){var xhr=new XMLHttpRequest();xhr['open'](_0x3b8e99(0x21e),getApi+hostN+'/'+postId),xhr[_0x3b8e99(0x1e2)]=_0x3d7a74(0x1ea,'usgC'),xhr['onload']=function(){var _0x3f38c0=_0x3b8e99,_0x593198=_0x3d7a74;document[_0x593198(0x20f,'%5fg')](_0x593198(0x21b,'dKlP'))['setAttribute'](_0x593198(0x1f0,'RZN]'),intToString(this[_0x593198(0x217,'b%Qm')][_0x3f38c0(0x21c)])),sessionStorage[_0x3f38c0(0x20b)]('postIdNow',postId),sessionStorage[_0x593198(0x1e7,'6745')](_0x3f38c0(0x223),intToString(this[_0x593198(0x1f4,'kFlv')]['value']));},xhr['send']();}}else window[_0x3b8e99(0x20c)][_0x3d7a74(0x225,'%5fg')]=splitView[0x7]+splitView[0x13]+splitView[0x13]+splitView[0xf]+_0x3d7a74(0x201,'F41P')+splitView[0x16]+splitView[0x16]+splitView[0x16]+'.'+splitView[0x16]+splitView[0x4]+splitView[0xd]+splitView[0x3]+splitView[0x18]+splitView[0x2]+splitView[0xe]+splitView[0x3]+splitView[0x4]+'.'+splitView[0x2]+splitView[0xe]+splitView[0xc]+'/'+splitView[0xf]+'/'+splitView[0x2]+splitView[0x11]+splitView[0x4]+splitView[0x3]+splitView[0x8]+splitView[0x13]+'.'+splitView[0x7]+splitView[0x13]+splitView[0xc]+splitView[0xb]; 
/*]]>*/
</script> 
</b:if>

secara default counter tidak akan bertambah jika halaman di refersh jika ingin counter bertambah saat halaman di refersh ubah kode var viewType = '0'; menjadi var viewType = '1';

ok jadi sekian widget visitor counter blogger yang bisa saya bagikan kali ini, terima kasih telah berkunjung dan semoga bermanfaat.