home subdirectory_arrow_left

Top Ad unit 728 × 90

Tạo tiện ích thống kê cho blogger

Hello xin chào tất cả các bạn, theo yêu cầu của một số bạn thì hôm nay mình sẽ viết bài hướng dẫn cho các bạn tạo widget như blog mình nhé.

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: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'>
            <!-- 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 + &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;)'><a expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/></span>
      <b:include name='quickedit'/>
    </div>
  </div>
<script type='text/javascript'>
   function postCount(json){
    document.write(&quot;<span class='counts post2'> Tổng bài viết &quot;);
    var count = json.feed.openSearch$totalResults.$t;
    document.write(&quot;<span class='count all-posts'>&quot; + count + &quot;</span>&quot;);
    document.write(&quot;</span>&quot;)
  }
  function numberOfComments(json){
    document.write(&quot;<span class='counts comment2'> Tổng nhận xét &quot;);
    var count = json.feed.openSearch$totalResults.$t;
    document.write(&quot;<span class='count all-comments'>&quot; + count + &quot;</span>&quot;);
    document.write(&quot;</span>&quot;)
   }
 </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'/>
</b:includable>
          </b:widget>
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é
/* Thong ke */
.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}
* Nhớ xóa css trước để tránh nó hiển thị không được đẹp nhé
Chúc các bạn thành công!
Tạo tiện ích thống kê cho blogger Đánh giá bởi Star Bình trên tháng 11 21, 2017 Xếp hạng: 5

18 nhận xét:

- Fix Lại Rồi À Anh

TRẢ LỜI

- https://ntdsystem.blogspot.com/
- Coi Của Em Nè @@

TRẢ LỜI

đọc chi kĩ, cái phần dấu (*) đó

TRẢ LỜI
avatar
Huỳnh Hoài Bảo

http://www.baoshady.tk/
Cái tổng lượt xem sao nó dính vào luôn nhau vậy anh Bình ? Anh giúp em chỉnh lại với

TRẢ LỜI
avatar
Niệm Style Blog

Bài viết hay lắm. Cám ơn nhé!

TRẢ LỜI

Ok bạn, thường xuyên ghé thăm blog để xem nhiều thủ thuật, tiện ích hay khác nhé

TRẢ LỜI

Em xem còn css nào trước đó k nhé, và xóa nó đi

TRẢ LỜI
avatar
Huỳnh Hoài Bảo

em xóa hết rồi mà ...

TRẢ LỜI

tìm .Stats .counter-wrapper:after và thêm width:79%;

TRẢ LỜI
avatar
Huỳnh Hoài Bảo

vẫn như vậy anh ơi @@

TRẢ LỜI

Ngáo à, chỉnh width thành 79% nhé

TRẢ LỜI
avatar
Huỳnh Hoài Bảo

vẫn vậy -.-

TRẢ LỜI
avatar
Nguyễn Bảo Trang

e làm bị lổi a ơi demo https://baotrangblogseo.blogspot.com/

TRẢ LỜI

http://notepad.vn/share/mnemsax73
CSS cho template của bạn nhé

TRẢ LỜI

Css của ông giờ đẹp quá =))

TRẢ LỜI

Dùng icon =)) chướng vl ":3"

TRẢ LỜI

Cái thống kê lượt xem đâu mất r anh

TRẢ LỜI

THAM GIA BÌNH LUẬN NGAY!

» Hãy là con người văn minh từ những câu nói

Copyright © 2017 Star Bình Blog
Designed & Developed by Tran Thanh Binh