HƯỚNG DẪN CÁCH LÀM:
Bước 1: Để tạo widget này các bạn vào Bố cục -> Thêm tiện ích -> Kéo xuống dưới chọn Thống kê blog và chọn kiểu 2 nhéBước 2: Tìm đoạn id='Stats1' và thay toàn bộ widget của id='Stats1' thành đoạn code bên dưới
<b:widget id='Stats1' locked='false' title='' type='Stats' version='1'>Bước 3: Để đoạn trang trí cho đoạn code trên thì tìm đoạn ]]></b:skin> và dán toàn bộ đoạn css bên dưới lên nó nhé
<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 != ""'><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/HmyKG6e.jpg'/>
</div>
<!-- /.widget-user-image -->
<h3 class='admin-username'>Trần Thanh Bình</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 + "_content"' 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 + "_sparkline"' height='30' width='75'/>
</b:if>
<span expr:class='"counter-wrapper " + (data:showGraphicalCounter ? "graph-counter-wrapper" : "text-counter-wrapper")'><a expr:id='data:widget.instanceId + "_totalCount"'/></span>
<b:include name='quickedit'/>
</div>
</div>
<script type='text/javascript'>
function postCount(json){
document.write("<span class='counts post2'> Tổng bài viết ");
var count = json.feed.openSearch$totalResults.$t;
document.write("<span class='count all-posts'>" + count + "</span>");
document.write("</span>")
}
function numberOfComments(json){
document.write("<span class='counts comment2'> Tổng nhận xét ");
var count = json.feed.openSearch$totalResults.$t;
document.write("<span class='count all-comments'>" + count + "</span>");
document.write("</span>")
}
</script>
<script src='/feeds/posts/default?alt=json-in-script&max-results=0&callback=postCount' type='text/javascript'/>
<script src='/feeds/comments/default?alt=json-in-script&max-results=0&callback=numberOfComments'/>
</b:includable>
</b:widget>
/* Thong ke */* Nhớ xóa css trước để tránh nó hiển thị không được đẹp nhé
.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}
Chúc các bạn thành công!
Không có nhận xét nào