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

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/AVvXsEh6bUKB8ULHP4UNwHBS_uMZdIbPWvwW_OuwP0wtFlBBjiolHJydcWtUfZ5jeWQTzJ5KfQvfigGsVj3rupv7G5cqYHYRM2WSEQPaXZnc46fyE1pxyEpIIRwVANCRCgksm_1bNnlIQapIDAg/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/AVvXsEh6bUKB8ULHP4UNwHBS_uMZdIbPWvwW_OuwP0wtFlBBjiolHJydcWtUfZ5jeWQTzJ5KfQvfigGsVj3rupv7G5cqYHYRM2WSEQPaXZnc46fyE1pxyEpIIRwVANCRCgksm_1bNnlIQapIDAg/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

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

Instagram

Subscribe Our Newsletter

Demo

Posting Terkait

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

Đăng nhận xét

Giới thiệu bản thân

Thống kê

Đăng nhận xét

Menu mobi

NHÃN

Topst

Trang

Recent Posts

Liên kết website

Business

Tạo biểu mẫu liên hệ đẹp cho blogger

Code Forum JohCMS 6.2 DienDanvn

Share Template Bán Acc Game LMHT Blogger

Thêm danhd giá bài viết star 5s cho blogger

Iklan Atas Artikel

Iklan Tengah Artikel 1

Quảng cáo

Quảng cáo bài viết

ABOUT ME

Bài viết mới nhất