Nâng Cấp Giao Diện Thống Kê Blogger/Blogspot

Sau khi nâng cấp lên sẽ có thêm 2 tính năng đó là số bài viết tại Blog và số lượt Bình Luận tại Blog của bạn. Làm theo bài viết bên dưới để ...

B�i vi?t li�n quan:

Sau khi nâng cấp lên sẽ có thêm 2 tính năng đó là số bài viết tại Blog và số lượt Bình Luận tại Blog của bạn. Làm theo bài viết bên dưới để được giao diện nâng cấp như vậy nhé.
Bước 1: Các bạn đăng nhập vào Blog của các bạn => Bố cục

Bước 2: Chọn Thêm Tiện ích => Thống kê blog => Chọn kiểu thứ 2 (như hình dưới) rồi Lưu

Lưu ý: Các bạn để ý vào link của Widget các bạn vừa tạo và nhớ cái ID sau cùng của dòng link. Thường thì mặc định của Widget này là Stats1 

Bước 3: Các bạn chọn Mẫu => Chỉnh sửa HTML => Chọn đến tiện ích lúc nãy các bạn vừa thêm, như của mình là Stats1 

Lúc này các bạn sẽ thấy 1 đoạn code:

<b:widget id='Stats1' locked='false' title='Tổng số lượt xem trang' type='Stats' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'><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' width='75'/>
</b:if>
<span expr:class='&quot;counter-wrapper &quot; + (data:showGraphicalCounter ? &quot;graph-counter-wrapper&quot; : &quot;text-counter-wrapper&quot;)' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>
</span>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Bước 4: Các bạn thay đoạn code bên trên bằng đoạn code phía dưới:

 <b:widget id='Stats1' locked='false' title='Thống kê Blogspot' type='Stats' version='1' visible='true'>    <b:includable id='main'>  <b:if cond='data:title'><h2 class='iconthongke'><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 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 lượt 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 5: Các bạn chèn đoạn code phía dưới vào trước và trên thẻ </head>

<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%;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>

Bước 6: Lưu lại và xem thành quả

Chúc các bạn thành công. Nếu có thắc mắc thì Comment bên dưới mình sẽ giải đáp cho các bạn.