Add Blogger Custom Statistics Widget To Your Blogspot Blog

Add Blogger statistics widget - This is a simple tutorial about how to add custom statistics widget in your blogger
to show blogger visitors everyday like my site.First add statistics widget in your blogger layout.You'll fing it just clicking on add gadgets.Then Go to your template html code and find the below html code:

<b:widget id='Stats1' locked='false' title='Total Tayangan Laman' type='Stats'>
    <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <!-- Content is going to be visible when data will be fetched from server. -->
    <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
      <!-- Counter and image will be injected later via AJAX call. -->
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' width='75'/>
      </b:if>
      <b:if cond='data:showGraphicalCounter'>
        <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      <b:else/>
        <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </div>
</b:includable>
  </b:widget>

Then replace it with below html code

<b:widget id='Stats1' locked='false' title='statistics' type='Stats'>
    <b:includable id='main'>
      <b:if cond='data:title'><h2><span><data:title/></span></h2></b:if>
  <div class='widget-content'>
    <!-- Content is going to be visible when data will be fetched from server. -->
    <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
      <!-- Counter and image will be injected later via AJAX call. -->
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' src='http://2.bp.blogspot.com/-nsxCtkYnchQ/VLEifAyf97I/AAAAAAAAIlk/9Viyy0W9r04/s1600/FFF.png' title='Sparkline' width='75'/>
      </b:if>
      <b:if cond='data:showGraphicalCounter'>
        <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      <b:else/>
        <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      </b:if>
<script type='text/javascript'>
function postCount(json){
document.write(&quot;<span class='counts postx'> Total Post &quot;);
var count = json.feed.openSearch$totalResults.$t;
document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
document.write(&quot;</span>&quot;)
}
</script>
<script src='http://nirsoftbd.blogspot.com/feeds/posts/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=postCount' type='text/javascript'/>
    </div>
  </div>
</b:includable>
  </b:widget>

Note:Replace nirsoftbd.blogspot.com with your blog url in above code.
Now add the following Css,First Go to Blogger>Template>Click edit html>apply the code below just before ]]></b:skin> or </style> 

/* CSS Custom Stats */
#sidebar .Stats img {
    display: none!important;
    background-image: none;
}

#sidebar .Stats .counter-wrapper {
    width: 92%;
    text-align: right;
    margin: 10px;
    line-height: 35px;
    color: #71737f;
    font-family: 'Open Sans',sans-serif;
    font-weight: 700;
    font-size: 16px;
}

#sidebar .Stats .counter-wrapper:after {
    content: 'Page Views';
    font-family: 'Open Sans',Arial, sans-serif;
    float: left;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: #71737f;
}

#sidebar .counts {
    display: inline-block;
    width: 92%;
    margin: 10px;
    font-size: 13px;
    line-height: 35px;
    color: #71737f;
    font-weight: 700;
}

#sidebar .counts .count {
    display: inline-block;
    font-size: 16px;
    height: 30px;
    vertical-align: top;
    direction: ltr;
    float: right;
    color: #71737f;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700!important;
}

#sidebar .counts:hover .titles:before {
    color: #71737f!important;
    border-radius: 2px;
    border-color: rgba(255,255,255,0.1);
}

#sidebar .counter-wrapper.text-counter-wrapper:before,#sidebar .counts:before {
    display: inline-block;
    font-size: 13px;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    margin: 0 10px 0 10px;
    float: left;
    width: 10px;
    text-align: center;
}

#sidebar .counter-wrapper.text-counter-wrapper:before,#sidebar .counts:before {
    display: block;
    background-color: #a5a7b2;
    color: #fff;
    width: 35px;
    height: 35px;
    font-size: 18px;
    line-height: 37px;
    border-radius: 2px;
    margin: 0px 8px 0 0;
}

.counter-wrapper.text-counter-wrapper:before {
    content: '\f201';
    color: #fff;
}

#sidebar .counts.postx:before {
    content: '\f03e';
    background-color: #f0b26f;
}

#Stats1_content {
    width: auto;
    height: auto;
    background-color: #fff;
}

#Stats1 h2 {
    display: none;
}

Now,Save template and see the results.If you got any problem just comment below and share this post for others.

• Tweet
• Share
• Share
• Share
• Share