Cara Memasang View Counter dengan Firebase

Cara Memasang View Counter dengan Firebase

Snippet

12.46

iNDZGN - Dalam artikel kali ini admin akan membahas sedikit tentang view counter. Apa sih view counter itu? View counter merupakan penghitung jumlah dilihat yang ada pada sebuah blog. Contoh, jika pada blog kamu banyak pengunjung, akan sangat membantu pengunjung lainnya bahwa sudah berapa kali artikel yang kamu post pada blog kamu dilihat.

Nah, pada kesempatan kali ini saya akan membagikan sedikit tutorial mengenai cara memasang View Counter dengan Firebase. Langsung saja kita masuk ke tutorialnya.

• Pertama, kamu harus mempunyai akun Firebase. Jika belum, silahkan daftar terlebih dahulu disini
• Setelah kamu membuat akun, nanti akan muncul halaman dashboard. Isi data aplikasi baru yang ada di kolom formulir di bagian kiri bawah. Klik Create New App.
• Jika aplikasi sudah terbuat, selanjutnya klik Manage App.
• ketika manage app kamu klik, nanti akan membuka tab baru dan pada URL nya. Silahkan copy URL tersebut ke Notepad terlebih dahulu.
• Sebelum lanjut ke langkah berikutnya, pastikan template blog kamu sudah terdapat jQuery library. Jika belum, silahkan pasang kode berikut sebelum </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

• selanjutnya,buka blogger>template>edit HTML>salin kode di bawah ini sebelum  ]]></b:skin> atau </style>

 .post-header-line-1 {overflow:hidden}
.viewers{margin:10px 0;display:table;background:#fefefe;color:#333;padding:6px 12px;box-shadow:inset 0 0 0 1px #c9c9c9;cursor:default;font-weight:bold;transition:all .3s ease-out}
.viewers:hover {background:#aaa;color:#fff;box-shadow:inset 0 0 0 1px #888;}
.viewers .loading {display:inline-block;width:20px;height:20px;background:transparent url('http://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/s1600/loader.gif') no-repeat 0 0;vertical-align:middle}

• Kemudian salin kode di bawah ini sebelum </body>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script src='http://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// View counter
$(function(){var a=$(".viewers");a.each(function(){var n=$(this).attr("id"),e=new Firebase("https://indzgn.firebaseio.com/"+n);e.once("value",function(n){var i=n.val();null==i?i=1:"/"!=window.location.pathname&&i++,e.set(i),a.children("span").removeClass("loading").html(i)})})});
//]]>
</script>
</b:if>

• Ganti kode yang ditandai (indzgn.firebaseio.com) dengan URL data aplikasi yang sebelumnya kamu simpan di Notepad tadi.
  Selanjutnya cari kode di bawah ini.

<div class='post-header'>
  <div class='post-header-line-1'/>
</div>

• Kemudian ganti menjadi seperti di bawah ini.

<div class='post-header'>
  <div class='post-header-line-1'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='viewers' expr:id='&quot;obs-&quot; + data:post.id'>Dilihat&amp;nbsp;<span class='loading'/>&amp;nbsp;Kali</div>
</b:if>
</div>
</div>

Catatan: pasang kode di atas pada post-header yang ada di dalam markup post, seperti di bawah ini.

<b:includable id='post' var='post'>
...
...
<div class='post-header'>
  <div class='post-header-line-1'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='viewers' expr:id='&quot;obs-&quot; + data:post.id'>Dilihat&amp;nbsp;<span class='loading'/>&amp;nbsp;Kali</div>
</b:if>
</div>
</div>
...
...
</b:includable>

• Terakhir, simpan template kamu dan lihat hasilnya.

Catatan: angka pada tampilan post bukanlah angka yang sebenarnya, karena pada akun free firebase akan dibatasi, supaya tidak terbatas silahkan daftarkan akun firebase kamu ke Premium yang tersedia di situsnya.

Demikian tutorial mengenai Cara Memasang View Counter dengan Firebase, semoga bermanfaat dan jangan lupa share artikel ini ke sosial media yang kamu punya.

12.46