Membuat Post View Counter untuk Blogspot

Hampir sama dengan tutorial yang pernah saya tuliskan disini Memasang Download Counter pada Blog dengan Plugin dari Firebase, hanya pada event nya saja yang berbeda.

Lihat Demo

Dengan begitu, anda akan mengetahui seberapa seringnya post anda dilihat / dibaca. Untuk pemasangannya ikuti langkah demi langkah dibawah ini.

Pada dasboard blogger pilih menu Template klik Edit HTML dan klik lagi CTRL + F kemudian cari kode </head>

Salin dan letakkan JQuery berikut tepat diatas kode yang anda temukan, bila template anda sudah dilengkapi dengan JQuery, lewati langkah ini !

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

Membuat Akun Firebase

Silahkan lakukan registrasi terlebih dahulu di Firebase, klik klik disini

Membuat Data Firebase

Untuk membuat data firebase bisa lihat gambar dibawah ini :

Membuat Data Firebase

Ingat nama APP nya, karena itu akan menjadi ID untuk Database anda

Memasang Post View Counter pada Blog

Klik lagi CTRL + F kemudian cari kode </b:skin> atau </style>

Salin dan letakkan CSS ini tepat diatas kode yang anda temukan tadi

.post-header-line-1 {
    overflow:hidden
}
.viewers {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAChUlEQVR42pWTy24ScRTGYSE+gVsTm5j4Ei7swgfQ+AAmdmfixjQNoSBpqEAQ2bhwo5ZSliZGaVptqablNvf7UC4CkrRUUCGlMCng8fyHS6ldGEm+kMyc73euY7EMf1aU7T9ltUyZr87Ozs7Z7fagw+kI/UuLrsXnq9HVB2OAjZhj6x9UlmdBEIW/xIMgCSBOSZJFYFgKukb3pQkgmYmZojMXxVBAYzDD0sByYzGQoVLQ6/UGJoCURbIRAwlUNRV4nhsQM8nEjEwcP5LAQOVbGQaDQfscIEOloVqt/gYAulQuBz9/2amaRjTwAjuUyEKhmINKpdzvdrv3zwHSmRTUjmptBNwiL9xup0vEGfAih7PgsH8eZFWERqMOkchK1DCMd1MA3iy10+kYHo/nET6/sbTkuKZqimmWZBwmZj9uH8PWp4+7K+FXa6enp70JQFIkaLVasLERE7z+ZV88vlWP72zrDJO+jYCqgpmbzV8gSeLRs6DPy7AZo9fvgQlwuV2hk5M2JBJ7sj/gC5BZSLIAxJRM7h42Gj8fYlvRZrP51umyL1N06lDXJeiPAJei0ahfUeWjpz6PN5Hca5Fex2Vrmgy17zUGAVcw9rLdsfCkUimAposTgDUcDt8LhoIvcOp1siYybXNgCqkCD0fif/gCvjsYezOy9uZ1qZQDPXtWgW3m+szd2Pp7juycE1hzWCT7ECBisIwbSjS2dzaThYIOubwK+zn5DDA//9jP4NGwo+zD8tGMAFVDgC5DLqfC19I+5PMaFIs6/it4SP1JC3M0Aig6bV4ey9O4ewbbYEHGSlRsg/SczRKQgmYVDg4q5BJh/EFZ8KoiuFdy3xdESj1T38xMzKiFP8CmvksDbxaWAAAAAElFTkSuQmCC") no-repeat scroll 3px 50% #F5F5F5;
    font:13px"Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
    padding: 8px 5px 8px 25px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: block;
    float:left
}
.loading {
    display:inline-block;
    width:82px;
    height:9px;
    background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWyu71B174mBn8kFp2PbmjKNdyNv1dnEykmvv7ZyrNDWRq4TvSJvxcHXP4M55TgCX3yk2vbzVpfagtaFpQ32Fb5OXjx1ER7Lft5FHDQrOvZ7XKEIJpAG6AUfby-AfzImUCpQed0YMjZwHy/s1600/loading.gif') no-repeat 0 0
}

Sekarang cari kode </body>, dan letakkan JQuery ini diatasnya

<script src='http://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function () {
    var b = $('.viewers');
    b.each(function () {
        var v = $(this).attr('id'),
            d = new Firebase('Isi dengan Database yang tadi anda buat' + v);
        d.once('value', function (snapshot) {
            var data = snapshot.val();
            if (data == null) {
                data = 1;
            } else if (window.location.pathname != '/') {
                data++;
            }
            d.set(data);
            b.children('span').removeClass('loading').html(data);
        });
    });
});
//]]>
</script>

Klik lagi CTRL + F sekarang cari kode <div class='post-header'>

Pada template yang masih standart, pasti anda akan menemukan hasil kurang lebih seperti ini:

<div class='post-header'>
  <div class='post-header-line-1'/>
</div>

Pada bagian <div class='post-header-line-1'/>, ganti dengan kode dibawah ini:

<div class='post-header-line-1'>
    <div class='viewers' expr:id='&quot;obs-&quot; + data:post.id'>Dilihat sebanyak :<span class='loading' />Kali</div>
</div>

Pada baris yang saya beri tanda atau baris ini Isi dengan Database yang tadi anda buat, ganti dengan url Database yang anda buat pada langkah ke-2 tadi

Selesai, klik SIMPAN template anda