Customize Statistics Blogger Widget

Customize Statistics Blogger Widget - This recipe I made at the request of the bloggers here
on how to make such statistics widget on this blog.
The function of this blogger widget default statistics serve to raise the number of views of
visitors to a blog. Here I am slightly modifying and adding markup on the number of posts
published in a blog. Immediately, following its application ways: First please add stats widget
in your blog Layout, having added just open the template and then click Edit HTML. Find
statistics widget HTML code below



<B: widget id = 'Stats1' locked = 'false' title = 'Total Pageviews' 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 the data will be fetched from the 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-counter graph-wrapper' expr: id = 'data: widget.instanceId + & quot; _totalCount & quot;' /> <B: else /> <Span class = 'text-wrapper counter-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 of 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 the data will be fetched from the 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: //MEMORYHUNT.blogspot.com/-nsxCtkYnchQ/VLEifAyf97I/AAAAAAAAIlk/9Viyy0W9r04/s1600/FFF.png 'title =' Sparkline 'width = '75' /> </ B: if> <B: if cond = 'data: showGraphicalCounter'> <Span class = 'counter-wrapper-counter graph-wrapper' expr: id = 'data: widget.instanceId + & quot; _totalCount & quot;' /> <B: else /> <Span class = 'text-wrapper counter-counter-wrapper' expr: id = 'data: widget.instanceId + & quot; _totalCount & quot;' /> </ B: if> <Script type = 'text / javascript'> postCount function (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 type = 'text / javascript' /> </ Div> </ Div> </ B: includable> </ B: widget>



After that the widget above please replace http://memoryhunt.blogspot.com  with your blog
url. So that it looks more attractive, please add the following CSS First, open Blogger>
Template> Save edit HTML> Apply the code below right 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-adjusting the CSS font and zoom correspond to your blog, save the template and see the

final results. Enough, may be useful.