-->

Tùy biến thống kê đẹp cho Blogspot (Blogger)

Tùy biến thống kê đẹp cho Blogspot (Blogger)

Tùy biến thống kê đẹp cho Blogspot (Blogger)

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 Blog. Nhưng mặc định của nó không được đẹp. Nên...
Comment 11:00 PM
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 Blog. Nhưng mặc định của nó không được đẹp. Nên hôm nay sửa chữa điện thoại sẽ chia sẽ hướng dẫn các bạn tùy biến thống kê đẹp cho Blogspot (Blogger).


Bước 1: Đăng nhập Blog > Bố cục > Thêm Tiện ích > Thống kê blog > Chọn kiểu thứ 2 (như hình dưới) rồi Lưu.


Các bạn để ý link của Widget các bạn vừa tạo và nhớ cái ID cuối cùng của dòng link. Thường thì mặc định của Widget này là Stats1.


Bước 2: 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 (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'>
    <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 != &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 3: 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 4: Các bạn chèn đoạn code phía dưới vào trước 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 5: Lưu lại và xem thành quả

Chúc các bạn thành công!
Tùy biến thống kê đẹp cho Blogspot (Blogger) Tùy biến thống kê đẹp cho Blogspot (Blogger)Admin8.8stars based on9reviewsNhư 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 Blog. Nhưng mặc định của nó không được đẹp. Nên...

Blogger Comments


No comments. Chúc mừng bạn là người đầu tiên.

  • linh kiện điện thoại giá rẻ tphcm
  • chợ linh kiện điện thoại
  • shop linh kiện điện thoại
  • linh kiện sửa điện thoại
  • đại lý linh kiện điện thoại tại hà nội
  • cửa hàng linh kiện điện thoại tại hà nội
  • linh phụ kiện điện thoại
  • linh kiện điện thoại tphcm
  • mua linh kiện điện thoại
  • linh kiện điện thoại hà nội
  • sỉ linh kiện điện thoại
  • linh kiện điện thoại giá sỉ
  • linh kiện điện thoại
  • linh kien dien thoai
  • phụ kiện điện thoại
  • phu kien dien thoai