Cara Membuat Page View Counter Blog Tanpa Firebase

April 13, 2020

NURHADIBACHTIAR - Bagi pengguna platform Blogger, memiliki fitur yang sangat lengkap dan komplit layaknya Wordpress tentu akan sangat diimpi-impikan. Namun apa daya, platform Blogger yang merupakan platform gratisan tentu memiliki keterbatasan yang cukup banyak, salah satu fitur keren yang ada pada Wordpress semacam Page View Counter merupakan salah satu fitur yang cukup berguna untuk menghitung total pembaca setiap postingan yang mana pada blogger sendiri belum tersedia sampai saat ini.

page view counter, view counter blogger, page view counter blogger

Fitur page view counter sebenarnya ada pada Blogger namun tidak untuk per postingan akan tetapi dihitung secara menyeluruh untuk semua halaman yang dapat Anda aktifkan di menu widget HTML pada dan memilih bagian widget Statistik Blog. Namun saya rasa fitur widget ini kurang mendetail dan tidak terlalu keren.

Apa itu Page View Counter ?

Page View Counter jika di artikan kedalam bahasa Indonesia adalah Penghitung Tampilan Halaman. Maka jika didefenisikan page view counter ini merupakan salah satu tindakan yang akan mengitung seberapa banyak sebuah halaman ditampilkan (terkhusus untuk tutorial ini tentu untuk ditampilkan pada situs).

Apa Kelebihan Page View Counter ini ?

Jika dibandingkan dengan tutorial Page View Counter untuk Blogger lainnya yang menggunakan Firebase, tentu untuk page view counter ini akan lebih mudah dalam cara pemasangannya, karena hanya copy dan paste code saja, dan juga untuk pengaruh kecepatan load halaman akan tidak terlalu memberatkan karena situs tidak harus mengambil script dari luar.

Apa Saja Fitur nya ?

Fitur dari Page View Counter tanpa firebase ini tidak terlalu banyak sih, cuman yang dibutuh-butuhkan saja, seperti :

Penghitung jumlah total dibaca untuk setiap postingan.
Penghitung Unik Visitor blog.
Penghitung total tayangan blog.

Yap .. cuma itu saja, namun walaupun demikian fitur ini cukup bagus bagi saya karena jarang-jarang platform blogger ada yang menggunakan ini, hehe.

Demo Page View Counter Tanpa Firebase

Untuk demo dari tutorial ini tidak jauh berbeda dari kebanyakan view count yang ada pada website wordpress atau blogger degan tutorial yang menggunakan firebase, untuk lebih jelasnya Anda bisa cek langsung pada tiap halaman postingan blog ini atau lihat pada screenshoot berikut ini :

Contoh page view counter postingan blog Nurhadi Bachtiar

Screenshoot diatas adalah contoh untuk view counter per postingan, sedangkan untuk penghitung seluruh tayangan beserta jumlah pengunjung dengan IP Unik adalah sebagai berikut :

Cara Membuat Page View Counter Blog tanpa Firebase

Nah .. untuk Anda yang tidak sabaran ingin menerapkan ini pada situs blog kesayangannya, bisa mengikuti tutorial singkat berikut ini agar Page View Counter bisa terpasang dengan baik dan benar pada blog kesayangan Anda.

1. Masuk ke edit HTML template Blogger Anda, dan cari code <b:includable id='postInfo'> atau yang hampir mirip dengan itu, kemudian cari kode penutupnya berupa </b:include>, dan pastekan kode berikut ini tepat sebelum kode penutup </b:include> tadi.

<b:if cond='data:view.isPost'>Dibaca Kali</b:if>

2. Kemudian pastekan kode berikut dibagian footer blog Anda, atau bisa cari code dengan kata kunci id='footer', dan pastekan dibawahnya.

Unique Visitor : 
 |

Page View :

3. Selanjutnya, salin dan pastekan script berikut ini tepat diatas kode </body>.

<script>/*<![CDATA[*/var bszCaller,bszTag;!function(){var c,d,e,a=!1,b=[];ready=function(c){return a||"interactive"===document.readyState||"complete"===document.readyState?c.call(document):b.push(function(){return c.call(this)}),this},d=function(){for(var a=0,c=b.length;c>a;a++)b[a].apply(document);b=[]},e=function(){a||(a=!0,d.call(window),document.removeEventListener?document.removeEventListener("DOMContentLoaded",e,!1):document.attachEvent&&(document.detachEvent("onreadystatechange",e),window==window.top&&(clearInterval(c),c=null)))},document.addEventListener?document.addEventListener("DOMContentLoaded",e,!1):document.attachEvent&&(document.attachEvent("onreadystatechange",function(){/loaded|complete/.test(document.readyState)&&e()}),window==window.top&&(c=setInterval(function(){try{a||document.documentElement.doScroll("left")}catch(b){return}e()},5)))}(),bszCaller={fetch:function(a,b){var c="BusuanziCallback_"+Math.floor(1099511627776*Math.random());window[c]=this.evalCall(b),a=a.replace("=BusuanziCallback","="+c),scriptTag=document.createElement("SCRIPT"),scriptTag.type="text/javascript",scriptTag.defer=!0,scriptTag.src=a,document.getElementsByTagName("HEAD")[0].appendChild(scriptTag)},evalCall:function(a){return function(b){ready(function(){try{a(b),scriptTag.parentElement.removeChild(scriptTag)}catch(c){bszTag.hides()}})}}},bszCaller.fetch("//busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback",function(a){bszTag.texts(a),bszTag.shows()}),bszTag={bszs:["site_pv","page_pv","site_uv"],texts:function(a){this.bszs.map(function(b){var c=document.getElementById("busuanzi_value_"+b);c&&(c.innerHTML=a[b])})},hides:function(){this.bszs.map(function(a){var b=document.getElementById("busuanzi_container_"+a);b&&(b.style.display="none")})},shows:function(){this.bszs.map(function(a){var b=document.getElementById("busuanzi_container_"+a);b&&(b.style.display="inline")})}};
/*]]>*/</script>

4. Setelah itu, simpan perubahan yang telah Anda lakukan tadi lalu cek hasilnya pada situs blog Anda.

Sangat mudah dan tidak ribet bukan?, jika dibandingkan dengan tutorial lainnya yang menggunakan firebase sebagai bahan view counter tentu akan lebih mudah tutorial ini, hehe. Dan untuk itu bagi Anda yang ingin keren-kerenan diblog nya dengan adanya view counter akan lebih baik saya rasa jika menerapkan tutorial ini karena sangat mudah dalam pemasangannya dan tentu terlihat cukup simple tanpa harus membuat load speed halaman blog Anda menjadi sangat berat.

Semoga tutorial ini dapat bermanfaat dan jangan lupa meninggalkan jejak dikolom komentar sebagai tanda bahwa Anda telah membaca tutorial ini 😆. Terimakasih.