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>.

  4. /* 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEAcTsHlWcVPNRdWGlPgsbLgfzQmQDifuevzyDFXwZsapZQXno_vMGMdGcv9eH0QHLe-rgph73PqtcokUL68-vA7yYwVypm6qwILQhH1pnKnbZqPoV_vuPXuEdEs2XcTFGEynbGbQF9yEh/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 :)
Labels:

Post a Comment

[blogger][facebook][disqus]
switcher
Layout
Boxed Full
Boxed Background Image
Main Color
#007ABE

Shawon Khan

{picture#https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-a3-41YjYcJBZ5a8ARnrIkWEipCX5qC85U1TNiYgbjJtaIFGfVP5tGH2AqJOpDQCpktO4gvGceSGs2mFo8oDGHnw5RQIbSesYA7jEiCfHO8zoYhk3FNcKaXDjxIcSGKc6qL6_HvsmXiri/s50/avatku.jpg} Nor is it at all prudent for the hunter to be over curious touching the precise nature of the whale spout. {facebook#http://facebook.com} {twitter#http://twitter.com} {google#http://google.com} {pinterest#http://pinterest.com} {youtube#http://youtube.com}

Contact Form

Name

Email *

Message *

Powered by Blogger.