Search This Blog

Menambahkan Page View Counter Ke Blogger

  • Wednesday, July 4, 2018 at 1:25:00 PM
  • 0 Comments
  • Views
Page views.
Ketika aku lagi nyari tutorial cara menambahkan Page View Counter Ke Blogger aku menemukan tutorialnya dengan fitur dari JQuery dan dukungan dari Firebase. Aku nggak tahu gimana prosesnya tapi trik ini berhasil aku terapkan di blogku. Sekarang setiap halaman blogku punya penghitung atau counter sendiri. Penasaran? Ikuti pengalamanku menerapkannya di blogku.

Penerapan
Pertama kita akan membuat dulu proyek dan database di Firebase. Jika kamu mempunyai akun google maka otomatis akan mempunyai akun Firebase. Kemudian untuk menuju dashboardnya langsung saja menuju console.firebase.google.com. Untuk cara pembuatannya bisa dilihat di video berikut ini.

JQuery

Pastikan JQuery library telah terinstal di template kita. Jika belum kamu harus menambahkannya setelah kode <head>.
<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>
Setelah JQuery library terpasang kita akan menuju ke kode HTML nya.

HTML

Buka Blogger › Template › Backup dulu Template kita › kemudian Edit HTML. Salin kode di bawah ini lalu tempelkan sebelum <data:post.body/> atau dimana saja kamu ingin meletakannya di sekitar Postingan Blog.
<a expr:name='data:post.id'/><span id='postviews'/> Views

JavaScript

Gunakan CTRL+F lalu temukan kode </body>. Salin kode berikut dan tempel sebelum </body>.
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($(&#39;a[name]&#39;), function(i, e) {
var elem = $(e).parent().find(&#39;#postviews&#39;);
var blogStats = new Firebase(&quot;https://YOUR-APP-NAME.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;));
blogStats.once(&#39;value&#39;, function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr(&#39;name&#39;);
isnew = true;
}
elem.text(data.value);
data.value++;
if(window.location.pathname!=&#39;/&#39;)
{
if(isnew)
blogStats.set(data);
else
blogStats.child(&#39;value&#39;).set(data.value);
}
});
});
</script>
Simpan template dan jangan lupa untuk mengganti https://YOUR-APP-NAME.firebaseio.com dengan alamat proyek yang telah kita buat tadi.
Contoh halaman di blog ini yang telah di pasangi kode page counter adalah seperti berikut ini.
Halaman dengan page counter.
Referensi
No comments
No comments

Post a Comment