Hướng dẫn tạo hộp thống kê cực đẹp cho blogspot


Hôm nay rảnh thấy cái thống kê này cũng khác đẹp nên chia sẽ cho mọi người cũng dùng.

CÁC BƯỚC THỰC HIỆN:

1. Các bạn vào bố cục ⇒ Tạo tiện ích HTML/Javascript
2. Dán toàn bộ code bên dưới vào.
<style>
#ketnoi{margin:0 0 -5px;width: 100%;box-sizing: border-box;display: inline-block;position: relative;color: #333;line-height: normal;text-align: center; border: 1px solid #eee;font-weight: 700;font-size:14px}
#ketnoi a{color:#333}
#ketnoi-col-1{width: 33.3333%;float: left;}
#ketnoi-col-1 span,#ketnoi-col-1 p{margin:0;padding:0}
.ketnoi-icon{display: block;width: 50px;height: 50px;line-height: 50px;text-align: center;background: #333;color: #fff;margin: 0 auto 5px;border-radius: 100%;transition: .3s;font-size: 22px;}
.ketnoi-facebook,.ketnoi-post,.ketnoi-comments,.ketnoi-gioi-thieu,.ketnoi-lienhe,.ketnoi-dieu-khoan{padding: 10px 0;}
.ketnoi-facebook,.ketnoi-post,.ketnoi-comments{border-bottom: 1px solid #eee}
.ketnoi-post,.ketnoi-lienhe{border-left: 1px solid #eee;border-right: 1px solid #eee;}
.ketnoi-facebook i{background: #39599f}
.ketnoi-post i{background:#9b59b6}
.ketnoi-comments i{background:#1abc9c}
.ketnoi-gioi-thieu i{background:#fa0101}
.ketnoi-lienhe i{background:#3897f0}
.ketnoi-dieu-khoan i{background:#f9b65f}
</style>
<!-- Có thể lấy widget của trường blogger nếu thích =)) -->
<div id='ketnoi'>
<div id='ketnoi-col-1'>
<div class='ketnoi-facebook'>
<a href="http://www.facebook.com/blogchiasethuthuat" target="_blank" rel="nofollow"><i class="fa fa-facebook ketnoi-icon"></i><span>3228</span><p>Thích</p></a>
</div>
</div>
<div id='ketnoi-col-1'>
<div class='ketnoi-post'>
<i class="fa fa-file-text ketnoi-icon"></i><span><script style="text/javascript">function showpostcount(t){document.write(parseInt(t.feed.openSearch$totalResults.$t,10))}</script><script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script></span><p>Bài viết</p>
</div>
</div>
<div id='ketnoi-col-1'>
<div class='ketnoi-comments'>
<i class="fa fa-comments ketnoi-icon"></i><span><script style="text/javascript">function numberOfComments(e){document.write(e.feed.openSearch$totalResults.$t)}</script><script src="/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></span><p>Bình luận</p>
</div>
</div>
<div id='ketnoi-col-1'>
<div class='ketnoi-gioi-thieu'>
<a href="/p/gioi-thieu.html" target="_blank"><i class="fa fa-heart ketnoi-icon"></i><p>Giới thiệu</p></a>
</div>
</div>
<div id='ketnoi-col-1'>
<div class='ketnoi-lienhe'>
<a href="/p/lien-he.html" target="_blank"><i class="fa fa-envelope ketnoi-icon"></i><p>Liên hệ</p></a>
</div>
</div>
<div id='ketnoi-col-1'>
<div class='ketnoi-dieu-khoan'>
<a href="/p/dieu-khoan.html" target="_blank"><i class="fa fa-list-ol ketnoi-icon"></i><p>Điều khoản</p></a>
</div>
</div>
</div>
3. Lưu lại và hưởng thụ.

LỜI KẾT:

Qua những bước đơn giản bạn đã sỡ hữu một wedget thống kê cực ưa nhìn. Hy vọng nó hữu ích với mọi người.
Nguồn code: Trường Blogger 

Viết bình luận (27)
Xếp theo

  1. hay đấy đúng cái em đang cần đó

    Trả lờiXóa
  2. Theme trên mobile nhìn lỗi phần đầu trang kìa a

    Trả lờiXóa
  3. chỉnh lại phần hover của đối tác đi e. rê chuột vào nhảy tứ tung

    Trả lờiXóa
  4. Widget đang hot ai cũng share :v

    Trả lờiXóa
  5. Bài viết rất hay <3
    CTV Thông Báo....
    Hiện tại Star Phong Blog đang bệnh rất nặng nên tạm thời hoãn blog
    Các bạn có thể hủy liên kết

    Trả lờiXóa
  6. ủa mà thìn ơi muốn làm cái logo như này thì làm ntn vậy ?
    https://imgur.com/kRY9Kam.png

    Trả lờiXóa
  7. các phần tử trong theme cách xa thế :3

    Trả lờiXóa
  8. viết bài pr web giúp nhé: http://tokenfree.startinhit.net/

    Trả lờiXóa