Cara Membuat Post View Counter di Blogger Dengan Firebase

Untuk penyimpanan databasenya kita menggunakan firebasenya milik Google. Jadi, sebelum Anda menerapkan widget Post View Counter ini, Anda harus membuat account terlebih dahulu. Silahkan masuk ke firebase.google.com kemudian klik BUAT PROJECT. 

  

Buat NAMA PROJECT >> Konfigurasi Google Analytics (bisa untuk memilih JANGAN SEKARANG) kemudian pilih LANJUTKAN. Lalu, tunggu sampai creating project selesai selanjutnya klik LANJUTKAN. 

 
Setelah berada pada Dashboard Firebase klik DATABASE Klik REALTIME DATABASE yang terdapat di bagian bawah, kemudian pilih BUAT DATABASE 

 
Pada aturan keamanan untuk Realtime Database pilih manual dalam mode pengujian lalu pilih Aktifkan. Sampai dengan tahap ini Anda sudah membuat firebase, simpan nama ID firebase Anda. ID firebase biasanya seperti ini https://dakota003-id.firebaseio.com

Selanjutnya adalah melakukan konfigurasi di blog atau website Anda. Masuk ke account Blogger Anda. Kemudian pilih TEMA >> Edit HTML. Letakan kode javascript berikut ini tepat di atas kode </head> atay </body>. untuk mempermudah pencarian gunakan Ctrl+F.

<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://dakota003-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>

Silahkan ubah https://dakota003-id.firebaseio.com dengan menggunakan ID Firebase Anda. Kemudian paste-kan kode berikut ini di atas kode </style> atau </b:skin>

.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%;
} 

Kemudian paste-kan 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>
 

Kode bisa diubah sesuai kreativitas.