Cara Menampilkan Jumlah Pembaca, Page View dan Unique Visitor di Blogger

Cara Menampilkan Jumlah Pembaca, Page View dan Unique Visitor di Blogger - Jika di wordpress, ada fitur yang menunjukan jumlah pembaca di artikel. Sementara di blogspot ada juga statistik yang memberikan info serupa tetapi hanya berupa informasi seluruh halaman tidak ke spesifik artikel.

Sampai akhirnya kemarin admin terdampar di blog seorang teman yang berbasis blogspot. Hal menarik yang Armaila temukan di blog tersebut adalah bisa menampilkan berapa lama waktu membaca (Time Reading) serta ada icon mata yang diikuti dengan angka angka tertentu. Belakangan armaila ketahui angka tersebut adalah sebagai indikator jumlah pembaca artikel tersebut.

Tertarik dengan hal tersebut dan ingin juga menampilkan jumlah pembaca di blog yang Armaila kelola, setelah googling akhirnya nemu juga panduannya di blog "ahmadwaslim".

Cara Menampilkan Jumlah Pembaca Dalam Blogspot

Dari kode yang akan dimasukkan ke dalam template blog nanti, sebenarnya bukan saja jumlah pembaca artikel saja yang akan bisa dimunculkan. Tetapi ada 3 fitur yang bisa dimunculkan atau ditampilkan nantinya yaitu:

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

Cara Membuat Page View Counter Blog tanpa Firebase

Dikutip dari wikipedia "Firebase adalah suatu layanan dari Google yang digunakan untuk mempermudah para pengembang aplikasi dalam mengembangkan aplikasi. Dengan adanya Firebase, pengembang aplikasi bisa fokus mengembangkan aplikasi tanpa harus memberikan usaha yang besar"

Ada pun cara yang akan kita lakukan untuk membuat page view di blogspot nanti adalah tanpa menggunakan firebase. Dan berikut ini adalah langkah langkahnya.

1. Masuk ke edit HTML template Blogger Anda, dan letakkan kode berikut ini berdekatan dengan kode tanggal postingan. Untuk template landing page blogspot yang Armaila gunakan. Kode yang akan digunakan diletakkan di <b:if cond='data:post.dateHeader'><p class='date-header'>.

Atau teman teman bisa juga mencari 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'>

<span id='busuanzi_container_page_pv' style='display:none'>Dibaca <span id='busuanzi_value_page_pv'/> Kali</span></b:if>

<span id='busuanzi_container_site_uv' style='display:none'>

Unique Visitor : <span id='busuanzi_value_site_uv'></span>

</span> |

<span id='busuanzi_container_site_pv' style='display:none'>

Page View : <span id='busuanzi_value_site_pv'></span>

</span>

2. 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>

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

Mengganti Tampilan Text Jumlah Pembaca Menjadi Icon

Sebenarnya jika sudah mengikuti panduan diatas maka jumlah pembaca dan page viewnya sudah akan muncul. Namun teks teks yang ada seperti yang diwarnai merah akan lebih cantik jika diganti menjadi icon seperti contoh pada gambar diatas. 

Nah untuk itu, Armaila mengganti text dengan icon yang disediakan oleh fontawesome.com sehingga kode yang pertama menjadi

<span id='busuanzi_container_page_pv' style='display:none'>&amp;nbsp;&amp;nbsp;<i class='fas fa-book-reader'/> <span id='busuanzi_value_page_pv'/></span>

<span id='busuanzi_container_site_uv' style='display:none'>&amp;nbsp;&amp;nbsp;<i class='fas fa-male'/> <span id='busuanzi_value_site_uv'/></span>

<span id='busuanzi_container_site_pv' style='display:none'>&amp;nbsp;&amp;nbsp;<i class='fas fa-eye'/> <span id='busuanzi_value_site_pv'/></span>

Catatan:

Berdasarkan pengalaman, kode penghitung jumlah page view dan pembaca ini tidak akurat dalam memberikan hitungan jumlah total dibaca untuk setiap postingan. Hal tersebut terlihat saat membuat artikel baru langsung mendapatkan informasi total yang dibaca yang sangat berbeda dengan yang tertera di dashbor blogger sejak.

Nah demikianlah artikel singkat tentang bagaimana cara agar jumlah pembaca artikel kita bisa dimunculkan di blogspot kita. Selamat mencoba dan semoga berhasil