Saturday, July 25, 2009

Blogger/BlogSpot Post Views Hit Counter shows Page views/visits of each post.

| Post views:
, ,

Queries Solved:
How to put visit counter which shows each & every visit of individual post ?
Can i have a separate hit counter for each blog post ?

blogger post hit counter If you are looking for the answer of any above issue, read on..

Blogging is fun, and most of blogger wants to make their blog unique and good looking. Making a little change in your blog can create a wonder, once I wrote an article on How to Change Blogger Post Title to Increase your Search Rankings (Post Title + Blog Title) Now Here is another beautiful way to expose the popularity of your blog.

Many of you wants to show a visible counter that displays the number of page views of each individual post. You can find such counter Below the post title of this post. Unlike the website counter which shows the visits of complete website, here is the Post hit counter which shows you page views (not unique visits) of your blog’s each post. Here is how to display Post Views Hit Counter in your blog.

Login to your Blogger account, Click Layout > Click Edit Html > Click “ Expand Widgets Templates “
You can paste the counter code anywhere you wish either below your post title or at post footer. Different templates have different code for these places. Those who want to keep this counter in post footer must find some place below <div class='post-footer'>. The most common thing in every template is author tag or Lables tag or Comment link in any Template. It depends on you where you want to show this code.

1. To display the post counter next to author tag, find <span class=’post-author’ or <div class=’post-author’ or something like that. We used the same place to show the counter. See screenshot or check it below post title of this post.

blogger post counter

2. To display the post counter next to labels tag, find <span class=’post-labels’ or <span class=’post-labels’ or something like that.

3. To display the post counter next to comment link, find <span class=’post-comment-link’ or <span class=’post-comment-link’ or something like that.

Once you decided the place, paste below code.

Update : Previous Code & even Statcounter trick not working now, So i found some reliable solution in which we use some third party code for individual post. You have seen several other methods from various blogs which includes hosting PHP scrip & database on your own servers, But for the people who doesnt have such hosting space can use below trick.

Simply Copy and Paste below code at decided place, and you are done.

<span class='post-counter'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
| Post views:&lt;a href=&quot;http://www.ialwayscapital.com&quot;&gt;&lt;img src=&quot;http://counters.branica.com/?i=2222&amp;u=false&amp;ox=10&amp;oy=17&amp;c=000000&amp;b=plain.jpg&amp;f=Terminator.ttf&amp;fn=false&amp;w=110&amp;h=25&amp;s=10&quot; height=&#39;25&#39; style=&#39;border:none; margin-top:0px;margin-bottom:-19px;;margin-left:-10px;&#39; width=&#39;110&#39;/&gt;
</b:if>
</span>

If above code doesnt works in your Blogger Template, use below one.
<div class='post-counter'><b:if cond='data:blog.pageType == &quot;item&quot;'> | Post views:&lt;a href=&quot;http://www.ialwayscapital.com&quot;&gt;&lt;img src=&quot;http://counters.branica.com/?i=2222&amp;u=false&amp;ox=10&amp;oy=17&amp;c=000000&amp;b=plain.jpg&amp;f=Terminator.ttf&amp;fn=false&amp;w=110&amp;h=25&amp;s=10&quot; height=&#39;25&#39; style=&#39;border:none; margin-top:0px;margin-bottom:-19px;;margin-left:-10px;&#39; width=&#39;110&#39;/&gt;

</b:if>
</div>

You can adjust, Height, Width etc as per your need. Find below lines in above code.
w=110 represents the width of image counter, which is 110

h=35 represents the height of image counter, which is 35
You can adjust it as per your needs.

You are done, If you wish to see what you did, read explanation given below.

Explanation in Detail :

Its not possible for everybody to host PHP script on their own host, So Find a counter service where you wont be asked to enter your website URL, like Branica, You can find several other services, I found Branica in one shot so considering it as example.
You can get counter code within seconds as no Signup & Registration required in above link. Simply fill up the required things and copy full code in Notepad. Do not Install full code given by Branica. Copy that code in some text editor like Notepad, as we just need a part of that code to install in Blogger.

-Find below lines in the code given by Branica & copy it, See screenshot below for better idea. Thats enough with Branica for now.


<img id="counter" src=http://counters.branica.com/?i=2222&u=false&ox=10&oy=17&c=000000&b=plain.jpg&f=Terminator.ttf&fn=false&w=110&h=35&s=10

Blogger Post CounterNow you have your code, Just put in below code and you are done.
Code in Blue, is a “if” condition to display post counter widget only on post pages and not on home page of your blog. You can edit values in red to adjust the counter image in your template. If this code doesn't works, use below code.

If everything goes well, You will have something like this. See screenshot below. If blogger gives error then use Blogger Code Converter to make your code XHTML compliant. Open Blogger Code Converter, Paste your code in Box & Click CONVERT AD CODE. Blogger Post views counter code

Also read : How to Hide/Remove Labels/Categories Count in Blogger & How to Add Social Bookmarks in Blog Post
Related : Check if Important Portion of your Site/Blog is Visible to most of Visitors – Google Browser Size Tool

3 comments:

100 Ro on January 14, 2010 1:01 AM said...

This doesen-t work,it only displays the Alt of the image,how can i make it work? please send an e-mail to webrolls@gmail.com

viagra online on February 26, 2010 11:57 AM said...

I like this text: "Copy that code in some text editor like Notepad, as we just need a part of that code to install in Blogger..." is very interesting!!!

buy viagra on March 1, 2010 11:57 AM said...

I like this comment: "You have seen several other methods from various blogs which includes hosting PHP scrip & database on your own servers, But for the people who doesnt have such hosting space can use below trick..." is very interesting!

Post a Comment

Followers

 

I always CAPITAL. Copyright 2008 All Rights Reserved. Blogger Template by Bloganol dot com Modified by I Caps