Cara Buat Counter Post View Blog

Fungsi dari Post Views Counter adalah untuk menampilkan berapa banyak kunjungan yang datang ke artikel blog anda. Sebagai contoh, bisa melihat Post Views Counter pada blog ini, atau bisa melihat contoh gambar berikut ini.

Berikut, panduan dari tutorial Post View Counter :
1. silahkan buka Blogger > Template > Edit HTML > Kemudian cari kode ]]></b:skin> .
2. Selanjutnya copykan kode CSS berikut ini tepat diatasnya⏫.

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

3. Cari kode </body>, kemudian copy kode dibawah ini lalu tempelkan (paste) diatas kode </body>

 <script src='//cdn.firebase.com/js/client/2.4.2/firebase.js' type='text/javascript'/>
<script 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://jasa-buat-software.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 URL : jasa-buat-software.firebaseio.com dengan URL Firebase anda, jika belum memiliki URL Firebase maka silahkan Login menggunakan akun Google terlebih dahulu di https://firebase.google.com/

4. Apabila sudah membuat proyek database di Firebase, maka selanjutnya tinggal menempatkan kode Post Views Counter berikut ini kedalam template blog anda. Penempatan kode Post Views Counter bebas. 

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

Penempatan kode Post Views Counter tersebut bebas diletakkan di lokasi manapun yang dirasa cocok pada template anda, karena code dari template berbeda. Saran dari saya bisa letakkan dibawah artikel (dekat Author Box), atau diatas artikel (dekat tanggal rilis artikel). Apabila anda bingung menempatkan letak dari post views counter ini, maka alangkah baiknya bila melakukan inspect element terlebih dahulu, supaya memiliki gambaran mau diletakkan dimana Post Views Counter nya.

Post Views Counter memiliki proses asincron pada blog, yang artinya : post views counter akan terlihat apabila 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. Lebih jelasnya bisa melihat perbedaan pada gambar berikut ini :

Jumlah views yang didapat adalah berdasarkan jumlah penayangan pada blog, jadi apabila 1 visitor melakukan refresh maka views akan menganggapnya sebagai 2 kali tampilan. Pastikan juga bahwa template kalian sudah mendukung FontAwesome agar symbol "mata" pada post views counter bisa tampil, jika belum support FontAwesome maka anda bisa tambahkan .

untuk panduan membuat Database Firebase silahkan kunjungi link Tutorial membuat Database Firebase

📄 Copy Dan Masukan CSS Font Awesome terbaru dibawah ini tepat diatas kode </head>

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

Apabila pemasangan Counter Post View berhasil maka pada bagian Database Akun Firebase anda akan tampil seperti gambar berikut ini.

Setiap ada kunjungan ke blog anda, maka value pada database akan berubah secara realtime, untuk mencobanya refresh halaman atau postingan artikel blog anda kemudian periksa perubahan database Firebase. Apabila tampilan Database Firebase anda seperti gambar diatas maka, Counter Post Views berhasil di tambah pada Blog anda.