Widgets

Posted by : Bloggerwits Thursday, April 2, 2015

Download counter plugin
If your site is based on downloading stuff and you want to count no of downloads on each file, then you came on the right page, because today I am going to make a step-by-step tutorial through which you can easily count no of downloads. It will give you a kind of picture that, how much your files are downloaded each day or it shows popularity of your blog. When the number of downloads increase, your page rank will also be increase. Because search engine sees the no of backlinks and visitors on your blog and rank post according to their popularity

How to Add Download Counter Plugin In Blogger?

First of all Sign up for Firebase and fill out few easy steps and note your Fire base name/address. 
Step 0- Always Backup your Template
Step 1- Select your blog and click on "Templates" and "Edit HTML"
Step 2- Click inside the code area and press "CTRL + F" for search box, and search
 ]]></b:skin>
Step 3- Paste code "Above"   ]]></b:skin> Tag
/*----- download counter by BW-----*/
.mbtloading {
background: url('http://4.bp.blogspot.com/-PZMStRDcchY/USOp3xFp4yI/AAAAAAAAJOo/rm5FSsaSKh0/s320/mbtloading.gif') no-repeat left center;
width: 16px;
height: 16px;
}
.blog-stats {
color: #289728;
font: bold italic 18px georgia, arial;
float: right;
}
Step 4- Now Search for </body> and just above paste this code
<!-- Download Counter by BW starts-->

<script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);
  </script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($(&#39;[data-download-count=true]&#39;), function (i, e) {
    var elem = $(e).parent().find(&#39;#download-count&#39;).addClass(&#39;mbtloading&#39;);
    var id = $(e).closest(&#39;.post-body&#39;).siblings(&#39;a[name]&#39;).attr(&#39;name&#39;) + &quot;-&quot; + $(e).attr(&#39;id&#39;);
                          var downloadStats = new Firebase(&quot;https://mbtblogstats.firebaseio.com/downloads/id/&quot; + id);
    var data = {}, isnew = false;
    downloadStats.once(&#39;value&#39;, function (snapshot) {
        data = snapshot.val();
        if (data == null) {
            data = {};
            data.value = 0;
            data.url = window.location.href;
            data.id = id;
            isnew = true;
        }
        elem.removeClass(&#39;mbtloading&#39;).text(data.value);
    });
    $(e).click(function (e) {
        data.value++;
        if (isnew) downloadStats.set(data);
        else downloadStats.child(&#39;value&#39;).set(data.value);
    });
});
//<![CDATA[
$(document).ready(function () {
  //checks if the number of posts on this page are more than one then return.
  if($('.post-outer').length > 1)
  return;
  //selects the element to be made sticky.
  var stickElement = $('.date-header'),
    //selects the element which would trigger the sticky elem to go away
    hideTrigger = $('#comments'),
    //class name to be added (it should match the class in CSS)
    fixed = "fixed",
    top = stickElement.offset().top;
  $(window).scroll(function (event) {
    var y = $(this).scrollTop();
  var maxY = hideTrigger.offset().top;
    if (y >= top && y < maxY) {
      stickElement.addClass(fixed);
    } else {
      stickElement.removeClass(fixed);
    }
  });
});
//]]>
</script>
<!-- Download Counter by BW Ends-->
Replace bloggerwits with your Firebase name, which you have created at the beginning 
Step 5- Now search for  <head>  and paste below jQuery library code
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
How to show download stats on post
Well, if you want to show download stats on each post, all you need to use this code 
<div style="width:120px;"> 
<a data-download-count="true" href="#">Download Now!</a> 
<div class="blog-stats" id="download-count"> 
</div> 
</div>
 Replace # with your download file link
Step 6- "Save Template" 

{ 7 comments... read them below or Comment }

  1. Can you tell by Ip from each computer?

    ReplyDelete
  2. thanks so much i have done :) this my site you can look https://cubbelihocasohbetlermp3.blogspot.com.tr/

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Replies
    1. Yes code has been copy pasted

      Delete
    2. Yes code has been copy pasted

      Delete
  5. how can you replace the download now with an image?

    ReplyDelete

Popular Post

Copyright © 2014 Bloggerwits