20 March 2014

Total Posts, Comments & Page Views Counter Widget for Blogger

Total Posts, Comments & Page Views Counter Widget for Blogger
Today we again came with another attractive widget for blogger.This widget contains both HTML and CSS code in it.It do have a very easy loading feature also,so don't need so to worry so much about your blog loading speed after placing the widget into your blog.Basically this widget will use to track your blog's traffic,which is definitely a good news for any webmasters as well it also help your blog's popularity on the eye of your blog visitor.This widget will show your blogs total Post,Comments & Pageviews to your blog's reader.We guess it's such an  attractive feature  with cool lookin style will definitely make your blog more beautiful.For demo you can take a look at the below screenshot as well.

 Must Read : Create Blogroll On Blogger

Add This On Blogger

  • Log onto Blogger dashboard>>template>>edit html
  • Add the following CSS code before ]]></b:skin> code in your template and Save template

/*Custom Blogger Stats by TTH http://www.techtrickhome.com */ #Stats1 ul{margin:0;border:0;padding:0;height:32px;background:url(http://techprevue.googlecode.com/files/tpl-stats.png) no-repeat 0 -34px} #Stats1 li{margin:10px 0;border:0;padding:0 0 0 40px;list-style-type:none} #totalComments{height:32px;background:url(http://techprevue.googlecode.com/files/tpl-stats.png) no-repeat} #totalCount{height:32px;background:url(http://techprevue.googlecode.com/files/tpl-stats.png) no-repeat 0 -68px}

  • Now go to Layout (Page Elements) and add Stats Gadget widget after that save the position of the gadget
  • Now again we'll edit the Blogger template / HTML so search for similar code given below

<b:widget id='Stats1' locked='false' title='Total Pageviews' type='Stats'/>

  • Then change this searched code with the following code 

<b:widget id='Stats1' locked='false' title='My Blog Stats' type='Stats'> <b:includable id='main'><div class='widget-content'> <ul><li><h4 id='Stats1_totalPosts'>&amp;hellip;</h4> <span>Posts</span></li> <li id='totalComments'><h4 id='Stats1_totalComments'>&amp;hellip;</h4> <span>Comments</span></li><li id='totalCount'><h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</h4><span>Pageviews</span></li> </ul><script type='text/javascript'>//<![CDATA[function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');//]]></script> </div></b:includable></b:widget>

  • Now save the template and you're done.
Now go to your blog and take a look at your newly added widget.Don't forget to share your view about this widget.Thanks for visiting.Happy blogging guyz!!!!

Articles You May Like

5 comments: Leave Your Comments

  1. Thanks for the tips! Do you know a nice widget for wordpress?

    1. currently we don't but maybe there is something like that.just google it.

  2. I like that counter on my site too.

  3. This looks nice :) Can you, somehow, do a similar one for Tumblr blogs?

  4. I'll apply this to my blogger blogs. thanks for posting this valuable article.