Penghitung Klik pada Link Download / Demo

Monday, November 3, 2014

Penghitung klik dalam sebuah website sering kita jumpai terutama web/blog yang menyediakan link-link download ataupun demo. Ini lebih memperlihatkan sejauh mana pengunjung meng-klik link yang disediakan oleh Administrator. mungkin ini wajib hukumnya jika blog Anda penyedia aneka download

Silakan Klik ❖ ()Lihat Demo

Pemasangan ini merupakan plugin dari firebase, untuk itu sebelum Anda ingin menerapkan dalam blog Anda, silakan registrasi terlebih dahulu disini

Penerapannya

<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('loading');
    var id = $(e).closest('.post-body').siblings('a[name]').attr('name') + "-" + $(e).attr('id');
    var downloadStats = new Firebase("https://ID-data-firebase-anda.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('loading').text(data.value);
    });
    $(e).click(function (e) {
        data.value++;
        if (isnew) downloadStats.set(data);
        else downloadStats.child('value').set(data.value);
    });
});
</script>

div.button-group {
  text-align:center;
  position:relative;
}

div.button-group a {
  display:inline-block;
  vertical-align:middle;
  margin:2px;
  font:italic 14px/32px Georgia,Serif;
  text-align:center;
  color:#fff;
  text-decoration:none;
  text-shadow:0 1px 0 rgba(0,0,0,0.1);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,0.1),0 3px 0 rgba(0,0,0,0.1);
  padding:0 15px 3px;
  border-radius:5px;
}

div.button-group a.download {
  background-color:#82C43A;
}

div.button-group a:hover {
  box-shadow:inset 0 -3px 0 rgba(0,0,0,0.2),0 3px 0 rgba(0,0,0,0.3);
}

div.button-group a:active {
  position:relative;
  top:2px;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,0.1),0 2px 0 rgba(0,0,0,0.1);
}

div.counternya {
  margin:0;
  font-weight:700;
  background-color:#659AE0;
  color:#FFF;
  display:inline-block;
  width:40px;
  height:33px;
  vertical-align:middle;
  padding:0;
  line-height:2.4em;
  box-shadow:0 -3px 0 rgba(0,0,0,0.1) inset,0 3px 0 rgba(0,0,0,0.1);
  border-radius:5px;
}

span.loading {
  background:url(https://www.warnerbros.com/sites/all/themes/wb/images/loading.gif) 50% 50% no-repeat;
  display:inline-block;
  width:30px;
  height:18px;
  margin:0 0 -3px;
}

<div class="button-group">
 <a class="download" data-download-count="true" href="/2014/11/counter-download-and-demo.html">Demo</a>
 <div class="counternya" id="download-count">
  <span class="loading"></span>
 </div>
</div>

Jangan lupa untuk memasang <a expr:name='data:post.id'/> dalam template Anda jika tidak ada, karena ID ini yang akan menjadi ID pada tiap file yang akan dihitung jumlah counternya oleh firebase.

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini