ong 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 trên blog của bạn và tôi
cũng đã chỉnh sửa một chút về CSS của tiện ích thống kê này để phù hợp
với mỗi người.
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.
![]() |
Hình Minh Họa |
CÁC BƯỚC THỰC HIỆ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>Thay nó bằng đoạn code sau:
<b:widget id='Stats1' locked='false' title='Thống kê Website' type='Stats' version='1'>
<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'>true</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'> <!-- 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' 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 + "_totalCount"'/> <b:else/> <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/> </b:if> <div class='tongso-online'/>
<div class='user-online'>
<script id='_waukw3'>var _wau = _wau || []; _wau.push(["small", "5yjro8m2vikg", "kw3"]);
(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 type='text/javascript'>function postCount(json){document.write("<span class='counts post2'> Tổng số bài viết ");var count = json.feed.openSearch$totalResults.$t;document.write("<span class='count'>" + count + "</span>");document.write("</span>")}function numberOfComments(json){document.write("<span class='counts comment'> Tổng lượt Comments ");var count = json.feed.openSearch$totalResults.$t;document.write("<span class='count'>" + count + "</span>");document.write("</span>")}</script><script src='/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=postCount' type='text/javascript'/><script src='/feeds/comments/default?alt=json-in-script&amp;max-results=0&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'/>
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>
<style type='text/css'>
/* Blogger Custom Stats widget by Huy Hoang IT */
.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:"Page Views";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}
@media screen and (max-width: 980px) {
#Followers1{display:none}
}
</style>
LỜI KẾT
- Các bạn nhớ xóa đoạn cũ rồi thêm đoạn đó vào nhé :D
- Còn nếu không hiện ra được thì tùy thuộc vào templates nữa :v
- Còn nếu không hiện ra được thì tùy thuộc vào templates nữa :v
Bình luận Blogger
● Comment có văn hóa: Không chửi tục, nói bậy, thông qua khung Comment.
● Với tên "ẩn danh" thì bạn tích vào ô: "chứng minh bạn không phải là rô-bốt".
● Để bình luận một đoạn code, bạn click vào đây để mã hóa code trước nhé !
● Để đăng ảnh làm hình minh họa, bạn click vào đây để Upload ảnh lên sever nhé !
0 nhận xét | Viết lời bình