bergabung di grup telegram kami

widget visitor counter blogger

widget visitor counter blogger
widget visitor counter blogger

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.

Baca juga :

15 komentar


  1. 12 Januari, 2023 00:13
    What if I want it to appear in the home page post thumbnail
    1. 12 Januari, 2023 05:40
      next time I'll try it, for now I can't
  2. 12 Januari, 2023 11:29
    Kok ga work ya bg kodenya?
    1. 12 Januari, 2023 11:31
      Jangan mengubah apapun kecuali var viewType = '0'; // 0 or 1
    2. 12 Januari, 2023 11:36
      Saya ga ubah bg, apa karena saya pake template jadul kali ya?
    3. 12 Januari, 2023 11:38
      Kode ini peletakkan harus benar jika salah kodenya gagal di panggil

      <script>
      var viewBlogId = <data:blog.blogId/>;
      var viewPostId = <data:post.id/>;
      </script>
    4. 12 Januari, 2023 12:05
      Udah benar kok bg, apa karena saya cuma pake template landing page ya bg?
    5. 12 Januari, 2023 12:11
      Jika yang itu sudah benar, Ini kan view countnya saya posisikan di thumbnail di postingan, jadi pastikan artikel / postingan mu memiliki gambar thumbnailnya dan pastikan juga gambar mu terbungkus dengan tg div dengan class separator
    6. 12 Januari, 2023 12:51
      Kalo html nya seperti itu bisa ga bg?
    7. 12 Januari, 2023 12:53
      https://dreaminzucloth.blogspot.com/
    8. 12 Januari, 2023 13:36
      <!-- kode ini -->

      var imgSelector = document.querySelectorAll('.separator');

      <!-- ubah jadi -->

      var imgSelector = document.querySelectorAll('.product_image');

      <!-- terus tambahkan juga css ini -->

      .product_image{position:relative}
    9. 12 Januari, 2023 15:39
      O iya bg, makasi banyak ilmunya bg. Sukses terus untuk blognya..
  3. 12 Januari, 2023 23:10
    Why didn't the code show up for me bro?
  4. Ibenk
    Komentar ini telah dihapus oleh pengarang.
  5. 04 Februari, 2023 13:28
    wendy, I got a built like button, but how do I make it use Firebase storage?
    Previews: https://codepen.io/Introvert6/pen/RwaErNq
© 2020 - Wendy Code