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.