Notification texts go here Contact Us Buy Now!

Post/Page View Count in Blogger.

view count is Often used to display a count of the number of people who see Reviews These post. that usually is Often found in wordpress theme about news, or Also in the theme for fanshare, streaming, pv, music and so forth, but sometimes the view count Also is not suitable for low visitor blogs: v that not cool not see the numbers low. view count actually is not really applicable to blogger.


Because bloggers do not provide features view count. different from wordpress that has abundant features. but the lack of it does not apply to an expert blogger so he can created view count with the help of javascript and firebase, which is useful for storing the database. because the database is needed in view count.

This tutorial I have to providing my database, if you want to create a database go here

How to Display Post/Page View Count in Blog


Css
  1. Login to your Blogger account, go to Blogger dashboard, click the arrow adjacent to 'Go to post list icon' and select 'Template' from dropdown menu. You can also select the 'Template' from left navigation menu.
  2. Click 'Edit HTML'.
  3. Search for (Ctrl+F) </b:skin> and paste (Ctrl+V) the following code before </b:skin>.

/* Post views counter */
.post-view {
    margin-right: 8px!important;
    display: inline;
    background: #fefefe;
    color: #8c919b;
    padding: 4px 8px;
    cursor: default;
    transition: all .3s ease-out
}
.view-load {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: transparent url('http://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/s1600/loader.gif') no-repeat 0 0;
    vertical-align: middle
}
Javascript
  • Search for (Ctrl+F) </body> and paste (Ctrl+V) the following code before </body>


  •  <script src='//cdn.firebase.com/js/client/2.2.1/firebase.js' type='text/javascript'></script>
    <script type='text/javascript'>//<![CDATA[
    $.eachundefined$undefined".post-view[data-id]"),functionundefineda,e){var l=$undefinede).parentundefined).findundefined"#postviews").addClassundefined"view-load"),i=new Firebaseundefined"https://usagilabs-db-7424d.firebaseio.com/pages/id/"+$undefinede).attrundefined"data-id"));i.onceundefined"value",functionundefineda){var n=a.valundefined),t=!1;null==n&&undefinedn={},n.value=0,n.url=window.location.href,n.id=$undefinede).attrundefined"data-id"),t=!0),l.removeClassundefined"view-load").textundefinedn.value),n.value++,"/"!=window.location.pathname&&undefinedt?i.setundefinedn):i.childundefined"value").setundefinedn.value))})});
    //]]>
    </script>

    For display view count after header post (under the title)

    HTML
    For display view count after header post (under the title) Search for (Ctrl+F) 'post-header' you will find like this <div class='post-header'> or <header class='post-header'> if met then add the code below right before the above code
    <div expr:data-id='data:post.id' class='post-view'><i class='fa fa-eye'></i> <span class='view-load' id='postviews'>0</span> View</div>
    The result is like the example below
    <header class='post-header'>
    <div expr:data-id='data:post.id' class='post-view'><i class='fa fa-eye'></i> <span class='view-load' id='postviews'>0</span> View</div>
    ..........
    .......
    </header>


  • Then click the Save template


  • For display view count in footer post (under the description of post)

    Find (Ctrl+F) 'post-footer' in HTML editor you will find like this <div class='post-footer'> or <footer class='post-footer'> if met then add the code below right before the above code
    <div expr:data-id='data:post.id' class='post-view'><i class='fa fa-eye'></i> <span class='view-load' id='postviews'>0</span> View</div>
    The result is like the example below
    <footer class='post-header'>
    <div expr:data-id='data:post.id' class='post-view'><i class='fa fa-eye'></i> <span class='view-load' id='postviews'>0</span> View</div>
    ..........
    .......
    </footer>
  • Then click the Save template


  • If all the above code is not found in your template, it is because not all of the templates have a structure html / class names are the same so sometimes you do not find the above code in your template, if you still can not install it please comment to include the url of your blog I will help :)

    Getting Info...

    6 comments

    1. At OXO Packaging, we are always busy in designing pop up displayed and uniquely shaped bath so Counter Display Boxes that exhibit countless design features and will also lure clients, making them brand loyal towards your products.
    2. Not working properly
    3. I am pleased to see your Content. The manner you describe packaging Benefits well in this Blog
      Custom Shoe Boxes
    4. All details you describe in your blog post about Empty Cigarette Boxes is very informative for me. Blank Cigarette Boxes Wholesale provides with suitable price.
    5. The world is moving towards unsafe climatic changes. It is going on because of expanding contamination rates. We have our impact in preserving the climate by giving nature-accommodating bundling answers for each item.
      Blank Cigarette Boxes
    6. Dejligt enkelt sted med overskueligt take away Copenhagen menukort, autentisk indisk mad og importeret øl. God og afslappet betjening, take away amager fornuftig pris.
    Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.