Cara Membuat dan Memasang Auto Page View Counter di Blogger

Page View Counter adalah menghitung semua jumlah pengunjung yang membaca artikel anda. Widget ini sebenarnya blogger sudah menyediakan page view counter yaitu pada bagian Dashboard - Postingan - Kemudian disitu ada logo bergambar mata, darisitu kita bisa melihat berapa orang yang sudah melihat atau membaca artikel kita. page view counter berfungsi untuk menampilkan jumlah postingan yang sudah dibaca oleh pengunjung. Widget ini jarang sekali yang menggunakannya, karena sebenarnya blogger sendiri sudah menyediakan di dalam dashboard.

Page View Counter yang bagikan kali ini dibantu dengan Data Base dari Firebase dimana dengan bantuan dari Firebase ini artikel kita bisa di hitung secara Real Time. Firebase ini adalah situs milik Google untuk membuat berbagai project dalam pembuatan aplikasi, hosting, analytics dan lain-lain.

Screenshoot :

Page view counter ini juga sudah saya terapkan pada blog saya ini, jadi wajar saja jika viewers nya sedikit memang ini widget nya baru saja saya pasang. Sebelum memasuki ke proses pembuatan, saya peringatkan untuk membaca nya secara detail dan teliti agar tidak terjadi kesalahan.

Screenshoot :

Saya sedikit memberikan demo berupa gambar, silakan anda perhatikan gambar diatas yang saya lingkari berwarna merah kira-kira widget ini akan muncul seperti itu. Ok, saya rasa cukup deskripsinya langsung saja ke proses pembuatan.


Cara Membuat dan Memasang Auto Page View Counter di Blogger


Cara Pertama :

1. Buka Firebase
2. Lalu + Tambahkan Proyek.

Screenshoot :

3. Maka akan muncul pop-up seperti ini.

Isikan :

Name Proyek :
ID Proyek : - Otomatis Menyesuaikan dengan Nama Proyek
Pilih Negara/Wilayah: Indonesia
Perjanjian Lisensi: Setujui Semua. - Kemudian Buat Proyek.

Screenshoot :

4. Jika sudah langkah 3, langkah selanjutnya pilih Developer - Pilih Database.

Screenshoot :

5. Jika sudah pada menu database, langkah selanjutnya pilih Realtime Database

Screenshoot :

6. Langkah selanjutnya adalah Aturan keamanan untuk Realtime Database, silakan anda pilih bagian Mulai dalam mode pengujian, kemudian Aktifkan.

Screenshoot :

7. Jika sudah pilih menu Data kemudian silakan anda salin alamat firebase anda lalu tempelkan pada notepad.

Screenshoot :

Proses Pembuatan :

1. Buka Blogger -  Kemudian Login.
2. Dashboard - Tema/Template.
3. Pasang JQuery berikut ini, jika sudah dipasang tidak perlu dipasang lagi, jika belum terpasang wajib memasangnya.
4. Copy & Paste kode berikut ini, dan letakkan diatas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
5. Jika sudah? Temukan lagi kode </body>
6. Copy & Paste kode berikut ini, dan letakkan diatas kode </body>
<script src='https://cdn.firebase.com/js/client/2.3.2/firebase.js' type='text/javascript'></script>
<script type='text/javascript'>//<![CDATA[
// VIEWERS COUNTER
$.each($(".post-view[data-id]"),function(c,f){var b=$(f).parent().find("#postviews").addClass("view-load"),d=new Firebase("https://maycyber-download.firebaseio.com/pages/id/"+$(f).attr("data-id"));d.once("value",function(e){var h=e.val(),g=!1;null==h&&(h={},h.value=0,h.url=window.location.href,h.id=$(f).attr("data-id"),g=!0),b.removeClass("view-load").text(h.value),h.value++,"/"!=window.location.pathname&&(g?d.set(h):d.child("value").set(h.value))})});
//]]></script>
Keterangan : 

Silakan anda ganti https://maycyber-download.firebaseio.com pada kode diatas dengan alamat link Firebase anda yang sudah dibuat tadi.

7. Terakhir, Temukan kode <div class='post-info'> atau <div class="post-header"> kode ini letakkan dimana saja sesuai dengan template anda.
8. Copy & Paste kode berikut ini dan letakkan dibawah kode <div class='post-info'> atau <div class="post-header"> atau kode yang mirip, gunakan inspect element untuk mencari kode.
<span class='post-view' expr:data-id='data:post.id'><i class='fa fa-eye'/> <span class='view-load' id='postviews'>0</span> Viewers</span>

9. Simpan Template.


Demikian, bila anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat dan Memasang Auto Page View Counter di Blogger



Incomming Search :

Cara Membuat dan Memasang Auto Page View Counter di BloggerCara Membuat Page View Counter BloggerCara Membuat View Counter Pengunjung dengan HTML/JavaScriptCara Membuat Counter PageviewCara Membuat Jumlah Pengunjung (Hit Counter), Cara Membuat Widget Page View Counter, Page View Counter, Cara Membuat Penghitung Halaman Otomatis

Related Post

10 Responses to "Cara Membuat dan Memasang Auto Page View Counter di Blogger"

  1. Keren gan blognya , btw cara membuat label/kategori seperti blog MD ini gimana ya ?

    ReplyDelete
  2. Sudah di coba sesuai langkah diatas, masih tidak bisa tampil juga.
    atau butuh waktu ya om?

    ReplyDelete
    Replies
    1. Iya gan membutuhkan waktu, untuk test coba sobat lakukan sendiri pada postingan nya, jika nambah page view nya maka berhasil

      Delete
    2. Punya gw berhasil tapi kok udh gw coba liat pake hp lain kok msh 0 viewer?

      Delete
    3. gw ubah bagian span jadi 10000 dan hasilnya jg segitu.what

      Delete
    4. This comment has been removed by the author.

      Delete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Nggak muncul min..
    Ada solusi kah?

    ReplyDelete
  5. Thanks gan, berhasil https://serviceaclobam.blogspot.com/2020/10/wajib-tahu-tips-merawat-mobil-di-musim.html

    ReplyDelete
  6. Kalau mau bikin "Incomming Search" seperti di blog ini, gimana ya Bos...?

    ReplyDelete