Customize Blogger Statistics Widget

Customize Blogger Statistics Widget

Customize Blogger Statistics Widget - The following tips I made at the request of a blogger friend here about how to create a statistical widget like this blog.

The function of the blogger default statistics widget serves to bring up the number of views of visitors on a blog. Here I slightly modify and add a markup of the number of posts published in a blog.

Immediately, here's how to apply it:

First, please add a statistics widget in your blog layout, after adding it, please open the template then click Edit HTML. Look for the HTML widget statistics code below
<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 all the above code with the code below
<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='https://th3safelink.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>
After that in the widget above, please replace https://th3safelink.blogspot.com with the url of your blog.

To make it look more attractive, please add CSS below

First, open 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;
}
Re-adjust the CSS font and display it according to your blog, last save the template and see the results.

That's enough, hopefully useful.

Post a Comment

Previous Post Next Post