Memasang Download Counter pada Blog dengan Plugin dari Firebase

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.
Sebenarnya cara ini saya temukan dalam sebuah blog yang bernama Ebloggertricks .
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

I. Membuat Akun Firebase
Silahkan lakukan registrasi terlebih dahulu di Firebase, klik disini

II. Membuat Data Firebase
Untuk membuat data firebase bisa lihat gambar dibawah ini :
   

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

III. Memasang Download Counter pada Blog
1. Pada dasboard blogger, pilih menu Template
2. Edit HTML, dan cari kode </b:skin> atau </style>
3. Letakkan CSS Berikut tepat diatas kode yang anda temukan pada langkah no 2

a.download {
    background-color: #82C43A;
    display: inline-block;
    vertical-align: middle;
    margin: 2px;
    font: italic 14px/32px Georgia,serif;
    text-align: center;
    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;
}
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);
}
.counternya {
 color: #289728;
 font: bold 12px arial;
}
.counternya:before {
 content:'Diunduh Sebanyak : ';
}
.counternya:after {
 content:' Kali';
}
.counternya:after, .counternya:before {
 color: #000;
}

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

<script src="https://cdn.firebase.com/v0/firebase.js" type="text/javascript"></script>
<script type="text/javascript">
$.each($('[data-download-count=true]'), function (i, e) {
    var elem = $(e).parent().find('#download-count').addClass('loadinge');
    var id = $(e).closest('.post-body').siblings('a[name]').attr('name') + "-" + $(e).attr('id');
    var downloadStats = new Firebase("https://apa-aja.firebaseio.com/counter/id/" + id);
    var data = {}, isnew = false;
    downloadStats.once('value', function (snapshot) {
        data = snapshot.val();
        if (data == null) {
            data = {};
            data.value = 0;
            data.url = window.location.href;
            data.id = id;
            isnew = true;
        }
        elem.removeClass('loadinge').text(data.value);
    });
    $(e).click(function (e) {
        data.value++;
        if (isnew) downloadStats.set(data);
        else downloadStats.child('value').set(data.value);
    });
});
</script>

5. Silahkan ganti ID diatas yang saya beri garis bawah dengan ID data firebase yang anda buat pada langkah ke II
6. Karena kebanyakan pada template sekarang penggunaan ID dari expr:name dihilangkan karena menyebabkan warning pada Validasi HTML5, maka anda perlu memasangnya kembali, karena ID ini yang akan menjadi ID pada tiap file yang akan dihitung jumlah counternya oleh firebase, silahkan cari kode <div class='post hentry dan, letakkan XML berikut ini tepat dibawahnya : 

<a expr:name='data:post.id'/>

7. SImpan Template anda

IV. 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>

V. Cara menggunakan pada Blogspot
Pada menu Pos Blog silahkan pilih HTML bukan Compose
dan letakkan HTML dibawah ini :

<a class="download" data-download-count="true" href="http://link_anda.blogspot.com/">Download Now!</a>
<br />
<br />
<div class="counternya" id="download-count">
</div>

Silahkan ganti url yang saya beri garis bawah dengan url anda.

Selamat Mencoba

Tweet