Show the number of visitors, posts and comments in one blogspot widget.

Blogger has a widget called Stats that allows you to display your blog's visitor statistics. You have. In this article, I will show you how to make the Stats Widget more fresh. Beautiful, along with the use of Font Awesome icons, not only this widget shows the total number of articles and The total number of comments contained in your blog as well.

Before Entering the Tutorial Make sure you have added the Stats widget on your blog


1. Go to your Blogger account
2. Go to the theme, then Edit HTML
3. Copy the following code below the <head >

NOTE : If you have a code Icon Font Awesome Version 5 already in the skin shared the block at this point

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css" integrity="sha256-piqEf7Ap7CMps8krDQsSOTZgF+MU/0MPyPW2enj5I40=" crossorigin="anonymous" />


Copy the code below ]]> </b: skin>

a#Stats1_totalCount{float:right;background-color:rgba(155,155,155,0.02);color:#43A047;padding:0 10px;margin:4px 0;line-height:22px;border:1px solid #eee}
.count_text{width:100%;display:inline-block;font-size:13px;height:35px;line-height:35px}
.count_text.view2:before, .count_text.post2:before, .count_text.comment2:before{font-family:"Font Awesome 5 Free";font-weight:600;margin:0 8px 0 0}
.count_text.view2:before{content:"\f080"}
.count_text.post2:before{content:"\f303"}
.count_text.comment2:before{content:"\f27a";font-weight:400}
.count_num{float:right;display:inline-block;font-size:15px;background-color:rgba(155,155,155,0.02);color:#43A047;text-align:center;padding:0 15px;margin:4px 0;line-height:22px;border:1px solid #eee}


5. Copy the following code into the <b:section>...</b:section> of the Sidebar (see picture)




          <b:widget id='Stats1' locked='false' title='TOTAL STATISTICS' type='Stats' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='showGraphicalCounter'>false</b:widget-setting>
              <b:widget-setting name='showAnimatedCounter'>false</b:widget-setting>
              <b:widget-setting name='showSparkline'>false</b:widget-setting>
              <b:widget-setting name='sparklineStyle'>BLACK_TRANSPARENT</b:widget-setting>
              <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
  <b:include name='widget-title'/>
  <b:include name='content'/>
</b:includable>
            <b:includable id='content'>
  <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>
      <span expr:class='&quot;count_text view2 &quot; + (data:showGraphicalCounter ? &quot;graph-counter-wrapper&quot; : &quot;&quot;)'> TOTAL PAGEVIEWS<a expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/></span>
<script type='text/javascript'>
   function postCount(json){
    document.write(&quot;<span class='count_text post2'> TOTAL PUBLISHED POSTS &quot;);
    var count = json.feed.openSearch$totalResults.$t;
    document.write(&quot;<span class='count_num'>&quot; + count + &quot;</span>&quot;);
    document.write(&quot;</span>&quot;)
  }
  function numberOfComments(json){
    document.write(&quot;<span class='count_text comment2'> TOTAL COMMENTS &quot;);
    var count = json.feed.openSearch$totalResults.$t;
    document.write(&quot;<span class='count_num'>&quot; + count + &quot;</span>&quot;);
    document.write(&quot;</span>&quot;)
   }
 </script>
<script src='/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=postCount' type='text/javascript'/>
<script src='/feeds/comments/default?alt=json-in-script&amp;max-results=0&amp;callback=numberOfComments'/>
    </div>
  </div>
</b:includable>
          </b:widget>


6. Click Save Theme.

Live DEMO - Click Here

Post a Comment

أحدث أقدم