Customize Total Page Views For Blogger More Colorful

Before this post we discussed about How to Remove Subscribe to Post (Atom) in Blogger , but now learn together about how to customize a total pages views widget in blogger it looks more impressive and beautiful. By default Total pages views Widget is just shows a numbers only , so now we change it into more beautiful color and hover effect. In this widget we are not only shown total number of impression but we also shown total number of posts and as well total number of comments. So just add some CSS code into your blog template and don't be afraid because your blog widget will not be destroyed. If you want to add and customize Total Page Views Widget just follow this below steps.

Live Demo

How customize Total Pageviews for Blogger

• Goto blogger account.
• Click on template and backup your blog template.
• Search this ]]></b:skin> by pressing Ctrl+f
• Paste the below code just after this ]]></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;
}

• Search again this code <b:widget id='Stats1' locked='false' title='Total Pageviews' type='Stats'>...</b:widget>
• Like in the below picture

• And replace with below 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>

• Now save your template .
• After that when you save it goto layout and click Add a Gadget and select Blog's stats widget.
• Select the option which i shown in the below picture.

Click on save and visit to your blog your widget looks like this.