Cara Membuat Counter View Real Time Firebase di Blog

Counter View ini sangat berguna sekali untuk blog apalagi jika blog sobat ingin mengetahui jumlah pengunjung yang membaca artikel sobat. Counter View ini adalah solusinya dengan menggunakan fungsi Real Time jadi view pada jumlah postingan akan dihitung secara Real Time atau asli.

Counter View disini menggunakan salah satu host yang ada di google yaitu firebase karena terbilang gratis jadi bisa digunakan oleh sobat dan juga di firebase sobat bisa melakukan kreasi sendiri jika paham dalam penggunaanya.

Cara Membuat Counter View di Blog

1. Pertama, buat akun firebase terlebih dahulu disini Firebase

2. Akun Firebase bisa digunakan dengan Gmail, jika akun gmail sudah ada otomatis akan menggunakan Akun Gmail saja dan langsung dapat membuat Projek Firebase.

3. Klik Tambahkan Projek.

4. Silahkan untuk menggatur Nama Projek dan Negara/Wilayah, jika sudah klik Buat Projek.

5. Setelah itu akan masuk ke Dashboard seperti ini.

6. Silahkan kamu klik Develop > lalu Database.

7. Disitu terdapat Cloud Firstore Beta dan Realtime Firebase kamu pilih yang Realtime Firebase untuk membuat Count View diblog.

8. Pada bagian Tab Diatas terdapat Data, Aturan, Cadangan, Penggunaan. Kamu pilih pada bagian Aturan untuk menseting agar Firebase dapat terbaca di blogger.

jQuery
{
  "rules": {
    ".read": false,
    ".write": false,
  }
}

Sobat ubah menjadi true, hasilnya akan seperti ini

jQuery
{
  "rules": {
    ".read": true,
    ".write": true,
  }
}

Kemduian sobat Publikasikan agar dapat merubah settingan tersebut.

Sekarang yaitu menerapkannya ke Blogger, silahkan simak tutorial berikut:

1. Buka Blogger > Klik Tema > Klik tombol Edit HTML > kemudian tambahkan kode dibawah ini sebelum ]]></b:skin> atau </style>

CSS
.post-view{font-size: 12px;float:right;}
.post-view>i{padding-right:5px;font-size:98%;}

2. Tambahkan kode dibawah ini sebelum </body>

jQuery<script src="//cdn.firebase.com/js/client/2.2.1/firebase.js" type="text/javascript">
<script>//<![CDATA[
// View counter
$.each($(".post-view[data-id]"),function(c,f){var b=$(f).parent().find("#postviews").addClass("view-load"),d=new Firebase("https://kang-iyan.firebaseio.com/view/mata/"+$(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:
Ganti URL : kang-iyan.firebaseio.com dengan URL Firebase kamu, jika belum memiliki URL Firebase maka silahkan Login menggunakan akun Google terlebih dahulu di https://firebase.google.com/

4. Jika sudah membuat proyek database di Firebase, maka selanjutnya tinggal menempatkan kode Post Views Counter dibawah ini kedalam template kalian. Penempatan kode Post Views Counter bebas terserah kalian

HTML
<span class="post-view" expr:data-id="data:post.id"><i class="fa fa-eye"> Dilihat <span class="view-load" id="postviews">0</span> kali</i></span>

Keterangan:
Post Views Counter ini memiliki proses asinkron pada blog, yang artinya : post views counter akan terlihat jika proses loading pada halaman blog sudah selesai termuat, sedangkan apabila proses loading halaman blog belum selesai termuat maka post views counter masih menampilkan nominal 0 views

Demo : Dilihat 0 kali
Mungkin sekian artikel tentang Cara Membuat Counter View di Blog dan semoga artikel ini sangat bermanfaat bagi sobat semua.