Ads Top

Download counter : A Plugin for blogs!

Download counter for blogsThis is the first plugin of its kind created for websites which share downloadable resources. The plugin amazingly works with all major blogging platforms like wordpress and blogger blogs. It can even be used in static Sites or any CMS you may be using. This tool will count and display download stats whenever a visitor downloads a resource form your site. The data is stored at your firebase free account. Luckily we are amongst very few who have started developing tools using the newly introduced Firebase system that allows developers to create dynamic and data-driven tools without worrying about backend development. You do not need to worry about server code or managing databases, firebase does it all for free. All you need is to code some delicious scripts that does half the work.  This plugin is a custom alternative to Dstats download tracking service. Lets add this amazing tool to your blogger blogs!


The following link will take you to our first plugin created with Firebase.

Note: If you have already followed our first tutorial on firebase then ignore steps marked as (*)

1. Create your Firebase Account *

To store your data for downloads, you will first sign up for a free account at Firebase.

Fill up the easy steps sensibly and then once your account has been activated, you must create your first Firebase database as guided below in step#2.

2. Create a Firebase Database

Previously you could only create 2 firebases but now you can create a total 5! So create one for your download stats data

  1. Towards the bottom right side of your account, you will find the following submit box.

create firebase

  2.  Give your firebase a short name. In my case I named it mbtblogstats. This name will be used as your unique Identification.

  3.   Hit create and note down your firebase URL because we would need it later in this tutorial.

Installing Download Counter Plugin:

The steps below are for blogspot blogs. Wordpress users may simply note down the method and apply accordingly on their WP powered blogs.

  1. Go To Blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. *Search for </b:skin>.  Click the black arrow to expand the code.

compressed blogger stylesheet

   5.  Paste the following Styles just above </b:skin>

/*----- download counter by MBT-----*/

.mbtloading {
background: url('') no-repeat left center;
width: 16px;
height: 16px;

.blog-stats {
color: #289728;
font: bold italic 18px georgia, arial;
float: right;

You can easily change the color and size of the Numeric Text count by editing   #289728

Tip: Use our color generator Tool to pick a color of your choice

6. Now search </body> and just above it paste the following script:

<!-- Download Counter by MBT starts-->

<script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);
<script src='' type='text/javascript'/>
$.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;; + 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;
   = id;
            isnew = true;
    $(e).click(function (e) {
        if (isnew) downloadStats.set(data);
        else downloadStats.child(&#39;value&#39;).set(data.value);

<!-- Download Counter by MBT Ends-->

Replace mbtblogstats with your Firebase name that you created in step#2.

     7.  * Now search for <head>   and paste the following JQuery library just below <head>

<script src='' type='text/javascript'></script>

You may not add the jquery code if you have already linked to Jquery library in your blog.

      8.   Save your blog and you are all done with coding!

Displaying Download stats in Posts

Now whenever you wish to display download stats for a particular file. Simple link to your file using the code below:

<div style="width:120px;">
<a data-download-count="true" href="#">Download Now!</a>
<div class="blog-stats" id="download-count">

  • Replace the # sign with your File link.
  • You can write anything instead of Download Now! If your link is bigger in length then increase the width of the counter so that it shows the count in alignment.

Need Help?

I just hope this new plugin proves helpful for blogger users who are missing a database access. I am sure this plugin is the second best use of FireBase which is indeed a magic hub for developers. I would really appreciate you to use it for your projects. Please ask me any query you may have and feel free to share your precious views. Have fun buddies. Peace and blessings be upon you all always. :)


Note: All questions with links will be deleted no matter how important the question be. Avoid Spamming please.


adsense adsense optimization adsense tips Animation Announcement Apps Background backlinks Basic blog Blog Design blogger Blogger Design Blogger Hack blogger pages blogger posts Blogger Security Blogger Special Tricks Blogger Templates Blogger Tips Blogger Tips & Tricks Blogger tools blogger tricks Blogger Widgets Blogger Widgets and plugins Blogging Basic Tips Blogging ethics Blogging tips Blogging Tools Blogging Tricks Btemplates 2013 Btemplates 2014 Bugs and Errors click bombing Comments css CSS and HTMLTricks CSS3 Cursors custom domain Design Drop Down Menu Earning Tips Editing emoticons Events Facebook Facebook tricks Featured Content Slider firebug Flash Free Coupons Free Recharge Gadget Generator Google Google AdSense Google Analytics Google Plus Google Plus Tricks Guest Posts Horizontal Menu How To HowTo Tuts HTML Image Image Effects Increase traffic instagram Interesting invalid clicks Java Script javascript jQuery Label labels Link Building Links LOGO Makers Make Money Make Money Online Marketing Menu bar menus Menus for Blogger Multi Tabbed Navigation navigation menu News Numbered Page Optimizing Other Tricks Page Photoshop Pop Out popular posts Post posts presentations Pure CSS Menu recent comments recent posts related posts Responsive Blogger Templates robots Rss Search box SEO SEO Strategy SEO Tips & Tricks sitemap Slide Show slideshows Social Media social media plugins statcounter static pages Style your Blog swf Tab Menu Template Template Designing Template Tricks Templates templates 2016 threaded comments Tips tools Traffic Tips Twitter Unlock modems Vertical bar Video Wallpapers Web Designing web hosting Webmaster Tools Widget Widget Generators Widgets wordpress WordPress Plugins WordPress Themes WordPress Tricks WP Tips
Powered by Blogger.