Trang chủ Thủ thuật Tạo thanh support một bên cực chất cho blogger

Tạo thanh support một bên cực chất cho blogger

- 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: tiennau1212@gmail.com
• Facebook: www.fb.com/tiennausenpai


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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTOYdPf-SAT0_x3ORQ4I5R3S8At3IJyFPOJRubbjFQ7RcPqBlc-8IW-Y6dXiE5-U67OjbtTuvTQiODHiQkdN6yqrLE9dpHL0160mDB_PosJY2riVkmkJB4sSeKmuNEgQsVZyR0MzSCbcI/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>
  .switcher{position:fixed;top:20%;right:0;z-index:999999999;background-color:#FFF;margin-right:-200px;transition:.5s;color:#444}
 .switcher{position:fixed;top:15%;right:20px;z-index:999999999;background-color:#FFF;margin-right:-300px;transition:.5s;color:#444}
 .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}
 #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: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>
 <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>
 
   <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTOYdPf-SAT0_x3ORQ4I5R3S8At3IJyFPOJRubbjFQ7RcPqBlc-8IW-Y6dXiE5-U67OjbtTuvTQiODHiQkdN6yqrLE9dpHL0160mDB_PosJY2riVkmkJB4sSeKmuNEgQsVZyR0MzSCbcI/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>
        
 #menu-ndh li a{color: #fff;}
 
 .contsho a:hover{color:#f90}
  
 .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}
 .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}
 
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

    • No comments

    Subscribe to: Post Comments ( Atom )

    Made with in Binh Duong

    Design and Development Tiên Nâu Senpai. © Copyright WAPCHIASEIT 2020.