Tutorial : Menambahkan Informasi View Counter Pada Setiap Artikel Blogspot

Informasi tentang jumlah pembaca/pemirsa setiap artikel pada suatu laman merupakan salah satu informasi yang memberikan banyak manfaat. Pada laman/website dengan platform blogger, informasi tentang jumlah pembaca pada setiap artikel dapat disisipkan dengan cara menambahkan beberapa perintah tertentu serta menggunakan bantuan database dari pihak ketiga. Pada artikel ini, database yang digunakan adalah dari firebase.google.com.

Informasi tentang jumlah pembaca/pemirsa setiap artikel yang akan disisipkan memiliki beberapa kelebihan dan kekurangan (versi admin). Beberapa kelebihan dan kekurangan tersebut antara lain:

Kelebihan

Sebagai sarana promosi kepada pembaca tentang tingkat popularitas suatu artikel.
Membantu pengelola laman dalam memantau jumlah pembaca/pemirsa setiap artikel.
Memberikan kepercayaan terhadap pembaca mengenai kebermanfaatan suatu artiekel.

Kekurangan

Informasi ini hanya menampilkan jumlah pembaca/pemirsa setelah pemasangan.
Tidak menampilkan keseluruhan jumlah pembaca dari awal laman/website berdiri.
Proses pemasangan cenderung panjang dan membutuhkan proses edit HTML.

Setelah kelebihan dan kekurangan dari penambahan informasi ini dipahami, selanjutnya adalah proses pemasangan yaitu sebagai berikut:

1. Siapkan Laman dengan Platform Blogger

Harap dipastikan untuk laman yang akan ditambahkan informasi jumlah pemirsa adalah laman dengan platform blogger. Laman dengan platform wordpress dan lainnya memiliki cara yang berbeda, serta dapat lebih mudah ataupun lebih rumit.

2. Login ke firebase.google.com

Kunjungi dan login ke firebase.google.com menggunakan email google.

Kemudian pada tampilan depan, klik Add Project.

3. Lengkapi Informasi Project Baru

Berikan nama project yang baru dibuat, klik Continue (step 1)

Ceklis Enable Google Analytics for This Project, klik Continue (step 2)

Pilih akun pada tombol drop down, klik Create Project (step 3)

Tunggu sampai proses telah selesai, lalu klik Continue.

4. Membuat Database

Setelah masuk ke halaman depan akun, pilih dan klik Realtime Database kemudian klik Create Database.

Kemudian klik Next pada Database Option serta pilih Start in test mode lalu klik Enable.

Sampai pada tahap ini, database telah berhasil dibuat. Silahkan copy id firebase dengan cara block dan copy seluruh tulisan/url pada kotak berwarna biru dan ingat sebagai ID FIREBASE.

5. Pengaturan Rules

Tahap selanjutnya adalah melakukan pengaturan rules.

Klik Rules > Edit Rules kemudian atur isinya menjadi berikut atau sesuai dengan Kotak Biru.

{
"rules": {
".read": "true",
".write": "true",
}
}

Kemudian klik Publish lalu proses penyusunan database telah lengkap.

6. Pengaturan HTML Blogspot

Tahap selanjutnya adalah mengatur supaya laman blogspot dapat tersambung dengan database yang telah dibuat dengan cara masuk ke halaman blogger.

Klik Theme > Customize > Edit HTML. Kemudian letakkan kode berikut tepat sebelum kode </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("ID FIREBASE DISINI/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>

Ganti tulisan barwarna merah dengan ID FIREBASE yang telah disalin sebelumnya. Sampai tahap ini, database yang telah dibuat telah tersambung pada laman. Selanjutnya adalah mengatur posisi informasi jumlah pembaca artikel.

7. Pengaturan Posisi

Posisi paling umum yang digunakan adalah di atas artikel atau di bawah artikel yang berselabahan dengan informasi komentar dan lain lain. Letakkan kode berikut di bawah kode <div class='post-info'> atau menyesuaikan masing-masing tema blogspot.

<span class='post-view' expr:data-id='data:post.id'><i class='fa fa-eye'/>
<span class='view-load' id='postviews'/> Viewers
</span>

Setelah itu simpan HTML yang telah diedit dan Selesai.

Pemasangan telah berhasil jika seluruh tahapab diikuti. Namun harap dibaca baik-baik kelebihan dan kekurangan pada pemasangan ini di awal artikel. Terimakasih dan semoga artikel Tutorial : Menambahkan Informasi View Counter Pada Setiap Artikel Blogspot dapat bermanfaat.