After yesterday we discuss about how to customize desktop using Rainmeter, now we will learn together about how to customize your Total Pageviews widget in Blogger so will looks more colorful. And this is look more impresive, in default of pageviews gadget in Blogger just looks number only, so we will change it and make it more colorful with hover effect. In this widget we not only show total impressions alone but we will show the number of comments and posts in your blog, so very complete with different color. We just added some CSS code to your blog, so don't be afraid because this widget is not eating your memory, if you want to add and customize Total Pageviews in your blog follow this steps below.How customize Total Pageviews for Blogger1. Go to Blogger > Layout > Add a Gadget > Select Blog's stats and hit Save2. Backup your template3. Go to Template > Edit HTML, and search this code ]]></b:skin>Click the black arrow to see all the css code4. And add this code just 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;}5. And search again <b:widget id='Stats1' locked='false' title='Total Pageviews' type='Stats'>...</b:widget>like this and block it6. And replace with this 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'>&hellip;</h4> <span>Posts</span> </li> <li id='totalComments'> <h4 id='Stats1_totalComments'>&hellip;</h4> <span>Comments</span> </li> <li id='totalCount'> <h4 expr:id='data:widget.instanceId + "_totalCount"'>&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>7. And save your templateAfter you save it, your Total pageviews will look like thisdemoRead this too :Grayscale Image Hover Effect Use CSS3 For BloggerCreate Dropdown Menus Slide Animation For Blogger
