Click Below Ad for Leaning Blogging Tricks.
Also Read:-Add Socialize it bar below Post Title in Blogger
We are very lucky to add this plugin only in blogger platform and create some dynamic script with the help of this tutorials.
Once you have seen demo then you add this plugin in your blog.Click on This demo link to see Live demo.
DemoI Hope you have seen this demo and you like this,So Read my instruction to add this plugin in your blog.
How To add Display posts Views count in blogger:-
- Create your free account on Firebase
- Click here to sign up now!
- Enter your Email address and Password, Click on Create accont
- Now create a new app Like this image
- You can insert your app name and app url , not this
- Now copy your Firebase URL
- Go to Blogger Dashboard>>Template>>Edit HTML
- Find this code ]]></b:skin> using (Ctrl+F)
- Just above it paste the following code
/*-------- Post Views by www.softwayrko.blogspot.com ----------*/
#views-container {
width: 85px;
float: right;
}
.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCWYe-iMp7ZkH6WigreKI_Ir4vaFlXE73g4eW8xY0XjBbi2BzGonKEVjhtRJotxbiAQZU9LclAtKhGmaAtnJqxk1XKcatY6zDvjBkRJEPPOMPn07vGaBFyTfBMsBdNlUnIeo5OOVGfl6ok/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/AVvXsEjMI63w1aEnsURdU1tRwgPZ67dtwa-Yc3XL-073DMzqjTINJ6XFh9tSwKbpW7yWt_kD7x2EB-h1FZQSoiXmQ-A8COs26P3DtdfZ222-3j15NmbiSmt0Y2-hQPmBLsXjHX7x_rUY-Np98qgJ/s1600/postviews.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}
- Now find this code </body>
- Copy the Javascript code beore/above </body>
<!-- Post Views Script by www.softwayrko.blogspot.com -->
<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://softwayrko.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>
- Replace https://softwayrko.firebaseio.com with your Firebase URL
- Now find this code <data:post.body/>
Note:If you have seen maximum number of <data:post.body/> then choose the last two <data:post.body/>
- Paste the following code before <data:post.body/>
<!-- Post Views Counter by www.softwayrko.blogspot.com -->
<div id='views-container'><span class='views-icon'/><div class='views-text'>Views:</div> <div class='mbtloading viewscount' id='postviews'/></div>
- Now the last step find this tag <head>
- Paste the Jquery Code after <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
- If this Code already add your template then no needs to add this code
- Finish Enjoy!
Final Words
Visit your blog and refresh the page using press key F5 I f you are not successful in this process or if you getting errors during this process , so write your problems in comment box and don't forget to click on like button or join my Facebook Page.
Happy Blogging!
0 blogger-facebook: