Display Post Views Count in Blogger - New!

blogger postviews pluginYes you heard it right, all BlogSpot blogs will now be able to display a dynamic count for individual pageviews. We can now easily create this  post view counter without worrying about servers or server code. With a free service like Firebase you can now create dynamic and data-driven plugins for blogger without worrying about backend development. Firebase was launched in April 2012 and since then it had been the hub for developers. Amazingly this free plan gives you 10GB Free bandwidth and 5GB Free storage. Which in our case is more than required! We had been lucky to utilize this free service for blogger platform and create some amazing scripts with the help of our developer Ahmed Nasir. Today's tutorial will help you to install a dynamic script that will automatically increment its initial count value when a visitor views your blog posts. The counter data will be stored on a free database provided by Firebase. Lets first see a demo!

UPDATE: Unfortunately firebase is no more free now, its Hacker free plan allows only 50 Max Connections which means it will work for small blogs with just less than 100 visitors per day



Note: The postviews count wont change when you refresh the blog homepage but it will change only when you visit individual posts.

1. Create your Firebase Account

In order to gain access to a free database and be able to keep a backup of your postviews counter data, you must 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.

2. Create a Firebase Database

You can create 2 firebases. At present just create one, we will guide you later in coming posts about amazing things you can play with this free service.

  1. Towards the bottom right side of your account, you will find the following submit box.

creating a firebase

  2.   Inside this box input your website name. In my case I inserted mybloggertricks and this generated the following firebase URL: https://mybloggertricks.firebaseio.com

  3.   Finally hit the create button and note down your firebase URL because we would need it later in this tutorial.

3. Installing Postviews Plugin

  1. Go To Blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. Tick the box "Expand widget Templates"
  5. Search for ]]></b:skin>
  6. Just above it paste the following CSS code:

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

.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHHYkd_OUt2PdAsKRVoAXdwZzn1_uD9adlxAgcQ6nv0Cj96_7rXYabsfiM_XhW7Q-odBUlqPtlnwqr-ljQvwhyphenhyphen-PEC-yupuTEjvLpt3nEFMkfqnqAgl4mDZ4lhrCzLF5hYf0JG7Od-Pc4e/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;

background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS9xFG-WYx_ddHQtKxvNA87IW9Cl3NTTLL7YhyucP3cZoAgN9hS4liEveFAMm_Rt_4cbva4HitGTArBH-RsMtX6EcZEtZvEyS5DoJlZ4ejls5ZU47F06A2jSA0dVkE6U988XUp6qGLQBzv/s1600/postviews.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;


  • 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 src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
$.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://mybloggertricks.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;

Make this change:

  • 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:


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


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 your Google 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:

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »


