Cách Tạo Widget Thống Kê Tuyệt Đẹp Cho Blogspot

Xin chào các bạn, đã đến với blog mình hôm nay rảnh rảnh ngồi vọc template cũ thì thấy có đoạn code thống kê blog cực đẹp nên chia sẻ cho mấy bạn nào chưa có tại template cũ cũ nên mình không nhớ rõ nguồn, ai biết thì bình loạn bên dưới mình sẽ ghi nguồn vào bài viết này.

 Bước 1 : Đăng nhập Blogger - Bố Cục - Thêm Tiện Ích - Thông kê blog.

Bước 2 : dán đoạn css bên dưới, dưới thẻ <style> hoặc dưới thẻ ]]></b:skin>

<style type='text/css'>
/* Blogger Thống Kê */
.Stats img {display:none!important;background-image:none;}
.Stats .counter-wrapper {width:92%;text-align:right;margin:10px;line-height:35px;color:#333;font-weight:700;font-size:16px;margin-left: 0;}
.Stats .counter-wrapper:after {content:&quot;Tổng Số Lượt Xem&quot;;float:left;text-align:left;font-size:13px;font-weight:700;color:#333;}
.counts {display:inline-block;width:92%;font-size:13px;line-height:35px;color:#333;font-weight:700;}
.counts .count {display:inline-block;font-size:16px;height:30px;
vertical-align:top;direction:ltr;float:right;color:#333;font-weight:700!important;}
.counts:hover .titles:before {color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);}
.counter-wrapper.text-counter-wrapper:before, .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;}
.counter-wrapper.text-counter-wrapper:before, .counts:before {
display:block;background-color:#fff;color:#333;width:35px;height:35px;font-size:18px;line-height:35px;border-radius:2px;margin:0px 8px 0 0;}
.counter-wrapper.text-counter-wrapper:before {content:&quot;\f06e&quot;;}
.counts.post2:before {content:&quot;\f044&quot;;}
.counts.comment:before {content:&quot;\f0e6&quot;;}
#Stats1_content {width:auto;height:auto;background-color:#fff;}
</style>

• Chỉnh sửa màu tùy ý:
• Màu số: color:#c3c3c3; (đoạn này là màu của dòng 1 - tổng lượt xem)
• Màu số: color:#f3f3f3;(đoàn này là màu của 2 dòng còn lại cmt và bài viết)
• Màu Icon: ;color:#000000; (đoạn code này là màu
• Màu khung icon: color:#fff;

Bước 3 : xóa toàn bộ code trong dưới thẻ <b:includable id='main'> sau khi xóa xong dán đoạn code bên dưới, dưới thẻ <b:includable id='main'>

<b:if cond='data:title'><h2 class='iconthongke'><i aria-hidden='true' class='fa fa-bar-chart'/> <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' src='' 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 post2'> Tổng số bài viết &quot;);var count = json.feed.openSearch$totalResults.$t;document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);document.write(&quot;</span>&quot;)}function numberOfComments(json){document.write(&quot;<span class='counts comment'> Tổng bình luận &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='/feeds/posts/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=postCount' type='text/javascript'/><script src='/feeds/comments/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=numberOfComments'/>
    </div>  </div>

Lưu lại và xem kết quả

LỜI KẾT 

chỉ đơn giản vài thao tác chèn code là bạn có một Widget Thống Kê đẹp tuyệt vời rồi.
Chúc các bạn thành công!
nếu thấy hay thì share cho mình nha (cảm ơn)

N

18

Chia sẻ

• Nhận liên kết

Nguyễn Phú Cường

Cuộc sống đôi lúc không như chúng ta mong muốn nhưng đừng buồn, đừng suy nghĩ nhiều quá mà hãy tiếp tục đứng lên và chiến đấu tiếp vì tương lai của chính mình nhé!