Cara Membuat Hits Counter Postingan Blog

Bagi seorang blogger, jumlah pengunjung berarti kepuasan menjalani hobi. Semakin banyak pengunjung blog, maka akan semakin puas seorang blogger terhadap hasil karyanya. Dalam dunia blog ada beberapa hal yang tentu menjadi masalah dalam menghitung jumlah pengunjung blog. Sebelumnya ada beberapa situs penyedia counter atau widget penghitung pengunjung blog atau website, namun banyak dari situs penyedia tersebut hanya menghitung pengunjung dalam cakupan umum alias bukan menghitung pengunjung di tiap-tiap postingan blog.

• Kunjungi situs Firebase.com (www.firebase.google.com) lalu silahkan buat akun di situs itu.
• Setelah memiliki akun, pilih Tambahkan Proyek, lalu tuliskan nama proyek dan pilih negara. kemudian tekan Buat Proyek. Tunggu hingga proyek kamu selesai dibuat. lalu tekan Lanjutkan
• Setelah proyek selesai, maka akan muncul tampilan baru. Kamu perhatikan menu di sebelah kiri. Pada Menu Develop, klik Database.
• Lalu scroll kebawah sedikit, pada pilihan Realtime Database,  klik Buat Database kemudian pilih Mode Pengujian. Lalu klik Aktifkan
• Selanjutnya, ingat link url firebase anda.

KEDUA
Buka Blogger.com, dan masuk ke mode pengeditan html.
Paste kode merah di bawah ini sebelum (di atas) 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://project-317043463619493167.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>

Catatan: Ganti kode berwarna biru dengan link url Firebase milik kamu. Kemudian letakkan (paste) kode biru di bawah ini sebelum (di atas) kode ]]></b:skin>

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

Dan terakhir, letakkan kode HTML di bawah ini ke tempat di mana kamu ingin meletakkan widget hits counter artikel blog tersebut. Atau paste di atas kode <data:post.body>

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

Selesai, dan simpan template.