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.
- 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
- 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://abdlnatsir-id.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://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.
Sudah saya coba di blog saya, hitungannya dimulai dari nol lagi ya mas ?
ReplyDeleteiya dimulai dari nol..
Deletemore news from East Java, visit:
ReplyDeletejatimTIMES
Terimakasih pencerahannya mas..
ReplyDeleteGw pkek ginian malah font awsome matanya malah banyak di beranda beranda jdi beranrmtakan
ReplyDeleteyakin bisa nih? tanpa menghapus angka 0 kan?
ReplyDeleteTerima kasih banyak akhirnya berhasil diterapkan di blog,
ReplyDeleteKalau boleh dan ada kesempatan izin untuk repost ya tentunya dengan proper credit.
Sukses Admin abdulnasir.id!
punya ente kok udh dilepas knapa gan?
ReplyDeleteMenarik nih, saya masih jarang menggunakan firebase untuk blogger.
ReplyDeleteApakah bisa bikin recent post atau related post dengan firebase? sepertinya lebih ringan.
beda template beda tempat wokwok
ReplyDeletecan we load the script without jquery?
ReplyDeleteI set it up on my page
https://scorpiology.blogspot.com/
https://all-about-zodiac-signs.blogspot.com/
Terimakasih, tutorialnya sangat mantap, saya ingin mencoba memasangnya di ANGKUTAN
ReplyDelete