Display Page Counter Plugin in Blogger....

Today i am share this knowlege for you how can add post views plugin to bl0gger, p0st views plugin should be blogger show right uperside blogger post above it nice views and all post through begain one or one define different views in diff3r3nt post. easily create and install this code not worry server problem and any one. that was with a free like firebAse this service to e@sily create a dynamic drive it data-driven no need requirement mean space no required GB space and etc.
FirebasE was launched in April 2012. you can here and provide blogger 10GB Free Brnadwidth and 5GB free storage this is really #nough for bloggers.


it is found on other blog so represent here for knowledge sharing,,,,,,,,,,,,,,,,,,,,,,


Create Firebase Account

Sign up free account benefit of store your database of your post views.

• Signup at Firebase

Once upon fill all your correct details and submitted it create account.

Create a Firebase Database

1. At the bottom side show in box you will get following the create box.

                                 
2. Insert Your blog name text field. in my case i am inserted MyBloggersTricks.

3. Press Create Button. i think press the button firebase will be create as:

4. Note Down your firebase URL any text editor like use notepad so need will in my tutorial.

Installing Post views Plugin

1. Go Blogger Login Dashboard
2. Backup your template before any changes
3. Click Edit HTML
4.  find ]]>
5. Just Paste it above following CSS

/*-------- Post Views  ----------*/
#views-container {
width: 85px;
float: right;
}

.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUw6bNRjV3t0Ts-JUg5UycVs8_M0OlwZuRWCCf6z1tJX8s51UFVGQoYBKtvO26n7gpsOxnder9n8JBT6iuXevTQKH2OrUCTqFPbR7Ct8vjACjSppRGz2qVn1bzJ4PIZd-Od0GGboinF0wi/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/AVvXsEhGRwWPqYeXGJD14PUZtZu4ClE0lb4yZhajjDlJ6AzKtwyGTFwHCOb6ab1fuazpJFtzOEMNC48XW2T5QrZYqS00LRhyphenhyphenBe9m_LAX1FtB4yXmgnsGJye1f_6oAjrXrAPZv2jXGW5Qk3nPxdiq/s1600/postviews.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}

Customizations:

• To change the text color of the numeric count, edit #EE5D06
• To change the plugin alignment, change RIGHT TO LEFT

   7.  Next search for </body>  and just above it paste the following JavaScript code:

<!-- Post Views Script by MBT -->
<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;a[name]&#39;), function(i, e) {
var elem = $(e).parent().find(&#39;#postviews&#39;).addClass(&#39;mbtloading&#39;);
var blogStats = new Firebase(&quot;https://abc.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;));
blogStats.once(&#39;value&#39;, 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(&#39;name&#39;);
isnew = true;
}
elem.removeClass(&#39;mbtloading&#39;).text(data.value);
data.value++;
if(window.location.pathname!=&#39;/&#39;)
{
if(isnew)
blogStats.set(data);
else
blogStats.child(&#39;value&#39;).set(data.value);
}
});
});
</script>

• Replace the highlighted brown line with your firebase URL (Step#2). Make sure you replace it correctly by taking care of forward slash (/)

    8.  Now one last step. Find this code:

   <data:post.body/>

Note: If you are finding multi occurrences of the same code then choose the first occurrence.   

   9. Just above it paste the following HTML,

<!-- 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>

You can replace views: with any text you like.

    10.  Now the final step, paste the following jquery link just below <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

    11.  Hit save and you are all done!

Visit your blog and press F5 (refresh page) to see the counts dancing just perfectly! :)

Copyrights

Developers and niche bloggers are most welcome to share this  Plugin with their readers and friends. Please attribute the credits back to MBT blog as the only favor in return. It takes hours of efforts to write and debug these scripts. This plugin comes under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Need help?

We just hope this plugin adds new fuel to your blogger powered blogs. We tried best to keep it working as efficient as possible. You wont run out of bandwidth as long as you create your own Firebase accounts and not use ours (our firebase url). 

This plugin will display views only once pages are visited. It is not synchronized with yourGoogle analytics stats data, therefore it will only display correct views for the new posts that you publish.

Let me know if you needed any help. We have some more interesting scripts coming up this week. Stay tuned! Peace and blessings buddies :)

Don't forget to try:

Posted in: