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
- 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.
- Click 'Edit HTML'.
- 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('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>
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 :)
Post a Comment