How to add Post Viewers counter widget to Blogger?

How to add Post Viewers counter widget to Blogger?

Important step: First sign up on Firebase.com and create an app with any name and get the url as seen below

Now follow the below steps.....

1. Search for the following code 

]]></b:skin>

2. Add the below code above "]]></b:skin>"

/*-------- Post Views  ----------*/#views-container {width: 85px;float: right;}.mbtloading {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHDzOpMKhSzThoZfCDagC4CviCZnlWbFF0Ba9apwhhmUTVFghEtua2fGEI7FEWt2M-9fe6N9ZxEsRDhON143c3gzhJev1vTYGiUW9L_CDj9-757nFnoyvumJZizsSEmib3ktGiezWRpdE8/s320/mbtloading.gif') no-repeat left center;width: 16px;height: 16px;}.viewscount {float: right;color: #E68A00;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/AVvXsEj-e0zCAW2HsM78nyP-QejwGjT-KFLeAs2iSkDJHjfPNsBzokKMfH9fmwKDOUinbGB8dGTGMk3J8hHitNHmuyNJaseioTR4K6SyPrYoW_TF9o7GPmTnRdpquJMlzvEPVDFmvVXDh7-gjqk/h120/stats.gif') no-repeat left;border: 0px;display: block;width: 16px;height: 16px;float: left;padding: 0px 2px;}

3. Search for the one of the below code

<data:post.body/>

or

<div class='post-footer-line post-footer-line-1'>

or

<div class='post-footer-line post-footer-line-2'>

or

<div class='post-footer-line post-footer-line-3'>

4. Paste below code below/above one  of the above code.

<b:if cond='data:blog.pageType == &quot;item&quot;'><!-- Post Views Counter --><div id='views-container'><span class='views-icon'/><div class='views-text'>Views:</div> <div class='mbtloading viewscount' id='postviews'/></div></b:if> 

5. Search for the below tag.

</body>

6. Now add the below code above "</body>"

<!-- Post Views Script --><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://cstufians.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);elseblogStats.child(&#39;value&#39;).set(data.value);}});});</script>

7. Replace cstufians.firebaseio.com with your firebase url.

8. Enjoy the widget and post your reviews...

Related Post