January 2017

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.

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

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.

    Reaction Buttons for Blogger - here is another big and very useful blogger widgets. You can show reaction buttons on your blogspot blog. Reaction is a smart way for your visitors to leave feedback without leaving any comments. Here is very simple way to add recation buttons for blogspot blogger using vicomi.com.

    Reaction Buttons for Blogger using 2017

    Now lets starting the tutorial.

    Follow Instruction:

    1. Go to vicomi.com
    2. Now signup with your Blog title, e-mail and your website.
    3. Now choose your emotion design and click Done.
    4. Now copy the code.
    5. Reaction Buttons for Blogger using 2017
    6. Now go to Edit HTML and find <data:post.body/>
    7. Past copied code right after <data:post.body/> Then Save
    Any type of information please Contact us.

    Swicther!
    Layout
    Boxed Full
    Boxed Background Image
    Main Color
    #007ABE

    Shawon Khan

    {picture#https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOjkSsWvmjIpQ_ICXr5bGfT4RPhd5Vrxek-oaojrkvS3JiGv9vw6CubrWWVDfcVeVheD61_MlnQHrsEfAVH3JVIc_0zb-RwuasrPCJQBYPOaDaZ7LVdKorVE2kIhrh8sl-9a_s-R7ReQzX/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.