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- Towards the bottom right side of your account, you will find the following submit box.
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.- Go To Blogger > Template
- Backup your template
- Click Edit HTML
- *Search for
5. Paste the following Styles just above
/*----- download counter by MBT-----*/
.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEwDpIctw2OpkcaRIh9yKAUygwnix27Fq5wtZGqdU2BYeZLIq3PMl9PD0JvD-vrBA9dkXaNZLGMpW-h-FB29bcY0lD_aIle5XoQEBVmHuE0YocW4TM6xFKgJkaEI6oXvA5XGcro4aCQvrg/s320/mbtloading.gif') 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
and just above it paste the following script:
Replace mbtblogstats with your Firebase name that you created in step#2.
7. * Now search for and paste the following JQuery library just below
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:;">width:120px
Download Now!
- 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.
0 Comments
Good day precious one, We love you more than anything.