Saturday, 10 July 2021

How to Add Counter View in Blogger Posts

How to Add Counter View in Blogger Posts
July 10, 2021

 Counter view in blog posts certainly has a function to let visitors know which articles have been viewed the most so that they know that the article is really useful.

I have searched several articles about adding Counter view in posts to blogger and mostly to no avail. If so, you can follow the tutorial I gave below.

How to Add Blogger Counter View

Here are the steps in creating a view counter on blogger, please read carefully:

1. Login to Blogger, go to TEMA, then select Edit HTML.

2. Make sure you have installed Jquery Library and Font Awesome in your blog template if not then paste it right under all meta tags or right under tags <head>

<!-- Jquery Library and Font Awesome CDN -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>
<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css' integrity='sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=' rel='stylesheet'/>


3. Copy the code below and paste it before the tag <data:post.body/>

<b:if cond='data:view.isPost'><span class='post-view' expr:data-id='data:post.id'><span class='view-load' id='postviews'><i class='fas fa-spinner fa-pulse faa-fast'/></span>Views</span></b:if>
4. Then, paste this script above the tag </body>
<script type='text/javascript'>
/*! Firebase-post-view */
jQuery.getScript("//cdn.firebase.com/js/client/2.3.2/firebase.js").done(function(){$.each($(".post-view[data-id]"),function(e,a){var i=$(a).parent().find("#postviews").addClass("view-load"),t=new Firebase("https://md-count-view.firebaseio.com/pages/id/"+$(a).attr("data-id"));t.once("value",function(e){var o=e.val(),d=!1;null==o&amp;&amp;((o={}).value=0,o.url=window.location.href,o.id=$(a).attr("data-id"),d=!0),i.removeClass("view-load").text(o.value),o.value++,"/"!=window.location.pathname&amp;&amp;(d?t.set(o):t.child("value").set(o.value))})})});
</script>
5. When finished, click SAVE.

Please see the current appearance of your blog whether Counter view has been installed in the post.

Well, that's a short tutorial this time about How to Add Counter view in Blogger posts for those of you who are still confused or have other questions about blogger, please comment in the comments column below this article.
Share This :
SUBSCRIBE TO OUR NEWSLETTER

No comments: