-->
Phong cách
Tính năng
Theo cột
Theo giá

Create a Statistical Utility for Bloggers

Create a Statistical Utility for Bloggers

Create a Statistical Utility for Bloggers
Create a Statistical Utility for Bloggers

Create a Statistical Utility for Bloggers

Hello everyone, at the request of some of you, today I will write a tutorial for you to create widgets Statistical Utility for Bloggers.

INSTRUCTIONS ON HOW TO:

Step 1: To create a widget for you to Layout -> Add widget -> Scroll down select Statistics blog and choose the type 2.

Step 2: Find segment id = 'Stats1' and replace the entire widget  id = ' Stats1'  into the code below: 

<b:widget id='Stats1' locked='false' title='' type='Stats' version='1'>
            <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:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
            <!-- Add the bg color to the header using any of the bg-* classes -->
            <div class='aubout-admin'>
              <div class='admin-image'>
                <img alt='User Avatar' class='img-circle' src='https://i.imgur.com/3vWPXOc.png'/>
              </div>
              <!-- /.widget-user-image -->
              <h3 class='admin-username'>ThugsofBD</h3>
              <h5 class='admin-desc'>Designer and Developer</h5>
            </div>
    <!-- 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;counter-wrapper &quot; + (data:showGraphicalCounter ? &quot;graph-counter-wrapper&quot; : &quot;text-counter-wrapper&quot;)'><a expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/></span>
      <b:include name='quickedit'/>
    </div>
  </div>
<script type='text/javascript'>
   function postCount(json){
    document.write(&quot;<span class='counts post2'> General posts &quot;);
    var count = json.feed.openSearch$totalResults.$t;
    document.write(&quot;<span class='count all-posts'>&quot; + count + &quot;</span>&quot;);
    document.write(&quot;</span>&quot;)
  }
  function numberOfComments(json){
    document.write(&quot;<span class='counts comment2'> General comment &quot;);
    var count = json.feed.openSearch$totalResults.$t;
    document.write(&quot;<span class='count all-comments'>&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'/>
</b:includable>
          </b:widget>

Step 3: To decorate the code above, look for the code ]]></b:skin> and paste the whole css below on it

/* Statistical */
.aubout-admin{background-color:#f39c12;color:#fff;padding:20px;border-top-right-radius:3px;border-top-left-radius:3px;height:64px}
.admin-image img{width:65px;height:auto;float:left;border-radius:50%}
.admin-username,admin-desc{margin-left:75px}
.admin-username{margin-top:5px;margin-bottom:5px;font-size:25px;font-weight:300}
.admin-desc{margin-top:0;font-size:14px;font-weight:300}
#Stats1{background:#fff!important;padding: 0px!important}
a#Stats1_totalCount:before{line-height:37px}
a#Stats1_totalCount{background:#dd4b39;color:#fff;padding:0px 7px 1px 7px;border-radius:20px}
.Stats .counter-wrapper{width:94%;height:43px;text-align:right;font-weight:500;line-height:41px;color:#333;font-size:16px;border-bottom: 1px solid #f4f4f4;padding:0px 0px 0px 10px}
.Stats .counter-wrapper:after{content:"Tổng lượt xem ";float:left;text-align:left;font-size:16px;color:#333;}
.counts {display:inline-block;width:94%;font-size:16px;line-height:20px;color:#333;border-bottom: 1px solid #f4f4f4;padding: 10px 10px 10px 10px}
.counts .count{display:inline-block;font-size:16px;vertical-align:top;direction:ltr;float:right;color:#fff;width:40px;text-align:center;line-height:22px;border-radius:16px}
.counts:hover .titles:before{color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);}
.post 2{margin-bottom:10px}
.all-posts{background:#00a65a}
.all-comments{background:#00c0ef}
* Remember to delete the CSS first to avoid it from being displayed badly I
wish you success!

THÔNG TIN THANH TOÁN & DỊCH VỤ:

  • Tên tài khoản: Nguyễn Anh Tuấn
  • Số tài khoản: 0501000058467
  • Ngân hàng TMCP Ngoại thương Việt Nam (Vietcombank) - Chi nhánh Bắc Sài Gòn
  • Hỗ trợ cài đặt: fb.com/kequaduongvodanh
  • Dịch vụ: Xem chi tiết >>
    + Nhận convert template từ Wordpress
    + Sửa lỗi, nâng cấp template
    + Thiết kế Form Liên hệ từ Google Form
0 Comments