Obesity Strike: Memasang Download Counter pada Blog dengan Plugin dari Firebase

Update 19 Januari 2015, auto refresh count after click the button

Memasang Download Counter pada blog mungkin sangat dibutuhkan bagi blog yang berisi tentang download software maupun template, karena dengan adanya plugin tersebut, pungunjung maupun admin dapat mengetahui seberapa banyak file tersebut telah didownload / diklik.

Download counter ini menggunkan plugin dari firebase, jadi bagi anda yang ingin memasangnya anda harus registrasi dulu di firebase, ikuti langkah demi langkahnya dibawah ini.

Demo

• Membuat Akun Firebase
• Membuat Data Firebase
• Memasang Download Counter pada Blog

Membuat Akun Firebase

Silahkan lakukan registrasi terlebih dahulu di Firebase, klik disini

Membuat Data Firebase

Untuk membuat data firebase bisa lihat gambar dibawah ini :

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

Memasang Download Counter pada Blog

Pada dasboard blogger, pilih menu Template

Edit HTML, dan cari kode </b:skin> atau </style>

Letakkan CSS Berikut tepat diatas kode yang anda temukan pada langkah no 2

.center {
    text-align:center
}
a.download {
    background-color: #82C43A;
    display: inline-block;
    vertical-align: middle;
    margin: 2px;
    font: italic 14px/32px Georgia, serif;
    color: #FFF;
    text-decoration: none;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px -3px 0px rgba(0, 0, 0, 0.1) inset, 0px 3px 0px rgba(0, 0, 0, 0.1);
    padding: 0px 15px 3px;
    border-radius: 5px;
    margin:0 0 10px;
}
a.download:active {
    position:relative;
    top:2px;
    box-shadow:inset 0px -1px 0px rgba(0, 0, 0, 0.1), 0px 2px 0px rgba(0, 0, 0, 0.1);
}
.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
}
.download-count {
    font:bold 12px arial
}
.download-count span {
    color:#289728
}

Cari kode <div class='post-header'>

Salin dan tempelkan HTML dibawah ini tepat dibawah kode yang kamu temukan tadi

<div class='obs_id' expr:id='data:post.id'/>

Sekarang cari kode </body> , dan letakkan Javascript dibawah ini tepat diatasnya

<script src='http://cdn.firebase.com/v0/firebase.js' type='text/javascript'></script>
<script type='text/javascript'>
// <![CDATA[
$(function () {
    var a = $('.obs_id'),
        b = $('.obs_button'),
        id = a.attr('id'),
        e = new Firebase('ID_FIRE_BASE_KAMU' + id);
    a.each(function () {
        e.on('value', function (snapshot) {
            var data = snapshot.val();
            if (data == null) {
                data = 0;
                e.set(data);
            }
            b.find('span').removeClass('loading').html(data);
        });
        b.children('a').click(function () {
            var z = parseInt($(this).siblings('.download-count').children('span').text());
            z++;
            e.set(z);
        });
    });
});
//]]>
</script>

Silahkan ganti ID diatas yang saya Mark dengan ID data firebase yang anda buat pada langkah Membuat Data Firebase

Terakhir, SImpan Template anda

Pastikan blog anda sudah terpasang plugin JQuery

bila belum ada silahkan cari kode </head> , dan letakkan JQuery dibawah ini tepat diatas kode </head>

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

Cara menggunakan pada Blogspot

Pada menu Pos Blog silahkan pilih HTML bukan Compose, dan letakkan HTML dibawah ini :

<div class="center obs_button">
<a class="download" href="URL_DOWNLOAD" target="_blank">Download Now!</a>
<div class="download-count">Diunduh sebanyak : <span class="loading"></span> Kali</div>
</div>

Silahkan ganti url yang saya Mark dengan url anda.

Selamat Mencoba