01/12/2016
Add Number of Views on Every Post on Your Website
Blogger ,
Blogging Tips ,
eHow
Today i am going to share with you how to add the number of views gadget on each post on blogger. After trying adding so many times without any good result, Now i have it work 100%.
Follow the steps bellow:
First of all, you have to sign up on FIREBASE.
Sign up : ( Here )
And after signing up sign in to the website, in the APP NAME add your website name and a link will be created automatically. It should be like this : Yourname.firebaseIO.com
Follow the steps bellow:
First of all, you have to sign up on FIREBASE.
Sign up : ( Here )
And after signing up sign in to the website, in the APP NAME add your website name and a link will be created automatically. It should be like this : Yourname.firebaseIO.com
Look at pictures:
 |
| 1 |
 |
| 2 |
Now go to Edit HTML, back up your template and use Ctrl + F , Look for : ]]></b:skin>
- Past the bellow code above it
/*-------- Post Views ----------*/
#views-container {
width: 75px;
float: right;
}
.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP-PvBmT18CMmjdLVzZTAf3j5uc0h45j5n2RUfLd1Aa4mNBK0M7iISB-yMbOxw2ONGW0ithcOpT5NSRjyd62HCYOUmscknz129uxB3JU02-7htir5U-F8JT-IteD6wHPvxOc0M6XlchMqB/s320/mbtloading.gif') no-repeat left center;
width: 16px;
height: 16px;
}
.viewscount {
float: right;
color: #EE5D06;
font: bold italic 14px arial;
}
.views-text {
float: left;
font: bold 12px arial;
color: #333;
}
.views-icon{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-NfKD7-WU1hbYXO2biWtX7v53AbBsy0fCInvAcviTRpVEcZFaLnWv8NAbGwGGOJIpRzQ1viWEnxuMRV76jPz8ozm6ddcXg_J0psgXaH6w5PGZku-DB8QDqlFDHQDQ3ey3O1j-wMnBGtk/s1600/adnaneg.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}
- Now find : </body>
- Copy and paste the code bellow above it
<!-- Post Views Script by MBT -->
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($('a[name]'), function(i, e) {
var elem = $(e).parent().find('#postviews').addClass('mbtloading');
var blogStats = new Firebase("https://yourname.firebaseIO.com/pages/id/" + $(e).attr('name'));
blogStats.once('value', function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr('name');
isnew = true;
}
elem.removeClass('mbtloading').text(data.value);
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').set(data.value);
}
});
});
</script>
NOTE: change yourname with your name that you created on firebase
- Now find: <data:post.body/>
- Paste the code bellow right above it
<!-- Post Views Counter by MBT-->
<div id='views-container'>
<span class='views-icon'/><div class='views-text'>
Views:</div>
<div class='mbtloading viewscount' id='postviews'/>
</div>
Note: You may find more than once of (<data:post.body/>) , Keep trying adding the code above each one until it works for you.
Save your template and enjoy!
Do not forget to share the article with your friends and leave a comment.
! DO NOT re-post this article's codes as new post on your blog., Just use them to add the gadget to your blog.
Subscribe to:
Post Comments (Atom)
Great App! Highly recommended!
ReplyDeleteThanks
ReplyDeleteAwesome Also helpful this article.
ReplyDelete