Menampilkan Jumlah Post View di Blogger atau Disemua Postingan

Pada kesempatan yang lalu dan tanpa kesengajaan, kami menemukan script Post Views Counter pada blog dan berhasil kami terapkan pada blog Kurazone ini, rupanya post views counter tersebut hampir mirip dengan plugin WP yang bernama Plugin Post Views Counter.

Banyak sekali para pemain Blogger yang sedang mencoba mencari bagaimana cara menerapkan Post Views Counter ini jika blog kita menggunakan platform Blogger.

FUNGSI

Fungsi dari  Post Views Counter adalah untuk menampilkan berapa banyak kunjungan yang datang ke artikel blog kalian. Untuk demonya, bisa melihat Post Views Counter pada blog ini, atau bisa melihat gambar dibawah ini.

Langsung saja deh, beginilah cara menerapkan Post Views Counter di Blog (Blogger)

1. Buka akun Blogger >> Pilih Tema / Template >> Pilih Edit HTML

2. Cari kode ]]></b:skin>, lalu copy kode dibawah ini dan letakkan (paste) diatas kode ]]></b:skin>

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

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

1234567891011121314<script src='//cdn.firebase.com/js/client/2.2.1/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://sotazer.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>

Note :

Ganti URL : sotazer.firebaseio.com dengan URL Firebase kalian, jika belum memiliki URL Firebase maka silahkan Login menggunakan akun Google terlebih dahulu di https://firebase.google.com/

Untuk petunjuknya silahkan simak ulasannya pada artikel dibawah ini :

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

1<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</span>

Penempatan kode Post Views Counter tersebut bebas diletakkan dilokasi manapun yang dirasa cocok pada template kalian, dikarenakan template masing - masing memiliki struktur HTML yang berbeda maka yang paling umum digunakan adalah diletakkan dibawah artikel (dekat Author Box misalnya), atau diatas artikel (dekat tanggal rilis artikel). Jika kalian bingung menempatkan letak dari post views counter ini, maka alangkah baiknya bila kalian melakukan inspect element terlebih dahulu, supaya memiliki gambaran mau diletakkan dimana Post Views Counter nya.

INFO :

Post Views Counter ini memiliki proses asinkron pada blog, yang artinya : angka pada  post views counter akan TAMPIL 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. Lebih jelasnya bisa melihat gambar dibawah ini :

Jumlah views yang didapat adalah berdasarkan jumlah penayangan pada blog setelah dipasangkan kode Post View Counter, jadi meskipun artikel kalian sudah dilihat ratusan orang dan kalian masih baru kali ini memasang Post View Counter nya maka nominalnya akan dimulai dari angka 1.