Cara Membuat Widget Postingan Dilihat atau Dibaca (Post View Counter) dari Firebase

Dibaca 0 kali

Mengetahui jumlah pengunjung di tiap artikel atau postingan blog penting untuk seorang blogger. Disamping itu juga perlu memberi pesan kepada pengunjung tentang seberapa besar minat pembaca blog terhadap suatu artikel atau postingan tersebut. Selanjutnya bagaimana memasang widget post counter di tiap artikel atau postingan yang diletakkan tepat di bawah judul blog? Berikut telah kami ulas untuk dipraktekkan.

Membuat Widget Penghitung Visitor Postingan Blog

1. Siapkan Akun Firebase

Akun Firebase ini sebagai penyimpanan database post counter kita. Firebase adalah salah satu fitur milik Google. Jadi, sebelum kita menerapkan widget Post View Counter ini, kita harus membuat akun terlebih dahulu. Untuk membuat akun, kita bisa langsung klik link https://firebase.google.com kemudian klik BUAT PROJECT.

Setelah itu kita buat NAMA PROJECT, lalu pada pilihan Konfigurasi Google Analytics (kita bisa memutuskan JANGAN SEKARANG) kemudian pilih LANJUTKAN. Setelah itu kita tunggu sampai Project yang dibuat tadi selesai. Lalu, klik LANJUTKAN.

2. Settingan Dashboard Firebase

Pada dashboard Firebase, kita pilih REALTIME DATABASE yang terdapat di menu bar bagian kiri, kemudian pilih BUAT DATABASE.

Pada aturan keamanan untuk Realtime Database, kita pilih dalam Mode Pengujian atau Mode Uji lalu pilih Aktifkan.

Sampai dengan tahap ini database Firebase telah selesai dan kita telah memiliki ID sendiri. Kemudian simpan nama ID firebase kita. ID firebase biasanya seperti ini https://idfirebasekita-id.firebaseio.com

3. Pemasangan Widget Post Counter di Blog

Pada langkah terakhir ini, kita menyiapkan pemasangan widget penghitung jumlah visitor di tiap postingan. Kita masuk ke akun Blogger.

Kemudian seperti biasa, kita pilih TEMA lalu Edit HTML. Lalu letakan kode html javascript berikut ini tepat di atas kode </head> atay </body>.

<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://idfirebasekita-id.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>

Kalau tidak bisa di blok, lihat kodenya Disini (LIHAT KODE)

Silahkan ubah https://idfirebasekita-id.firebaseio.com dengan menggunakan ID Firebase yang telah selesai tadi.

Kemudian tempelkan kode berikut ini tepat di atas kode </style> atau </b:skin>

/* Start Post View Counter : www.hainusantara.com */
.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 : www.hainusantara.com */

Kalau tidak bisa di blok, lihat kodenya Disini (LIHAT KODE)

Terakhir, tempelkan kode javascript berikut ini di bawah 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> kali</span>

Kalau tidak bisa di blok, lihat kodenya Disini (LIHAT KODE)

Ubah kata Dilihat dan kali sesuai dengan selera kita.

Tutorial membuat widget penghitung pengunjung postingan artikel postingan ini telah kamipraktekkan dan Work 100% di blog kami. Sebagai contoh, silahkan scroll ke bagian atas tepat di bawah judul postingan.