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

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 us
How to Add Post Views Counter in Blogger

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.

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

  1. First Login Your Blogger Account.
  2. Then Select Theme Menu.
  3. Then Click on Edit Html.
  4. Copy the Css Code Below and Then Paste it Before </head>.
  5. <!--[ Post Views Counter Css By SmartTechMukesh.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>
  6. Copy the Html Code Below and Then Paste it Before <data:post.body/>.
  7. <!--[ Post Views Counter By SmartTechMukesh.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>
  8. Copy the JavaScript Code Below and Then Paste it Before </body>.
  9. <!--[ Post Views Counter JavaScript By SmartTechMukesh.Com ]-->
    <script src="https://cdn.jsdelivr.net/gh/smarttechmukesh/[email protected]/javascript/jquery_3.2.1.min.js"></script>
    <script>
    //<![CDATA[
    javascript('views_counter');
    //]]>
  10. 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, Two9Success.

Source:
www.two9success.com

About the Author

Two9Success.Com Provides All Information About Blogging, Coding, App Reviews, Tips & Tricks and Much More.

10 comments

  1. Thank you very much, it will be very useful for me
    1. Welcome
  2. How can i can make the views like 1K or 1.K like pls let me know
    1. Currently Not Available This Feature
  3. Not working
    1. Working
  4. Publish karne se pahle test to ker lete
    1. Working, Already Tested
  5. Bro pahle check karlo accha se work kar raha hai tab share karo bhai 🤤
    1. Check Demo