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
- First Login Your Blogger Account.
- Then Select Theme Menu.
- Then Click on Edit Html.
- Copy the Css Code Below and Then Paste it Before
</head>. - Copy the Code Below and Then Paste it Before
<data:post.body/>. - Copy the JavaScript Code Below and Then Paste it Before
</body>. - Finally, Don't Forget To Click on Save Theme And Then See The Result.
<!--[ Post Views Counter Css By ]-->
<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><!--[ 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><!--[ Post Views Counter JavaScript By ]-->
<script src="https://cdn.jsdelivr.net/gh/smarttechcarry/[email protected]/javascript/jquery_3.2.1.min.js"></script>
<script>
//<![CDATA[
javascript('views_counter');
//]]>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 Code By : Smart Tech Carry
Rate This Article
Thanks for reading: How to Add Post Views Counter in Blogger ? Step By Step:)
Conclusion
In this article, I have shared How to Add Post Views Counter in Blogger ? Step By Step. I hope you have liked it Please do share it with your friends and follow our blog for more.
Join our Telegram Channel to get the lastest posts updates daily. Thank you!