Skip to content Skip to sidebar Skip to footer

Cara Membuat Post View Counter Menarik di Blogger Dengan Firebase

Pada kesempatan kali ini saya akan sharing tips blogger mengenai Cara Membuat Post View Counter Menarik di Blogger Dengan Firebase. Post View Counter adalah suatu widget yang berfungsi untuk menghitung jumlah viewers pada masing-masing postingan di website atau blog Anda. Tips ini hanya work untuk Anda yang menggunakan platform Blogger. Widget Post View Counter sangat berguna untuk blog Anda, sehingga Anda nantinya akan mengetahui banyaknya pengunjung blog yang telah melihat atau membaca setiap artikel yang ada di blog Anda.


Bagi Anda yang akan menerapkan widget ini di blog atau website, berikut ini merupakan langkah-langkah dalam pembuatan widget Post View Counter di blog.

  1. 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 link https://firebase.google.com kemudian klik BUAT PROJECT.

Sumber Gambar : Tamboenman.xyz

  1. Buat NAMA PROJECT >> Konfigurasi Google Analytics (Anda bisa untuk memilih JANGAN SEKARANG) kemudian pilih LANJUTKAN. Lalu, tunggu sampai creating project selesai selanjutnya klik LANJUTKAN.
  2. Setelah berada pada Dashboard Firebase klik DATABASE
  3. Klik REALTIME DATABASE yang terdapat di bagian bawah, kemudian pilih BUAT DATABASE
  4. 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://abdlnatsir-id.firebaseio.com
  5. Selanjutnya adalah melakukan konfigurasi dengan 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 silahkan 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://abdlnatsir-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://abdlnatsir-id.firebaseio.com dengan menggunakan ID Firebase Anda.
Kemudian paste-kan kode berikut ini di atas kode </style> atau </b:skin>

/* Start Post View Counter : www.abdulnasir.id */

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


/* End Post View Counter : www.abdulnasir.id */


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 yang berwarna merah bisa diubah sesuai kreativitas Anda.

Taaraaaa, sudah jadi sekarang ya, periksa blog atau web Anda. Apabila tidak work, berarti ada langkah yang salah. Perhatikan dan lakukan langkah-langkah di atas secara sistematis dan jangan sampai ada yang terlewatkan.



Demikianlah Cara Membuat Post View Counter Menarik di Blogger Dengan Firebase. Semoga Bermanfaat.

12 comments for "Cara Membuat Post View Counter Menarik di Blogger Dengan Firebase"

  1. Sudah saya coba di blog saya, hitungannya dimulai dari nol lagi ya mas ?

    ReplyDelete
  2. Gw pkek ginian malah font awsome matanya malah banyak di beranda beranda jdi beranrmtakan

    ReplyDelete
  3. yakin bisa nih? tanpa menghapus angka 0 kan?

    ReplyDelete
  4. Terima kasih banyak akhirnya berhasil diterapkan di blog,
    Kalau boleh dan ada kesempatan izin untuk repost ya tentunya dengan proper credit.
    Sukses Admin abdulnasir.id!

    ReplyDelete
  5. punya ente kok udh dilepas knapa gan?

    ReplyDelete
  6. Menarik nih, saya masih jarang menggunakan firebase untuk blogger.
    Apakah bisa bikin recent post atau related post dengan firebase? sepertinya lebih ringan.

    ReplyDelete
  7. beda template beda tempat wokwok

    ReplyDelete
  8. can we load the script without jquery?

    I set it up on my page

    https://scorpiology.blogspot.com/
    https://all-about-zodiac-signs.blogspot.com/

    ReplyDelete
  9. Terimakasih, tutorialnya sangat mantap, saya ingin mencoba memasangnya di ANGKUTAN

    ReplyDelete