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

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
Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
Mọi chi tiết xin liên hệ:
Email: Naruto95qt@gmail.com
Star Quốc Blog
CHUYÊN MỤC

Comments của bạn (41 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
  16. Thêm sao nó không chạy ra được ad ơi

    Trả lờiXóa

Hotline: 01208.021.643
Nhắn Tin Facebook Zalo: 01208.021.643
Liên hệ hợp tác & phát triển
Naruto95qt@gmail.com