Tạo Thanh Support Một Bên Cực Chất Cho Blogspot

Hello xin chào 500 anh em nhé cũng đã lâu lắm rồi Blog mình không ra thủ thuật cho anh em sử dụng nên hôm nay mình sẽ share cách làm thanh support đẹp như ở Blog của mình :D

Demo

Bước 1 : Các bạn vào Blogger < Chủ Đề < Chỉnh sửa HTML
Bước 2 : Thêm đoạn code này vào thẻ <body>
<style>
.switcher{position:fixed;top:20%;right:0;z-index:999999999;background-color:#FFF;margin-right:-200px;transition:.5s;color:#444}
.switchom{background-color:#FFF;color:#3b5998;height:50px;width:50px;display:block;line-height:50px;text-align:center;font-size:20px;border-radius:5px 0 0 5px;position:absolute;left:-49px;box-shadow:inset 0 0 1px #666}
.fato1{font-size:25px;margin-right:0}
.switcher{position:fixed;top:15%;right:20px;z-index:999999999;background-color:#FFF;margin-right:-300px;transition:.5s;color:#444}
.switchom{padding:0!important;background-color:#FFF!important;color:#222!important;height:50px!important;width:50px!important;display:block;line-height:50px!important;text-align:center!important;font-size:20px!important;border-radius:5px 0 0 5px!important;position:absolute;left:-49px!important;box-shadow:inset 0 0 1px #666}
.contsho{width:280px;height:500px;padding:10px;box-shadow:inset 0 0 1px #666}
.contsho a.full{margin-bottom:0}
.contsho h3{margin-bottom:10px;font-size:15px;text-align:center;text-transform:uppercase;font-weight:700; color:#55579e; border-top:1px solid #ddd; padding-top:5px}
.contsho a:hover{color:#f90}
#menu-ndh{display:inline-block;margin: 0 0 10px;}
#menu-ndh li{width:43%;float: left;background:#55579e;text-align: center;margin: 5px;padding: 10px;box-sizing: border-box;border-radius: 5px;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.13);}
#menu-ndh li a{color: #fff;}
  #menu-ndh li a:hover{color:#f90}
.fb-page{width:100%;box-sizing:border-box;float:left}
  .contsho img{width:150px; height:150px; border-radius:50%; margin-left:60px;transition: .3s; z-index:1}
  .contsho img:hover{border-radius:0; border:4px solid #55579e;}
  .contsho h4{text-align:center; font-weight:500; margin-top:5px;}
  .contsho p{text-align:center; font-style:italic;line-height:18px}
  .contsho span{padding-bottom:3px;margin-left:13px; position:relative; top:7px}
  .contsho span:hover{border-bottom:2px solid #2a2a2a;}
</style>
<div class='switcher'>
<a class='switchom close' href='#'><i class='fa fa-bars fato1'/></a>
<div class='contsho'>
<div id='menu-ndh'>
<ul>
<li><a href='https://zalo.me/01625271155'><i class='fa fa fa-wechat'/> ZALO</a></li>
<li><a href='#' rel='nofollow' target='blank'><i class='fa fa-usd'/> ỦNG HỘ TÔI</a></li>
<li><a href='#'><i class='fa fa-users'/> MÓN QUÀ</a></li>
<li><a href='#'><i class='fa fa-heart'/> GIỚI THIỆU</a></li>
<li><a href='#'><i class='fa fa-file-text'/> BÌNH LUẬN</a></li>
<li><a href='https://zalo.me/01625271155'><i class='fa fa-envelope'/> LIÊN HỆ</a></li>
</ul>
</div>
<h3><i aria-hidden='true' class='fab fa-gg' style='margin:0 0 0 0;transform: rotate(180deg)'/> Đôi Chút Về Tác Giả <i aria-hidden='true' class='fab fa-gg' style='margin:0 0 0 0;transform: rotate(180deg)'/></h3>
  <img src='http://1.bp.blogspot.com/-SCHBdWLW-8o/WuFwDoCXg7I/AAAAAAAAHmM/lmACWAIo-gMXvphg-cV1lAqeFuhFNkTzwCK4BGAYYCw/s1600/C360_2018-03-21-10-37-16-074.jpg'/>
  <h4><i class='fab fa-vaadin'/> STAR QUỐC <i class='fab fa-vaadin'/></h4>
<p>Cuộc sống đôi lúc không như ta nghĩ,nên cần phải biết cố gắng nhiều hơn để hoàn thiện mình.</p>
  <span><i class='far fa-thumbs-up'/> Thích</span> <span><i class='fas fa-comments'/> Bình Luận</span> <span><i class='fas fa-share'/> Chia Sẻ</span>
</div>
</div>

Lưu ý :  Nếu thông tin của bạn quá dài thì chỉnh lại kích thước nhé ở đoạn CSS này :
.contsho{width:280px;height:500px;padding:10px;box-shadow:inset 0 0 1px #666}
Sau đó bạn chỉnh sửa lại thông tin tùy ý các bạn nhé
Lưu lại và tận hưởng thành quả ^^
Chúc thành công <3
Nguồn : sachvui.vn
Tác giả: Star Quốc

' Những điều thành công sẽ đến với chúng ta nếu chúng ta biết cố gắng! '

  • 39 nhận xét:

    1. Lâu lắm mới ra bài mong anh em ủng hộ mạnh tay :D

      Trả lờiXóa
    2. Update lại liên kết Blog đi kìa a

      Trả lờiXóa
    3. Trả lời
      1. Anh chơi zalo mà cần gì up link liên hệ chứ

        Xóa
      2. a thấy mail chưa anh

        Xóa
    4. Mà liên kết blogs tôi đâu rồi ông

      Trả lờiXóa
      Trả lời
      1. Đợi tui sửa lại nhé mới thay template hì đang tập làm intro video trên điện thoại :))

        Xóa
    5. Trả lời
      1. A mới thay template có gì dẫn link lại a đặt cho nhé

        Xóa
      2. Tên hiển thị: Star Phong Blog
        Mô tả: BLOG CHIA SẼ THỦ THUẬT
        Link blog: https://www.thanhphongit.tk/

        Xóa
    6. Trả lời
      1. Mơn em a chuẩn bị ra bìa mới ủng hộ nhá <3

        Xóa
    7. Trả lời
      1. Ok ông mai có trên Blog nhé h khuya rồi chắc ai cũng ngủ rồi

        Xóa
    8. A Quốc làm giúp em bài mô tả đoạn văn siêu ngắn về chủ đề một bộ phim yêu thích với a :)

      Trả lờiXóa
      Trả lời
      1. Bằng tiếng anh nha. Phần này có trong thi mà em bí quá :(

        Xóa
      2. Để mai a xem cho nhé nhớ mail nhắc a

        Xóa
    9. Trả lời
      1. Ở trên kìa mà Blog ông bị lỗi gì í

        Xóa
    10. Trả lời
      1. Hehe ông thử thêm vô Blog ông đi mơn

        Xóa
    11. Trả lời
      1. Widget á ông cho tôi xem mẫu được không

        Xóa
    12. muốn làm wiget thì thế nào vậy ông

      Trả lờiXóa
    13. Trả lời
      1. Hehe em bỏ vô blog em đi ngầu lắm

        Xóa
    14. dạo này nghỉ chơi facebook rồi à :V

      Trả lờiXóa
    15. Phải anh Tạ Thiên Quốc không ạ ?

      Trả lờiXóa