Cara Membuat View Counter Pada Artikel Blogger

Cara membuat post view counter diblog -  Pada kesempatan ini saya akan membagikan "cara membuat view counter di postingan blog". apakah anda pernah melihat icon mata di blog atau website orang ? mungkin sudah pernah, nama icon mata itu adalah view counter yang selama ini kita idamkan supaya bisa terpasang di blog anda.

view counter merupakan icon yang berguna untuk menghitung berapa jumlah artikel yang di lihat oleh pengunjung. view counter akan menghitung terus sampai ribuan terlihat artikelnya.

kalau anda sebagai pengunjung blog, pasti tidak peduli dengan berapa tayangan sebuah artikel. view counter ini biasanya untuk di lihat oleh admin atau pengunjung yang mengerti funsi view counter tersebut.

Memasang View Counter Di Blog

1. Blogger > Theme > Edit HTML.

2. Cari ]]></b:skin> , letakkan script CSS di bawah ini di atas ]]></b:skin>

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

3. Pastekan script Javascript di bawah ini, di atas </body>

<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://counter-view-1151e.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>

Ingat

Ganti counter-view-1151e.firebaseio.com dengan firebase anda masing-masing, apabila anda memakau firebase saya tidak akan berjalan di blog anda. Daftar Firebase di https://firebase.google.com/

Buat terlebih Database firebase anda, sebelum melanjutkan tutorial memasang view counter ini.

4. Setelah anda mendaftarkan dan mengganti firebase saya dengan firebase anda. maka anda terapkan script HTML di bawah ini. letakkan sesuai keinginan anda.

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

Biasanya view counter terletak di bagian post author, tanggal postingan dan lain-lain.

Apabila Anda Tidak Mengetahui Letak View HTML Sendiri

A. Buka halaman artikel anda.

B. Lalu arahkan mouse anda di post author anda, lalu klik kanan inspect element.

C. Akan terbuka halaman baru, anda cari Tag pembuka dan Tag penutup nya seperti gambar di bawah ini.

D. Anda cari post-info info-3 Di Edit HTML dengan cara Ctrl + F, pastekan post-info info-3 lalu enter.

E. Setelah ketemu, Salin dan paste kan Script HTML View Counter yang diatas tadi. seperti di gambar bawah ini.

Simpan themplate anda.

post-info info-3  Tidak semua themplate sama, silahkan sesuaikan dengan script themplate anda masing-masing.

INFORMASI

View Counter ini memiliki proses asinkron pada blog, artinya saat proses loading artikel view counter akan angka 0, apabila loading artikel sudah selesai akan terlihat asli view counter anda.

Contoh : Saat belum selesai loading View Counter 0            

               Saat selesai loading view counter 12 kali di lihat

Jumlah tayangan artikel anda yang sebelumnya belum memakau view counter tidak akan di hitung setelah anda memasang view counter. jadi view nya di hitung dari 0 (Nol) lagi.

View Counter Berhasil Berjalan Di Blog

Gambar diatas terbukti proses view counter nya berjalan real time. saat pengunjung membaca artikel, akan otomatis di catat oleh sistem firebase tersebut.

Demikianlah cara membuat page view counter di blogger. semoga bermanfaat untuk anda.

TONTON VIDEO BERIKUT

Share this post