Membuat Post View Counter di Blog - MANTANKODE

Membuat Post View Counter di Blog

Cara membuat post view diblogger mungkin banyak dicari untuk mempercantik tampilan dan untuk mengetahui seberapa banyak orang yang berkunjung pada setiap artikel. penggunaannya pun cukup mudah. cara kerja script ini yaitu setiap ada pengunjung datang dan membuka post / artikel yang ada diblog anda maka itu akan dihitung sebagai 1 tampilan dan apabila pengunjung tersebut refresh halaman post anda maka itu akan dihitung lagi menjadi 2 tampilan dan begitu seterusnya apabila ada pengunjung datang, tentu saja anda juga apabila membuka post akan dihitung sebagai pengunjung.

Membuat Post View Counter di Blog


Sebenarnya ada juga bawaan dari blogger tapi saat ini belum dapat cara untuk menampilkan statistik setiap post, yang tersedia sekarang ini hanya untuk tampilan halaman awal blog saja.

Blogger - Templates - Edit HTML

Tahap Pertama

silahkan cari jquery.min.js diblog anda, apabila tidak ada salin link script dibawah ini dan letakkan diatas </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>

Tahap Kedua

salin javascript dibawah dan letakkan diatas </body>
<script src='https://cdn.firebase.com/js/client/2.3.2/firebase.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
// View counter
$.each($(".post-view[data-id]"),function(c,f){var b=$(f).parent().find("#postviews").addClass("view-load"),d=new Firebase("https://mantandekat.firebaseio.com/pages/id/"+$(f).attr("data-id"));d.once("value",function(e){var h=e.val(),g=!1;null==h&&(h={},h.value=0,h.url=window.location.href,h.id=$(f).attr("data-id"),g=!0),b.removeClass("view-load").text(h.value),h.value++,"/"!=window.location.pathname&&(g?d.set(h):d.child("value").set(h.value))})});
//]]>
</script>

Tahap Ketiga

salin kode html dibawah dan letakkan dimana saja menurut anda, karena setiap template akan memiliki perbedaan tampilan jadi di tahap ketiga ini saya saran sesuai selara dimana letak yang sesuai.
<span class='post-view' expr:data-id='data:post.id'><i class='fa fa-eye'/> <span class='view-load' id='postviews'>0</span> Viewers</span>

dan Simpan, refresh blog anda apabila sesuai akan tampil 1 Viewers dan refresh lagi akan berubah 2 Viewers berarti berhasil.

Share with your friends

Add your opinion
Disqus comments
Notification

Donasi yang anda berikan akan saya gunakan untuk mengembangkan blog ini.

BANK BNI: 0431705794 a/n Muhammad Rahmadi

Pulsa/DANA/OVO: +6285822266832

Done