Tạo Phần Thống Kê Kèm Avatar Tuyệt Đẹp Cho Blogspot

Chào các bạn, hôm nay mình xin hướng dẫn các bạn cách tạo phần thống kê kèm Avatar cực đẹp cho Blogspot. Không dài dòng nữa, chúng ta bắt đầu thôi!


Bước 1: Các bạn vào Blogger Chủ đề Chỉnh sửa HTML.
Bước 2: Copy & Paste đoạn code này trước thẻ ]]></b:skin>

/* tinhgetterblog */ section.widget_info_blog{padding:0!important;overflow:hidden;background:transparent!important;border-radius:3px 3px 0 0!important} .feau{height:100px;background:url('http://theneodesign.com/wp-content/uploads/2014/04/2014-04-26-06.32.50-pm.jpg');padding:2px0;text-align:center} .feau h1{background:;font-size:25px;color:#fff;text-align:center} .feau p{font-size:15px;color:#fff;text-align:center;margin-bottom:7px!important} .pms-logo-widget img{max-height:80px;border:5px solid #fff;border-radius:100%;margin-top:-40px;margin-left:calc(50% - 40px);background: #4d90fe;} .pms-logo-widget img:hover{-moz-transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-o-transform: rotateY(180deg); transform: rotateY(180deg);} .info{float:left;width:100%;background:#fff;min-height:30px;margin-top:-35px;padding:5px} .col-widget{float:left;width:48%;text-align:center;height:35px;line-height:35px;font-size:18px;color:#333;} /* Butom Follow */ .pms-follow-wrpicon{display:block;margin:15px auto 5px;position:relative;} .pms-follow-wrpicon .extender{width:100%;display:block;} .extender{text-align:center;font-size:16px} .extender .pms-follow-icon{display:inline-block;border:0;margin:0;padding:0;width:48.8%} .extender .pms-follow-icon a{background:#fff;display:inline-block;font-weight:400;color:#006e78;line-height:36px;border-radius:3px;font-size:14px;border:1px solid #006e78;width:100%;transition:initial} .extender .pms-follow-icon i{font-family:fontawesome;margin:0 4px 0 0} .pms-follow-icon.blogger a:hover,.pms-follow-icon.ppal a:hover{background:#006e78;border-color:transparent;color:#fff;} .extender .pms-follow-icon:hover a,.extender .pms-follow-icon a:hover{color:#fff;}
Bước 3: Vào Bố cục  HTML/Javascript và dán đoạn code này vào.

<div class="feau"> <h1><i class="fa fa-code"></i> Tính Getter Blog</h1> <p>Chia Sẽ Thủ Thuật & Ảnh Bìa Facebook</p> </div> <br /> <div class="pms-logo-widget"><a href="/"><img src="https://i.pinimg.com/564x/4e/0d/c7/4e0dc73dc10c6d49e97f861acec05321.jpg" /> </a></div> <div class="info"> <div class="col-widget so-bai"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i> <script style="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t, 10)); } </script> <script src="/feeds/posts/default?alt=json-in-script&amp;callback=showpostcount"></script> </div> <div class="col-widget so-comment"> <i class="fa fa-comments-o" aria-hidden="true"></i> <script style="text/javascript"> function numberOfComments(json) { document.write(json.feed.openSearch$totalResults.$t); } </script> <script src="/feeds/comments/default?alt=json-in-script&amp;callback=numberOfComments"></script> </div></div> <div style="clear:both; margin-top:10px ;"></div> <div class="pms-follow-wrpicon"> <ul class="extender"> <li class="pms-follow-icon blogger"><a href="https://www.blogger.com/follow-blog.g?blogID=8483068614704248354" target="_blank" title="Follow this site"><i class="fa fa-users"></i> Theo Dõi</a></li> <li class="pms-follow-icon ppal"><a href="http://www.tinhgetter.net" target="_blank" title="Liên Hệ"><i class="fa fa-paper-plane"></i> Liên Hệ</a></li> </ul></div> <div class='clear'></div>
Thay phần tô màu trong Blockquote thành tên Blog của các bạn.
Vậy là xong! Chúc các bạn thành công! Nếu trong quá trình làm có thông báo lỗi, thì hãy để lại comment bên dưới, mình sẽ giải đáp thắc mắc hoặc sửa lỗi giúp cho các bạn.
Tác giả bài viết: Tính Getter
Thời gian đăng bài: Thứ Ba, 3 tháng 10, 2017
Tổng số bình luận: 32

32 nhận xét:

  1. Trả lời
    1. cái đó bên bsw cũng có mà :))

      Xóa
    2. lấy ở đâu view-source ở đấy chớ :v

      Xóa
    3. Code này đâu phải của bác đâu :v, với lại Blog bác có đăng bài này đâu mà ghi nguồn -_-

      Xóa
    4. Mà bác view-source sao ra thẻ ]]></b:skin> hay vậy ? :))

      Xóa
    5. Đặt ở ]]> cho khỏi f12
      Mà lấy ở đâu view-source ở đó chớ
      Thường là vậy mà

      Xóa
    6. Mà bác view-source ở đâu ?

      Xóa
    7. Chắc lần sau mã hóa khỏi view-source :v

      Xóa
    8. Ừm. Chống chuột phải & F12 (Ctrl + U) đấy :v

      Xóa
    9. Mã Hóa Code í. chuột phải & F12 (Ctrl + U) làm gì vẫy copy như thường :v

      Xóa
  2. Tính cho xin code 2 phần này cái <3
    Link ảnh: http://www.upsieutoc.com/image/TrxAOr
    Gửi qua gmail tui nha: huybunbokaka@gmail.com
    Cám ơn trước :*

    Trả lờiXóa
  3. Liên Kết nhé bạn: Http://www.chanhducit.tk
    Tên: Chánh Đức IT

    Trả lờiXóa
  4. Cái này thay vì dùng margin:0 trong đoạn .extender .pms-follow-icon thì dùng margin-top:5px cho nó tách nhau ra nhìn đẹp hơn e ạ.

    Trả lờiXóa