How to add colorful Total Pageviews widget?

Follow @tonufz

Widget can helps you to make a wonderful blog. Total Pageview widget is a important widget for your blog. Everyone can to know about your blogs statistics. How number of  visitors visit your blog. Total post & total comments are also shown through this widget. This widget is more colorful & attractive.  We use some css code so don't be afraid because css code never use your memory. To add this widget just follow this post steps by steps.

How to add ?

• Log in your blog

• Go to Templates

• Then click Edit Html

• Search (ctrl+f) ]]></b:skin>

• Add bellowing css code just before/above ]]></b:skin>

#Stats1 ul{margin:0px 0;border:0;padding:0}
#Stats1 li{
display:inline;
width:30%;
border:0;
color:#fff;
float:left;
text-decoration:none;
margin:0;font-size:12px;
list-style-type:none
}
#Stats1 li:hover{
opacity: 0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
#Stats1 h4{margin:0;font-size:18px;line-height:1.2em;color:#fff;padding: 0 5px 0 5px;}
#Stats1 span{font-size:12px;color:#fff;padding: 0 5px 0 5px;}
#totalposts{
background: #0090D5;
}
#totalComments{
background: #FFB200;
}
#totalCount{
background: #FF3300;
} 

• Then you have to search

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

• Replace the following code

<b:widget id='Stats1' locked='false' title='' type='Stats'>
  <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content'>
      <ul>
        <li id='totalposts'>
          <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>

Note:You should back up your template first.

Do you like this post? Please link back to this article by copying one of the codes below.

URL: http://tech-everyday.blogspot.com/2013/07/how-to-add-colorful-total-pageviews.html HTML link code: <a href="http://tech-everyday.blogspot.com/2013/07/how-to-add-colorful-total-pageviews.html">How to add colorful Total Pageviews widget?</a> BB link code: [url=http://tech-everyday.blogspot.com/2013/07/how-to-add-colorful-total-pageviews.html]How to add colorful Total Pageviews widget?[/url]