Tuesday, December 6, 2016

[ TIP ] Tạo Tiện Ích Thống Kê Blog Đơn Giản Đẹp

QUẢNG CÁO

Như các bạn đã biết Blogger hỗ trợ 1 Widget giúp thống kê cho blog hiển thị số lượt truy cập vào Blog. Nhưng mặc định của nó không được đẹp. Nên hôm nay mình sẽ chia sẽ 1 mẫu Thống kê cho Blog được tùy biến lại so với bản gốc của Blogger.

Mẫu này thì mình tách từ một template khác :D các bạn mang về có thể chỉnh sửa lại cho ưng ý. Giờ thì bắt tay vào làm thôi nhỉ :D.
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ư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' mobile='yes' title='Thống Kê Truy Cập' type='Stats' version='1' 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;'>
<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 + &quot;_sparkline&quot;'/>
</b:if>
<div class='stats-container'><label><b:with value='&quot;pageViews&quot;' var='translateLan'><b:include name='translateLan'/></b:with></label><div expr:class='&quot;counter-wrapper &quot; + (data:showGraphicalCounter ? &quot;mat-counter graph-counter-wrapper&quot; : &quot;text-counter-wrapper&quot;)' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/></div>
</div>
<div class='stats-container'><label><b:with value='&quot;postsNumber&quot;' var='translateLan'><b:include name='translateLan'/></b:with></label><div expr:class='(data:showGraphicalCounter ? &quot;mat-counter &quot; : &quot;&quot;) + &quot;total-posts-counter&quot;'/></div>
<script>
function totalPosts(json){$(&quot;.total-posts-counter&quot;).append(json.feed.openSearch$totalResults.$t);};
$( document ).ready(function() {
var sTP = document.createElement(&quot;script&quot;);
sTP.type = &quot;text/javascript&quot;;
sTP.src = &quot;/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=totalPosts&quot;;
$(&quot;head&quot;).append(sTP);
});
</script>

<!-- <b:include name='quickedit'/>-->
</div>
</b:includable>
<b:includable id='translateLan'>
<b:with value='{&quot;af&quot;, &quot;de&quot;, &quot;am&quot;, &quot;ar&quot;, &quot;bn&quot;, &quot;kn&quot;, &quot;zh_HK&quot;, &quot;zh_CN&quot;, &quot;zh_TW&quot;, &quot;es&quot;, &quot;es_419&quot;, &quot;fil&quot;, &quot;fr_CA&quot;, &quot;fr&quot;, &quot;el&quot;, &quot;gu&quot;, &quot;hi&quot;, &quot;id&quot;, &quot;en&quot;, &quot;en_GB&quot;, &quot;it&quot;, &quot;ja&quot;, &quot;ml&quot;, &quot;ms&quot;, &quot;mr&quot;, &quot;or&quot;, &quot;pt_BR&quot;, &quot;pt_PT&quot;, &quot;ru&quot;, &quot;ta&quot;, &quot;te&quot;, &quot;ur&quot;}' var='langsAvailable'>
<b:if cond='data:langsAvailable any (language =&gt; 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='{&quot;Bladkyke&quot;, &quot;Seitenaufrufe&quot;, &quot;የገጽ ዕይታዎች&quot;, &quot;المشاركات&quot;, &quot;পৃষ্ঠাদর্শন&quot;, &quot;ಪುಟವೀಕ್ಷಣೆಗಳು&quot;, &quot;網頁檢視次數&quot;, &quot;网页浏览次数&quot;, &quot;個網頁瀏覽數&quot;, &quot;Páginas vistas&quot;, &quot;Páginas vistas&quot;, &quot;Mga Pageview&quot;, &quot;Pages vues&quot;, &quot;Pages vues&quot;, &quot;Προβολές σελίδας&quot;, &quot;પૃષ્ઠ દૃશ્યો&quot;, &quot;पृष्ठ देखे जाने की संख्या&quot;, &quot;Penayangan&quot;, &quot;Pageviews&quot;, &quot;Pageviews&quot;, &quot;Visualizzazioni di pagine&quot;, &quot;ページビュー&quot;, &quot;പേജ്‌കാഴ്‌ചകള്‍‌&quot;, &quot;Paparan halaman&quot;, &quot;पृष्ठदृश्ये&quot;, &quot;Pageviews&quot;, &quot;Visualizações de página&quot;, &quot;Visualizações de páginas&quot;, &quot;Просмотры страницы&quot;, &quot;பக்கக்காட்சிகள்&quot;, &quot;పేజీ వీక్షణలు&quot;, &quot;صفحہ دیکھے جانے کی تعداد&quot;}' var='totalPageViewsMessage'>
<b:with value='{&quot;Plasings&quot;, &quot;Posts&quot;, &quot;ልጥፎች&quot;, &quot;مرات مشاهدة الصفحة&quot;, &quot;পোস্টগুলি&quot;, &quot;ಪೋಸ್ಟ್‌ಗಳು&quot;, &quot;文章&quot;, &quot;帖子&quot;, &quot;發表文章&quot;, &quot;Entradas&quot;, &quot;Publicaciones&quot;, &quot;Mga Post&quot;, &quot;Messages&quot;, &quot;Articles&quot;, &quot;Αναρτήσεις&quot;, &quot;પોસ્ટ્સ&quot;, &quot;संदेश&quot;, &quot;Pos&quot;, &quot;Posts&quot;, &quot;Posts&quot;, &quot;Post&quot;, &quot;投稿&quot;, &quot;പോസ്റ്റുകള്‍&quot;, &quot;Catatan&quot;, &quot;पोस्ट्स&quot;, &quot;ପୋଷ୍ଟ ସମୂହ&quot;, &quot;Postagens&quot;, &quot;Mensagens&quot;, &quot;Сообщения&quot;, &quot;இடுகைகள்&quot;, &quot;పోస్ట్‌లు&quot;, &quot;اشاعتیں&quot;}' var='totalPostsMessage'>
<b:with value='data:langNum first (x =&gt; data:langsAvailable[x] == data:blog.locale)' var='currentLang'>
<b:if cond='data:currentLang'>
<b:if cond='data:translateLan == &quot;pageViews&quot;'>
<b:eval expr='data:totalPageViewsMessage[data:currentLang]'/>
</b:if>
<b:if cond='data:translateLan == &quot;postsNumber&quot;'>
<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 == &quot;pageViews&quot;'>
Lượt Xem
</b:if>
<b:if cond='data:translateLan == &quot;postsNumber&quot;'>
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.

Leave a comment: