Cara Membuat Post Views Counter di Blog (Blogger) - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Post Views Counter di Blog (Blogger)

Pilihan Editor :

Cara Membuat Post Views Counter di Blog (Blogger)
Penulis Bagus Surochman
0
Modus malam




KURAZONE ~ 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.

Ingat lho ya.. cara ini khusus untuk Blogger, jika kalian menggunakan platform Wordpress sebaiknya abaikan cara ini.

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

Baca : Cara Mudah Membuat Proyek Database Baru di Firebase Google


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

Penghitungan angkanya didasarkan pada PV (page views) bukan UV (unique visitor), artinya adalah Apabila 1 visitor melakukan refresh pada halaman blog, 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 kalian bisa membaca ulasan dari artikel berikut ini :

Baca : Cara Memasang dan Menggunakan FontAwesome pada Blog

Jika pemasangan Post Views Counter nya berhasil maka dibagian Database Akun Firebase kalian akan nampak seperti gambar dibawah ini.
KETERANGAN :
Setiap ada kunjungan ke blog kalian, maka database akan berubah secara realtime. Jadi cobalah untuk me-refresh halaman blog kalian untuk mengetest apakah sudah berhasil apa belum, sembari menge-check perubahan database Firebase-nya. Jika tampilan Database Firebase kalian seperti gambar diatas maka SELAMAT!!, kalian telah berhasil menerapkan Post Views Counter di Blog kalian.

SARAN :
Jika kalian merasa tampilan post views nya kurang menarik, maka kalian bisa mengoprek kode CSS berikut :
.post-view{font-size: 12px;}
Contoh oprekan kode CSS yang bisa kalian gunakan :
.post-view {font-size: 12px;background: #123456;padding: 3px;border-radius: 5px;}

Itulah informasi mengenai "Cara Membuat Post Views Counter di Blog (Blogger)", bagaimana? Ribet ya...? hehe.. tapi hasilnya keren kok, jika ada kesulitan silahkan berkomentar. Selamat mencoba dan semoga bermanfaat.

Courtesy by : @sotazone (www.twitter.com/sotazone)

nanio
Cara Membuat Post Views Counter di Blog (Blogger)
Cara Membuat Post Views Counter di Blog (Blogger) Cara Membuat Post Views Counter di Blog (Blogger) Reviewed by Bagus Surochman on 6/06/2018