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

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

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 ...
Lê Bá Long Tác giả:
Xuất bản: 6/12/2018

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 

Hướng dẫn tạo hộp thống kê cực đẹp cho blogspot Hướng dẫn tạo hộp thống kê cực đẹp cho blogspotLê Bá Long IT8.8stars based on9reviews 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 ...

Blogger Comments

Hiện tại có 27 nhận xét:

  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