How to Display Post/Page or Home Page View Count in Blogger

A few days ago there was a request how to make view count on the blog, I've shared previously Iori Kyun template that also use the feature views count. this time I will share a tutorial on how to install a post view count in blog.

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 themselves please follow the tutorial how to create a database or project in fire base quickly click here

• Step : Install Post View Counter Plugin

• Sign in to Blogger account and go to Blogger dashboard.
• Click the arrow adjacent to 'Go to post list' icon and select 'Template' from the drop down menu. Alternately you can click 'Template' from left navigation menu if you're already within your blog.
• Click 'Edit HTML'.
• Skip this step if jQuery library already installed in your blog. Otherwise Search for (Ctrl+F) </head> and paste (Ctrl+V) the following code before </head>.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 

• Search for (Ctrl+F) </b:skin>, copy (Ctrl+C) the following code and paste it (Ctrl+V) before </b:skin>.

.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/AVvXsEgbYLC6uOO8MpkA0f9uGaCyzMHmPIsHZS5iuLIF0_lNGSi2w3_edWcHiJGgCkvLl-OCzqrXIOikVYINDe3NP25f7Ps4aRJJ5n3axrMS4JqciSSAAM7050QO0zI23-2Lxs9avXen3gpOF4sB/s1600/loader.gif') no-repeat 0 0;vertical-align:middle}

• Search for (Ctrl+F) </head> and paste (Ctrl+V) the following code before </head>

 <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://priosoft.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>

• Search for (Ctrl+F) post-header. You'll find the a code similar to the following one.

 <div class='post-header'>
  or
<div class='header class'/>

• 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

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

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

• Then click the Save template

• Search for (Ctrl+F) 'post-footer. You'll find the a code similar to the following one.

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

• You're done. Now Save template and see result by refreshing page.




Customization

• Replace "https://priosoft.firebaseio.com" With Your Firebase url.


Any type of information please Contact us.