TẠO THỐNG KÊ LƯỢT XEM, BÀI VIẾT, BÌNH LUẬN

Trong bài đăng này, tôi sẽ chia sẻ với các bạn về widget thống kê blogger. Bằng cách sử dụng tiện ích này, bạn có thể hiển thị tổng số lần xem trang, tổng số bài đăng và tổng số nhận xét của blog của bạn và tôi cũng đã chỉnh sửa một chút về CSS này.

TẠO THỐNG KÊ LƯỢT XEM, BÀI VIẾT, BÌNH LUẬN, CHO BLOGSPOT/WEBSITE CỰC ĐẸP

  • Vậy làm cách nào để cài đặt thống kê cho blogger bằng CSS tuyệt đẹp này?
Dưới đây là một số bước rất đơn giản để cài đặt tiện ích blogger thống kê tùy chỉnh. Trong tiện ích blogger này tôi đã sử dụng các biểu tượng khá đẹp và phông chữ PT Sans google. Bạn có thể đổi phông chữ tuỳ thích theo ý của bạn.

  Bước 1: Các bạn vào Trang Tổng Quan > Bố Cục > Thêm Tiện Ích và chọn tiện ích Thống Kê Blog

  Bước 2: Vào phần Chủ Đề > Chỉnh sửa HTML > Chuyển đến tiện ích "Stats1" và tìm Đoạn Code sau:
 <b:widget id='Stats1' locked='false' title='Custom Stats' type='Stats' version='1' visible='true'>...</b:widget>
  Hãy thay nó bằng đoạn code sau:
 <b:widget id='Stats1' locked='false' title='Custom Stats' type='Stats' version='1' visible='true'>    <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' 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 post2'> Total Posts &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'> Total Comments &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></b:includable>  </b:widget>
 Bước 3: Chúng ta đã hoàn thành được 80% rồi giờ ta thêm CSS vào để nó đẹp lên nào. Tìm đến thẻ </Head> và thêm đoan code sau phía trên nó:
 <link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/><link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> <style type='text/css'>/* Blogger Custom Stats widget by huyhoangit.com */.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;Page Views&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Ú Ý:  DO CODE NÀY MÌNH COPY CỦA ADMIN KHÁC VỀ NHƯNG KHI ĐƯA LÊN BLOG CÓ 1 CỘT KHÔNG HIỂN THỊ (CỘT SỐ NGƯỜI ONLINE) CHẲNG BIẾT BỊ LỖI GÌ. VÀ MÌNH SỬA LẠI CODE NHƯ SAU:

THAY CODE BƯỚC 2 THÀNH CODE SAU:

 <b:widget id='Stats1' locked='false' title='THỐNG KÊ WEBSITE' type='Stats' version='1' visible='true'>    <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' 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 post2'> Tổng 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>
<div class='tongso-online'></div>
<div class='user-online'>
<script id='_waupdf'>var _wau = _wau || []; _wau.push(["small", "crb80wjzupwl", "pdf"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="//widgets.amung.us/small.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>
</div>
<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></b:includable>  </b:widget>


THAY CODE BƯỚC 3 THÀNH CODE SAU:


 <link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/><link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> <style type='text/css'>
/* Blogger Custom Stats widget by Thinh ND */
.Stats img {display:none!important;background-image:none;}
.Stats .counter-wrapper {width:92.5%;float:right;text-align:right;margin:0px!important;line-height:35px;color:#333;font-weight:700;font-size:17px;margin-left: 0;padding-right:25px}
.Stats .counter-wrapper:after {content:"Lượt Xem";float:left;text-align:left;font-size:15px;font-weight:700;color:#333;}
.counts {display:inline-block;width:92%;font-size:15px;line-height:35px;color:#333;font-weight:700;}
.counts .count {display:inline-block;font-size:17px;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:#222;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:"\f06e";}
.counts.post2:before {content:"\f044";}
.counts.comment:before {content:"\f0e6";}
#Stats1_content {width:auto;height:auto;background-color:#fff;}
.tongso-online:before{content:'\f007';font-family:fontawesome;color:#222;float:left;text-align:center;width:35px;height:35px;font-size:18px;float:;line-height:35px;border-radius:2px;margin:0px 8px 0 0;}
.tongso-online:after{content:"Đang Online ";float:left;text-align:left;margin-top:7px;font-size:15px;color:#333;font-weight:700}
.user-online{float:right;margin:8px 24px 0px 0px}
</style>


MÌNH ÁP DỤNG THÀNH CÔNG, CHÚC CÁC BẠN MAY MẮN!!!!!

 MỌI THÔNG TIN VUI LÒNG LIÊN HỆ NGAY VỚI CHÚNG TÔI :   

TRUNG TÂM THIẾT KẾ WEBSITE  -  WEB DẠNG BLOG -  ZÁRẺ 
Phụ trách thiết kế : Mr.Mika 
Call me : 0919.08.3000 - 0927.927.000 - Email :  Lienhe365@gmail.com 
Phụ trách kỹ thuật và kinh doanh : Mr. Sơn
Call me : 0919.083.000 - 0927.927.000   Email :   Setup247@Gmail.Com 
Hỗ trợ ZALO 24/24 :   Nhập số 0927.927.000 và zalo kết bạn và liên hệ nhé!

GIỚI THIỆU ĐẾN QUÝ KHÁCH MỘT SỐ DỰ ÁN SẼ THỰC HIỆN TRONG NĂM 2018


DANH MỤC BÀI ĐĂNG - KHÁCH MUỐN XEM NỘI DUNG GÌ LICK VÀO TIÊU ĐỀ ẤY


WEBSITEMIKA - THƯƠNG HIỆU UY TÍN BỞI HƠN 300 DOANH NGHIỆP VÀ CÁC THƯƠNG HIỆU VỪA VÀ NHỎ LỰA CHỌN
Điểm giao dịch: Online 24h
-Email: Setup247@gmail.com - Website: https://thietkeweb.mikalaza.com