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 để đượ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.

[CODE Blogspot] Hiển Thị Thời Gian Tải Blog

- Mình sẽ hướng dẫn các bạn tạo một widget đơn giản hiển thị thời gian tải trang web của bạn.Widget này giúp cho bạn đọc ghé thăm blog của bạn có thể biết được thời gian load trang của bạn là bao lâu, và cũng để chính chũng ta biết được khả năng load của blog mình là nhanh hay chậm. Bắt đầu nhé :))

Bước 1: Truy cập vào trang quản lý blog, Chọn mục bố cục (Như hình):

Bước 2: Thêm tiện ích - HTML/Javascript (Như hình):

Bước 3: Coppy rồi gián đoạn code bên dưới vào (Như hình):

 <div class='widget-content'><style>#texttime{font-weight:bold;text-align:center;text-transform:uppercase;padding:3px;width:100%;float:left;color:#fff;font-size:10px;background:#199386;border-radius: 2px}#endTime{color:#FFF700}</style><script type="text/javascript">var startTime=new Date();function currentTime(){var a=Math.floor((new Date()-startTime)/100)/10;if (a%1==0) a+=".0";document.getElementById("endTime").innerHTML=a}window.onload=function(){clearTimeout(loopTime)}</script><script type="text/javascript">document.write('<span id="texttime"><i class="fa fa-clock-o" aria-hidden="true"></i> Thời Gian Load Trang: <span id="endTime">0.0</span> giây</span> ');var loopTime=setInterval("currentTime()",100);</script></div>

Mọi thắc mắc comment bên dưới.  Chúc các bạn thành công!

[ Blogger ] Thêm Tiện Ích Popular Post Đẹp Và Đơn Giản Cho Blogspot

Chào các bạn, hôm nay mình sẽ hướng dẫn các bạn làm tiện ích Popular-post đẹp nhưng nhìn rất đơn giản.

  Đầu tiên, các bạn vào Chủ đề >> Chỉnh sửa HTML >> chèn đoạn CSS sau trước thẻ  ]]></b:skin>.

12345678910.popular-posts li:nth-child(2n+2){background:#F2F2F2}.popular-posts li{font-weight:500;border-bottom:0 solid #ddd;list-style:none;margin:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.popular-posts li:last-child{border-bottom:0}.popular-posts li:before{content:"\f006";display:inline-block;font:normal normal normal 14px/1 FontAwesome;transform:translate(0,0);margin-right:3px;color:#3b5998;font-size:16px}.popular-posts li:hover:before{content:"\f005";display:inline-block;font:normal normal normal 14px/1 FontAwesome;transform:translate(0,0);margin-right:3px;color:#3b5998;font-size:16px}.PopularPosts .widget-content ul li a{color:#222}.PopularPosts .widget-content ul li a:hover{color:#3b5998}.PopularPosts img:hover{opacity:.4}.PopularPosts .widget-content ul li{padding:8px;display:block;font-size:16px}
.widget-item-control{display:none!important}
.PopularPosts .item-thumbnail{margin:0 10px 0 0 !important;width:90px;height:64px;float:left;overflow:hidden;border-radius:2px}
.PopularPosts ul li img{padding:0;width:90px;height:64px;transition:all .3s ease-out!important;-webkit-transition:all .3s ease-out!important;-moz-transition:all .3s ease-out!important;-o-transition:all .3s ease-out!important}
.PopularPosts ul li img:hover{-webkit-transform:scale(1.1) rotate(-1.5deg)!important;-moz-transform:scale(1.1) rotate(-1.5deg)!important;transform:scale(1.1) rotate(-1.5deg)!important;transition:all .3s ease-out!important;-webkit-transition:all .3s ease-out!important;-moz-transition:all .3s ease-out!important;-o-transition:all .3s ease-out!important}
.PopularPosts .widget-content ul li{overflow:hidden;border-top:3px solid #EEE;padding:7px 0;    white-space: nowrap;margin-left: 1px;text-overflow: ellipsis; margin-right: 10px}
.sidebar .PopularPosts .widget-content ul li:first-child{padding-top:0px;border-top:0px}
.PopularPosts ul li a{font-family:Arial;color:#222;font-weight:500;font-size:17px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;line-height:1.5em}
.PopularPosts ul li a:hover{color:#3b5998}
.widget-content .PopularPosts{padding:0}.custom-widget li:nth-child(2n+2),.popular-posts li:nth-child(2n+2){background:#F2F2F2}.popular-posts li:before{content:"\f006";display:inline-block;font:normal normal normal 14px/1 FontAwesome;text-rendering:auto;transform:translate(0,0);margin-right:3px;color:#444;font-size:16px;margin-left:1px}

  Sau đó các bạn lưu template lại. Rồi chọn Bố cục >> Bài Đăng Phổ Biến và cài đặt như hình dưới:

  Cuối cùng chỉ cần lưu lại và xem kết quả.

  Chúc các bạn thành công!!!!