Add Blogger Custom Statistics Widget To Your Blogspot Blog

Add Blogger statistics widget - This is a uncomplicated tutorial nearly how to add together custom statistics widget inwards your blogger
to demo blogger visitors everyday similar my site.First add together statistics widget inwards your blogger layout.You'll fing it simply clicking on add together gadgets.Then Go to your template html code together with detect 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 survive visible when information volition survive fetched from server. -->     <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>       <!-- Counter together with ikon volition survive injected afterward 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 supervene upon it amongst 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 survive visible when information volition survive fetched from server. -->     <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>       <!-- Counter together with ikon volition survive injected afterward 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'> component 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 amongst your weblog url inwards higher upwards code.
Now add together the next Css,First Go to Blogger>Template>Click edit html>apply the code below simply 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 together with encounter the results.If you lot got whatsoever work simply comment below together with part this post for others.