How to Add Post Views Counter in Blogger ? 2022

In this post I will share how to add post views counter in blogger. If your blog is made on the Blogger website, then this post of ours can be very useful for you. Because I am going to talk about a very important topic through this post in which I will tell you how to apply post view counter in blogger's post?

You must have seen that some posts have Post Views Counter so that you can know very well how many people read articles in that blog in a day.

If you want to set some similar post view counter in your blog then read our post carefully where I will tell you how you can set post view counter in your blogger's block without doing Coding.

How to Add Post Views Counter in Blogger ? 2022

What is Post Views Counter ?

Whenever someone comes to read your post, first of all he will see your post count and a positive thing will come in his mind that he should read your article completely. Post view counter gives good user experience to your blog. To make this blog user friendly, post views counter is very important and you must definitely put post views counter on your blog.

I have used html, css, javascript, jquery and firebase to create this post views counter. I minified all the javascript in the post view counter so that it doesn't affect the loading speed of your block. For this you neither need to create firebase account nor create any kind of database on firebase. I have already setup all of these by default.

How to Add Post Views Counter in Blogger ? Step By Step

  • First Login Your Blogger Account.
  • Copy the Css Code Below and Then Paste it Before </head>.
<!--[ Post Views Counter Css By techpriyo.Com ]-->
<style>
/*<![CDATA[*/
.views-counter{display:flex;justify-content:space-between;position:relative;font-family:inherit;font-size:13px;padding-top:9px;padding-bottom:20px;color:#08102b;-webkit-font-smoothing:antialiased}
.views-counter >*{padding:12px;background:#fffdfc;box-shadow:0 5px 35px rgba(0,0,0,.07);border-radius:6px;display:flex;align-items:center;justify-content:center}
.views-counter span:nth-child(2){margin-right:3px}
.views-counter svg.line{fill:none!important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;width:18px;height:18px;margin-right:4px}
.views-counter svg.line .svgC{fill:none;stroke:#482dff}
/*]]>*/
</style>


  • Copy the Code Below and Then Paste it Before <data:post.body/>.

<!--[ Post Views Counter By techpriyo.Com ]--> <div class="views-counter"> <span><svg class="line" viewBox="0 0 24 24"><g transform="translate(2.000000, 4.000000)"><path class="svgC" d="M13.1643,8.0521 C13.1643,9.7981 11.7483,11.2141 10.0023,11.2141 C8.2563,11.2141 6.8403,9.7981 6.8403,8.0521 C6.8403,6.3051 8.2563,4.8901 10.0023,4.8901 C11.7483,4.8901 13.1643,6.3051 13.1643,8.0521 Z"></path><path d="M0.7503,8.0521 C0.7503,11.3321 4.8923,15.3541 10.0023,15.3541 C15.1113,15.3541 19.2543,11.3351 19.2543,8.0521 C19.2543,4.7691 15.1113,0.7501 10.0023,0.7501 C4.8923,0.7501 0.7503,4.7721 0.7503,8.0521 Z"></path></g></svg><span expr:data-id="data:post.id" id="viewscount"></span>Views</span> </div>
  • Copy the JavaScript Code Below and Then Paste it Before </body>.
<!--[ Post Views Counter JavaScript By techpriyo.Com ]-->
<script>
//<![CDATA[
javascript('views_counter');
//]]>
</script>


  •  Finally, Don't Forget To Click on Save Theme And Then See The Result.

Conclusion

This is an easy way to create post view counter in blogger with firebase that you can use in your blogger website or any web design project.

In this post, I shared how to add post view counter in blogger. I hope this way to create post view counter in blogger can be very useful for you and your blog. Thank you for visiting our new website.