Cara Membuat Page View Counter Blogger

Cara Membuat Page View Counter Blogger - Page view Counter blogger ini berfungsi untuk menampilkan jumlah postingan yang sudah dibaca oleh pengunjung dan fitur ini menggunakan database realtime dengan firebase.

Sebelum memulai tutorial, kita mulai dengan membuat Project di Firebasenya, Silahkan Buka Console Firebase,
Lalu Ikuti langkah-langkah berikut sesuai urutan Nomer, jika sudah Copy URL Firebase ke Notepad.

Klik Gambar Untuk Ukuran Besar.

Lalu Cek sudah ada Jquery atau belum, letaknya diatas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>

---

Cara Membuat Page View Counter Blogger

1. Silahkan Buka Blogger > Tema > Edit HTML, Simpan Javascript berikut diatas </body>

<script src='https://cdn.firebase.com/js/client/2.3.2/firebase.js' type='text/javascript'></script>
<script type='text/javascript'>//<![CDATA[
// View counter
$.each($(".post-view[data-id]"),function(c,f){var b=$(f).parent().find("#postviews").addClass("view-load"),d=new Firebase("https://counter-blog-98.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>



2. Simpan HTML berikut untuk menampilkannya, contoh di bawah <div class="post-header">

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



3. Jika sudah save tema.

(Jika Tidak Berhasil) Pastikan Kamu meletakkan HTML tersebut TIDAK terbungkus/memakai tag conditional.

Tag	Keterangan
https://counter-blog-98.firebaseio.com	Ganti Dengan URL Firebase Kamu

Ok sekian tutorial Cara Membuat Database Realtime Firebase untuk view counter dan Cara Membuat View Counter Diblogger. Semoga bermanfaat.