Post View Counter adalah suatu widget yang berfungsi untuk menghitung jumlah viewers pada masing-masing postingan di website atau blog. 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. berikut ini merupakan langkah-langkah dalam pembuatan widget Post View Counter di blog.
Silahkan masuk ke link https://firebase.google.com kemudian klik BUAT PROJECT.
- Buat NAMA PROJECT >> Konfigurasi Google Analytics (Anda bisa untuk memilih JANGAN SEKARANG) kemudian pilih LANJUTKAN. Lalu, tunggu sampai creating project selesai selanjutnya klik LANJUTKAN.
- Setelah berada pada Dashboard Firebase klik DATABASE
- Klik REALTIME DATABASE yang terdapat di bagian bawah, kemudian pilih BUAT DATABASE
- 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://xxxx1234.firebaseio.com
- 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://xxxx1234.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://xxxx1234.firebaseio.com dengan menggunakan ID Firebase Anda.
Kemudian paste-kan kode berikut ini di atas kode </style> atau </b:skin>
/* Start Post View Counter */ .post-view { font-size: 95%; margin: 5px 5px 5px 0px; padding: 4px 8px; color: #000; } .post-view>i { padding-right: 5px; font-size: 100%; } /* End Post View Counter */ |
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 cetka tebal bisa diubah sesuai kreativitas.