Cara Membuat Post View Counter Di Blog

Yang dimaksud dengan Post View Counter adalah penghitung jumlah pengunjung setiap postingan di blog.Jadi kita akan tahu berapa banyak visitor blog yang telah melihat atau membaca setiap artikel yang ada di blog.

Bagi sobat yang ingin dan tertarik menerapkan pada blog sobat,berikut ini langkah langkah dalam pembuatan Post View Counter di blog.

1. Kita menuju https://firebase.google.com. » Klik Buat Project.

2. Buat nama project » Konfigurasi Google Analytics (bisa pilih Jangan Sekarang) » Lanjutkan.Tunggu sampai pembuatan project sobat selesai selanjutnya klik Lanjutkan.

3. Setelah berada pada dashboard Firebase klik Database.

4. Scroll kebawah pilih Realtime Database klik Buat database.

5. Pada Aturan keamanan untuk Realtime Databasenya pilih Mulai dalam mode pengujian selanjutnya klik Aktifkan (lihat contoh gambar dibawah).

Selanjutnya kita meninggalkan Firebase dan menuju blogger.

6. Klik Tema » Edit HTML
7. Letakkan kode javascript dibawah ini diatas kode </head> atau </body>.gunakan Ctrl+F untuk mempercepat pencarian.

<script src='//cdn.firebase.com/js/client/2.2.1/firebase.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'/>
<script async='async' type='text/javascript'>
    //<![CDATA[
    $.each($(".post-view[data-id]"), function(a, e) {
        var l = $(e).parent().find("#postviews").addClass("view-load"),
            i = new Firebase("https://tamboenxxxxxxxxx.firebaseio.com/pages/id/" + $(e).attr("data-id"));
        i.once("value", function(a) {
            var n = a.val(),
                t = !1;
            null == n && (n = {}, n.value = 0, n.url = window.location.href, n.id = $(e).attr("data-id"), t = !0), l.removeClass("view-load").text(n.value), n.value++, "/" != window.location.pathname && (t ? i.set(n) : i.child("value").set(n.value))
        })
    });
    //]]>
</script>

*. Ganti https://tamboenxxxxxxxx.firebaseio.com dengan id firebase sobat.

8. Selanjutnya letakkan kode dibawah ini diatas kode </style> atau </b:skin>. Gunakan Ctrl+F untuk mempercepat pencarian.

/* Stars Post View Counter By : www.tamboenman.xyz */

 .post-view {
    font-size: 95%;
    margin: 5px 5px 5px 0px;
    padding: 4px 8px;
    color: #fff;
    background: #05a6b5;
}

.post-view>i {
    padding-right: 5px;
    font-size: 100%;
}


/* End Post View Counter By : www.tamboenman.xyz */

9. Selanjutnya letakkan kode dibawah ini dibawah kode <span class='post-author'> atau <div class='post-info'>.

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

10. Apabila penempatan semua kode benar maka tampilannya akan seperti contoh gambar di bawah.

Klik Demo Klik Disini

Jika ada yang masih belum di mengerti silahan mengajukan pertanyaan pada kolom komentar.semoga postingan ini bermanfaat bagi sobat semua.Selamat mencoba.

TAMBOENMAN

Cara Membuat Post View Counter Di Blog

Menu Halaman Statis