Hướng Dẫn :
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ú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 != ""'><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' width='75'/>
</b:if>
<span expr:class='"counter-wrapper " + (data:showGraphicalCounter ? "graph-counter-wrapper" : "text-counter-wrapper")' expr:id='data:widget.instanceId + "_totalCount"'>
</span>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='Stats1' locked='false' mobile='yes' title='Thống Kê Truy Cập' 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 + "_content"' style='display: none;'>
<b:if cond='data:showAnimatedCounter and data:showSparkline'><div class='stats-overlay'/></b:if>
<b:if cond='data:showSparkline'>
<img alt='Sparkline' class='sts-chart img-responsive' expr:id='data:widget.instanceId + "_sparkline"'/>
</b:if>
<div class='stats-container'><label><b:with value='"pageViews"' var='translateLan'><b:include name='translateLan'/></b:with></label><div expr:class='"counter-wrapper " + (data:showGraphicalCounter ? "mat-counter graph-counter-wrapper" : "text-counter-wrapper")' expr:id='data:widget.instanceId + "_totalCount"'/></div>
</div>
<div class='stats-container'><label><b:with value='"postsNumber"' var='translateLan'><b:include name='translateLan'/></b:with></label><div expr:class='(data:showGraphicalCounter ? "mat-counter " : "") + "total-posts-counter"'/></div>
<script>
function totalPosts(json){$(".total-posts-counter").append(json.feed.openSearch$totalResults.$t);};
$( document ).ready(function() {
var sTP = document.createElement("script");
sTP.type = "text/javascript";
sTP.src = "/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts";
$("head").append(sTP);
});
</script>
<!-- <b:include name='quickedit'/>-->
</div>
</b:includable>
<b:includable id='translateLan'>
<b:with value='{"af", "de", "am", "ar", "bn", "kn", "zh_HK", "zh_CN", "zh_TW", "es", "es_419", "fil", "fr_CA", "fr", "el", "gu", "hi", "id", "en", "en_GB", "it", "ja", "ml", "ms", "mr", "or", "pt_BR", "pt_PT", "ru", "ta", "te", "ur"}' var='langsAvailable'>
<b:if cond='data:langsAvailable any (language => language == data:blog.locale )'>
<b:with value='{0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31}' var='langNum'>
<b:with value='{"Bladkyke", "Seitenaufrufe", "የገጽ ዕይታዎች", "المشاركات", "পৃষ্ঠাদর্শন", "ಪುಟವೀಕ್ಷಣೆಗಳು", "網頁檢視次數", "网页浏览次数", "個網頁瀏覽數", "Páginas vistas", "Páginas vistas", "Mga Pageview", "Pages vues", "Pages vues", "Προβολές σελίδας", "પૃષ્ઠ દૃશ્યો", "पृष्ठ देखे जाने की संख्या", "Penayangan", "Pageviews", "Pageviews", "Visualizzazioni di pagine", "ページビュー", "പേജ്കാഴ്ചകള്", "Paparan halaman", "पृष्ठदृश्ये", "Pageviews", "Visualizações de página", "Visualizações de páginas", "Просмотры страницы", "பக்கக்காட்சிகள்", "పేజీ వీక్షణలు", "صفحہ دیکھے جانے کی تعداد"}' var='totalPageViewsMessage'>
<b:with value='{"Plasings", "Posts", "ልጥፎች", "مرات مشاهدة الصفحة", "পোস্টগুলি", "ಪೋಸ್ಟ್ಗಳು", "文章", "帖子", "發表文章", "Entradas", "Publicaciones", "Mga Post", "Messages", "Articles", "Αναρτήσεις", "પોસ્ટ્સ", "संदेश", "Pos", "Posts", "Posts", "Post", "投稿", "പോസ്റ്റുകള്", "Catatan", "पोस्ट्स", "ପୋଷ୍ଟ ସମୂହ", "Postagens", "Mensagens", "Сообщения", "இடுகைகள்", "పోస్ట్లు", "اشاعتیں"}' var='totalPostsMessage'>
<b:with value='data:langNum first (x => data:langsAvailable[x] == data:blog.locale)' var='currentLang'>
<b:if cond='data:currentLang'>
<b:if cond='data:translateLan == "pageViews"'>
<b:eval expr='data:totalPageViewsMessage[data:currentLang]'/>
</b:if>
<b:if cond='data:translateLan == "postsNumber"'>
<b:eval expr='data:totalPostsMessage[data:currentLang]'/>
</b:if>
</b:if>
</b:with>
</b:with>
</b:with>
</b:with>
<b:else/>
<b:if cond='data:translateLan == "pageViews"'>
Lượt Xem
</b:if>
<b:if cond='data:translateLan == "postsNumber"'>
Bài Đăng
</b:if>
</b:if>
</b:with>
</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> <style> .widget.Stats, .Stats{background-color:<data:skin.vars.accentColor/>;color:<data:skin.vars.fallbackTextColor/>;}
.Stats .counter-wrapper, .Stats .total-posts-counter{display: inline-block;opacity: .87;font-size: 20px;border: 2px solid #03A9F4;border-radius: 10px;padding:10px 16px;}
.sts-chart{width:100%;height:120px;}
.stats-container{display: inline-block;float:left;width:50%;background-color: <data:skin.vars.fallbackBackground/>;margin-bottom: 15px;padding: 16px;text-align: center;}
.Stats .total-posts-counter{border: 2px solid #ff9800;}
label{display:block;opacity:.75;font-weight:400;}
.stats-overlay.counted{position: absolute;top: 0;right: 0;width: 100%;height: 120px;background-color: <data:skin.vars.accentColor/>;-webkit-transition: width 3s ease-in; -moz-transition: width 3s ease-in; -o-transition: width 3s ease-in; transition: width 3s ease-in;}
.stats-overlay.counted.animated{width: 0%;}</style>Bước 6: Lưu lại và xem thành quảLời Kết : 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.
BÌNH LUẬN (0)
Một số lưu ý khi bình luận
Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)
Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời
Để bình luận một đoạn code, hãy mã hóa code trước nhé