We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Thanks Qasim! I was searching it from a long time. Firebase is really great. :)

  2. Wait why mine is just displaying loading icon instead of views number. Is it fine if I put it next to the post-label

  3. It's really very helpful. Thanks for the post.

  4. Will the count begin from zero or will it display the actual number of pageviews the post got ?

  5. @Tanmay Kapse

    According to what I see right now. It's counting from 0. I maybe wrong though. :D

  6. This comment has been removed by the author.

  7. Amazing, But i want to know how can i add facebook + blogger comments box together with admin reply button Please reply. You are not reply my any queries, I hope this time i got my answer

  8. Very basic thought yet never introduce, will certainly help blogger hosted blogs to add this good feature. Great innovation MBT !

  9. I was in search for this since long time

    Installed and working great ;)

    Great Work Bro :D

  10. But the drawback is that this does not show the actual Views of the post

  11. Great plugin, but I have one problem, it interferes with my post summary text. I would like to move it away. Can you help?

    Blog: www.togetheragain2013.com

  12. Mohammad sir,
    I am very disappointed to say that blogger is not replying me at all. I did whatever you said and I didn't received even a single email from them.
    One more blunder, my traffic has fallen from 800 pageviews a day to just 70. Please help me out sir! How to get my traffic back?!! I need your help!

  13. Another great article keep it up bro :)

  14. Great!


  15. Can i use the same firebase database for Multiple blogs?

  16. I corrected my above issue. I added padding to achieve space between my post summary and the counter.

  17. seriously, you guys are amazing and thanks for this plugin...but it's not first....i has used a view counter widget in past, which was php based (you have to upload that file to a php hosting to use that plugin).

  18. @Tan Nguyen

    You might have forgotten to replace the firebase url in step#3. Please create a firebase and then replace the url in the code above. Make sure you have not disabled javascript in your browser.


    I have mentioned in the post that it will count from zero and wont display google analytics stats.


    I guess if you have a 100kbps Net speed then it must work. If you have a net slower then this, then have mercy on yourself! :p

    Whenever I read your comment, I always try to reply captain. :)

    For the comment box of facebook with blogger please read: Add Facebook and Blogger comments inside tabs

    That means a lot :)

    Previously they would host it on their servers but that caused bandwidth problems, thats why it never worked earlier :)

    the drawback is true only for older posts but it will show correct views for the newer one. Glad you liked it captain :)

    @J and K
    Glad you figured it out. The plugin could easily be positioned and aligned by adding margin property to the class:


    All CSS is available. For more help do let me know :)

    I feel bad buddy. If they have not yet replied then may be your case was a serious one. I would encourage you to not loose hope and create a new one with far better unique content. You must introduce your own style and offer us all something new. I am sure this way you will enjoy your work even more like you always did. About the traffic its natural that it will drop because the domain content has been removed.

    You can create a new blog and use the same domain for it as mypremiumtricks. You will be able to refer your readers back to a new blog but the search traffic can't be diverted because your pages are removed.

    You can use it for all your 100 blogs! Enough badnwidth and storage there. :)

  19. @Hardeep Asrani

    You are right buddy. That php plugins did exist as I mentioned earlier in my comment but a Javascript based plugin has been introduced first time thanks to the free service of firebase else even we would not be able to achieve this. :)

  20. Wow..great..really really I like it's my favorite,thanks Mustafa happy nice day 4U and family..from INDONESIA with smile.

  21. Hehehe... thanks bro.
    Yes, I have net speed of 100kbps
    Bas kabhi kabhi dagaa de deta hai ;D


  22. hi
    its not working on my site

    please help

  23. @nani kk
    I see that you have not added jQuery script. Please add this to your template before the views code.

  24. This comment has been removed by the author.

  25. Thanks for worderful info. Like your blog

  26. Great plug-in! Is there a way to place it in the post header? My blog www.togetheragain2013.com uses a large 1st post image. When loading, the counter flashes then disappears behind the image. It doesn't show in any post then.


  27. @J and K .. It is because you have some problem in your existing javascript. If you move the post-views script above the script which is for avatar then it will work.

  28. Found it, fixed it. Works great!

  29. UPDATE

    I forgot to mention the step of adding the JQuery script in your templates. If the image keeps on loading then it is because you have no jquery installed in your template. I have updated the tutorial please read Step#3.10

    Thanks Ahmed for remining it :)

  30. Dear Mohammad,

    Its good to visit your site again and again & i not get any solution of my query, this tutorial is working for other viewers but not running on my blog like your other tutorials. I again request you to see the problem. www.tallyssolution.blogspot.com


  31. Great work brother, keep it up :)

  32. Assalaamualaikum Brother. I want to say that you are a superb coder and developer. I didn't know that Blogger can be so beautiful with the template that you have just installed. I'm commenting after a long time because of some personal reasons. Seeing you blogging makes me feels good. I'll continue with my blogging and hope to make some money off Google Adsense.

    I have a question. I want to know how much can a person earn if he is using Blogspot domain. Please reply

  33. This comment has been removed by the author.

  34. @atif

    Thanks for the kind feedback :)

    @Sumit Kumar Gogawat

    Buddy apply it on your blog first and then let me know. I visited your site but didn't find it. Please first add it.

    For other tutorials you may post all your queries in template customization recipe. I will answer it there soon.

    W.salam brother,

    Its indeed an honor and its a greta pleasure that you are commenting after a long time. I wish you keep visting and sharing your ideas with us.

    About Adsense I would say its earning is not dependant on what platform you use, be it joomla, wordpress or blogger. your earnings depend on your traffic and CTR. I became a premium Adsense publisher at Blogger so the opportunities are hell lot. :)

  35. @Mohammad Mustafa Ahmedzai Dear Mohammad, I have already apply code on the blog and checked twicely, thricely. But i think something happen wrong with my blog. Because when i edit or add a widget my blog did not accept it. I was tried your lots of tutorial on my blog but every time its not working.

    If you check my blog from my email id or password, then i send to you via email. Please help me.

  36. I like the concept very much, but have removed it for now because ity does not load very fast...will try again later.

  37. I added script after head but the views is stills loading.

    this is my blog url.


  38. Thank very mushhhhhhhhhhhhhhhhhhhhhhhhh شكرا جدا

  39. Awesome MTB I have done Here's My Blog


  40. ijin nyimak brooo,sekalian ijin folliw.mau copy paste ya tutorialnya.sekalian follow saja.

  41. license to practice the tutorial guys, follow all licenses and permits would paste copies of most of the article behind the blog follow me

  42. It tried but it is not showing on my blog..Please help me out..


  43. Not showing buddy take a look and help please http://www.animeipics.com/

  44. http://testblogmutnaa.blogspot.com/

    NOT WORKING HERE EITHER,,, seems like firebase recently changed,,,

  45. i'll try this to my blog,,
    btw my blog using your template Salahudin Ayubi and i customize like your's

    here http://www.depermana-share.blogspot.com

    1. hey deddia,
      i wished to know how to get this template that you have on your blog. Its really ausm !!
      Could you help me with it. Please.
      thanks.! :)

  46. Very nice post
    I also add my blog

  47. Thank you for this it works well but it shows wrong visit nos because in blogger view count it shows as 434 nos. But in this way it shows 133 views. why it shows so different.

    My Site: www.odishajobs.co.in

  48. I cannot find the code in my template.Is there another area where I can place the code from step 9#.If there isn't can you tell me where this code is on my template.My web address is
    http://knightsofimhotepebooklibrary.blogspot.com/ Thank you.

  49. This comment has been removed by the author.

  50. This comment has been removed by the author.

  51. thank you code but there is a problem for my site...
    when a page opened it shows first -for example-120 then shows 250... two diferent count. i think first is that page view... second total site view.. how can i fix that.. thnx...
    my site: http://kampanyatakip.blogspot.com

  52. This comment has been removed by the author.

  53. not working..nothing happen..

  54. still have the loading...

    by da way, really great :)

  55. its not working for my blog,, www.hdwalle.com i am useing custom template.. you can design the page-views same like www.hdwallpapers.in can you do it..?? waiting for your reply..

  56. Hotep!

    Great widget, this is why I'm a subscriber to this blog.I have applied this to two of my blogs already.But on my third blog for some reason it never shows the view counts it just keeps loading.Can you take a look at my blog and tell me what I have done wrong.I have 3 tags in my template and when I post the code under the first one it didn't work.When I post it under the 3 one its shows the views but keeps reloading.There is alot of other code surrounding the 2nd occurrence so I didn't try it there. Can you please help me out.


    Thank you

  57. Genius! Thank you Mr. Mohammad Mustafa Ahmedzai
    Fully Working!
    see http://c8computer.blogspot.com/

  58. Doesn't work for me :(((
    In the data base I can see everything, but no counter appears on my posts. Could you tell me why?


    1. It works now, but for the steps 8+9 I placed the code after the 3rd data:post.body/ line that I found, and the visits number appeared at last! :)

  59. the only wonder thing is it takes too much time to show the account.

    my blog : www.ermchen.com

  60. i have jquery v 1.8.3 plugin in my blog. so my question is that will i need to place jquery v 1 script also.

  61. Will it take time to show up? Followed instructions but not appearing yet. Just did it 10 minutes ago...


    1. it's working now... a bit. i'm still trying to relocate it since it overlaps with the body of my post. still trying to figure out the code. not too techy here hehe

  62. MY blog does not seem to work this code although i strongly believe that i have installed your code.
    Can you help me ?
    My blog address: http://youtubehackers.blogspot.com

  63. I have put the code from step by step on my blog http://infokubloggers.blogspot.com/ but the counter not yet display. Please help me to put it on my blog

  64. thank you

  65. Hi mybloggertricks, nice to meet you...

    i just want to tell you, if your tutorial is not working.
    In my blog still loading and not finish, it's so long...
    but after i see blog demo seems working.

    there may be something missing?

  66. Widget are not working please work on and fix it

  67. Why don't you use Google analytic for this?

  68. I was looking for feature like that since long time.
    Really its a great and usefully idea.
    But the widget is not working.
    i did all mentionned in the post , but cant see the count , even the pict of views in my blog http://20-02.blogspot.com/

  69. what about if I want it to display below titles on popular widget? I tried many times but it's not work

  70. This comment has been removed by the author.

  71. Hi,

    Can we give it some initial start up value as we have old posts which have been viewed a nth times and starting it from zero will give a poor impression. Your answer on this aspect will be appreciated.


  72. Hi! I need help... the thing is that I want my posts to be completely visible, not short as they are now, but I don't know how to change the HTLM to make them look the way I want it.
    Please, please help me!!!

  73. NOT RUN in my Template, may be error in javascript interpreter brow

  74. i did it as you said ...followed all the steps but did not worked on my blog....allofmyanswers.blogspot.com
    if you can edit my template i can give it to you..please reply me

  75. thank you brother for posting, it helped once for a beginner like me :)

    1. you commented on my blog but the link you gave and what i got the tutorial...that widgets is not correct ....it show error in html while saving template

  76. I have added this with some little modifications. Why does this show and add post views for every posts...It adds up as page views not post views.


  77. It is all working very well, but the server serving the page data back is far too slow. It takes a long time and the visitor certainly doesn't wait long enough to see the number. http://lastingrose.blogspot.co.uk/2014/05/hello-india-welcome-to-club-of.html
    The server access and serving need to be much much faster

  78. I have checked the database and it seems it is getting updated value with each visit. It looks your routine for updating the html needs some tweeking


  79. Hello,
    Though the dab is getting written to reading back is sporadic and some goes to an ID called more instead of the usual number

    Any idea why more is created ?

  80. The script is creating four piece of data under "name" variable besides ID
    Comments form
    The script then increments all of them for every new page in addition to the
    original page
    The current value of more (-1) is updated in the widget on HTML
    (instead of the value under the ID which is the right one.)

    Has it got anything to do with the version of
    script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/
    which was the one with the original acript.

    The version I have running is the current one

    script src='https://cdn.firebase.com/js/client/1.0.15/firebase.js'

  81. This comment has been removed by the author.

  82. Please see my message above too.

    Could you please take a look at

    which is the DB for a site where the script is actually
    working .http://www.idlebrain5.in/2013/10/shruti-haasan-photos.html
    Could you see if the script actually creates IDs for comments, links and more etc
    for that site.

    I have closely examined the source code of the page to see how the three
    elements , css, script and call have been placed and can't see any difference.

    The problem obviously is in multiple data being created for the same page
    and the script goes for one type (which is created last) like more.

    When a page is selected which doesn't have that purticular element like more
    the script just hangs , not finding the exact match to the previous value.

  83. Well, when the data identifier like <a name= is a string hard coded in to the html like "more"
    the removeClass () works. This is done in the editor when you insert a break from the menu.

    When <a name = it is dynamically created like from code < a expr:name= the MBT code works for creating and updating the Firebase database, but the removeClass function doesn't work.
    Anyone knows how to resolve this?

  84. Hello Mustafa,
    I am quite surprised that you don't support this nice script created by you.
    I get this in my data base , but the addClass/ removeClass functions fail.
    Why was the 2014 Indian parliament election anything but free and fair and ignored by western media?
    value: 2

    I request you to please solve this issue.

  85. This comment has been removed by the author.

  86. thanks. it worked. i did it my blog

  87. Thanks..In my case, the counter does not increase after 1. LEt me know where I could be wrong

  88. Humble apologies for the delayed response. I have been busy over the months and just happened to look back at the code. I have noticed that Firebase has started its premium plans aslo, it could be the reaoson that some changes might have been introduced in send/receive requests. I will review the script and get back with a more updated script

    Thank you for finding it so useful and worth trying. Means a lot :)

  89. It won't work by me? I add all codes into blogger (html). How to enable it at firebase.com?

  90. Unfortunately this free service by firebase is limited to 100 Database connections which in other words means that we can no more use it on multiple sites with consistent flow of traffic.

    Google now charges $25/month for this service. :(

    We tried our best developing this code first time for blogspot blogs but looks like Google Firebase is no more in mood to offer free lunch!

    We can setup this plugin for premium clients if they can bear the firebase $25/month expense.

  91. hey there mohammad, firebase released major update on oct 2016 and it is now up with new console