Latest: Download Microsoft All Product Activator | Hot: Active IDM in 1 Click | Blogger Gadget
  • Posts
  • Comments
  • Pageviews

How to add colorful Total Pageviews widget?

25 comments
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.
Pageviews widget

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

Pageviews widget


<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: HTML link code: BB link code:

25 comments:

  1. sir i put this code in my blog but in page view it,s in black color. please solve my problem
    my blog is latestdailysms.blogspot.com

    ReplyDelete
    Replies
    1. http://inspirationalmotivation.in/2015/12/06/सफलता-का-मूल-मंत्र/

      Delete
    2. www.inspirationalmotivation.in बेस्ट हिंदी प्रेरणा जगह हिन्दी कहानियों केवल hindi quotes stories www.inspirationalmotivation.in पर वेबसाइट making और trics बनाने strories स्वास्थ्य, पैसे ko ऑनलाइन kamane ke tricks .www.inspirationalmotivation.in is number one hindi website.

      Delete
    3. www.inspirationalmotivation.in बेस्ट हिंदी प्रेरणा जगह हिन्दी कहानियों केवल hindi quotes stories www.inspirationalmotivation.in पर वेबसाइट making और trics बनाने strories स्वास्थ्य, पैसे ko ऑनलाइन kamane ke tricks .www.inspirationalmotivation.in is number one hindi website.

      Delete
  2. Hi Sir I Don't Able To Find This Code ( ...) In My Template Help Me

    ReplyDelete
    Replies
    1. You have to add Blog Stat widget from Add A Widget & then You go to Edit HTML then you get the code

      Delete
    2. www.inspirationalmotivation.in बेस्ट हिंदी प्रेरणा जगह हिन्दी कहानियों केवल hindi quotes stories www.inspirationalmotivation.in पर वेबसाइट making और trics बनाने strories स्वास्थ्य, पैसे ko ऑनलाइन kamane ke tricks .www.inspirationalmotivation.in is number one hindi website.

      Delete
  3. Thank you so much for sharing this code, I already use in my blog. I'm not first timer blogger but I'm not that good in coding html. You really help me a lot. I use your CSS code in my blog http://wonderfullcolourfullcheerfulgratefull.blogspot.com/ If you have time, feel free to visit.

    ReplyDelete
  4. thanks a lot add Pageviews widget successfull http://www.visitortunes.com

    ReplyDelete
  5. Thanks Sir i am very thank full to you i have done
    http://no1worldlifestyle.blogspot.com/

    ReplyDelete
  6. Check my blog
    https://www.bimarshakhanal.com.np

    ReplyDelete

Recent Comments

ALEXA RANK

Copyright © 2013-2014 Tech-Everyday