[Hướng dẫn] Tạo thanh liên hệ bên phải dạng đơn giản nhưng siêu đẹp

Code-thanh-lien-he-website-don-gian-02

Lại tiếp tục chuyên mục chia sẻ cho các bác những mẫu thanh liên hệ đẹp cho website. Các lần trước đều chia sẻ các mẫu có animation, hôm nay flatsomea-z chia sẻ cho các bác 1 dạng khác khá cơ bản, đơn giản nhưng đẹp mà nhẹ ^^.

[Hướng dẫn] Tạo thanh liên hệ bên phải dạng đơn giản nhưng siêu đẹp

Bước 1: Tạo HTML cho thanh liên hệ

Bác nào cài plugin Simple Custom CSS & JS rồi thì vào mục Custom CSS & JS > Add Custom HTML nhé. Còn bác nào không cài plugin thì thêm code nay vào trong thẻ <head>…</head> hoặc trước thẻ mở <body> nha!

<div class="giuseart-nav">
<ul>
<li><a href="#" rel="nofollow" target="_blank"><i class="ticon-messenger"></i>Messenger</a></li>
<li><a href="#" rel="nofollow" target="_blank"><i class="ticon-zalo-circle2"></i>Chat Zalo</a></li>
<li><a href="#" rel="nofollow" target="_blank"><i class="ticon-maps"></i>Tìm đường</a></li>
<li><a href="#" rel="nofollow" target="_blank"><i class="ticon-heart"></i>Youtube</a></li> 
<li class="to-top-pc">
<a href="#" rel="nofollow">
<i class="ticon-angle-up" aria-hidden="true" <="" i="">
</i>Top</a></li>
</ul>
</div>

** Nhớ thay link facebook, link youtube, link google map và số điện thoại zalo của các bác vào nhé!

Mục “to -top -pc” chỗ a href =”#” các bác thay = link ID của scroll to nha. Xem hướng dẫn cách tạo Scroll to TẠI ĐÂY

Bước 2: Thêm CSS cho thanh liên hệ

Bác nào cài plugin Simple Custom CSS & JS rồi thì vào mục Custom CSS & JS > Add Custom CSS nhé. Còn bác nào không cài plugin thì thêm code nay vào trong file style.css của child theme hoặc theo đường dẫn: Giao diện > Tuỳ chỉnh > Custom CS nha!

.giuseart-nav {
position: fixed;
right: 13px;
background: #008751;
width: auto;
z-index: 150;
bottom: 100px;
padding: 10px 0;
border: 0px solid #f3002e;
}
.giuseart-nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.giuseart-nav ul li {
list-style: none!important;
}
.giuseart-nav ul>li a {
border: none;
padding: 3px;
display: block;
border-radius: 5px;
text-align: center;
font-size: 10px;
line-height: 15px;
color: #ffffff;
font-weight: 700;
max-width: 72.19px;
max-height: 54px;
text-decoration: none;
}
.giuseart-nav ul>li a i {
margin: auto;
}
.giuseart-nav ul li .button .btn_phone_txt {
position: relative;
top: 35px;
font-size: 10px;
font-weight: bold;
text-transform: none;
}
.giuseart-nav ul>li a i.ticon-messenger {
background: url(https://flatsomea-z.com/wp-content/uploads/2021/08/flatsomeaz-icon-facebook-messenger.png) no-repeat;
background-size: contain;
width: 40px;
height: 40px;
display: block;
}
.giuseart-nav ul>li a i.ticon-zalo-circle2 {
background: url(https://flatsomea-z.com/wp-content/uploads/2021/08/flatsomeaz-icon-zalo.png) no-repeat;
background-size: contain;
width: 40px;
height: 40px;
display: block;
}
.giuseart-nav ul>li a i.ticon-maps {
background: url(https://flatsomea-z.com/wp-content/uploads/2021/08/flatsomeaz-icon-map.png) no-repeat;
background-size: contain;
width: 40px;
height: 40px;
display: block;
}
.giuseart-nav ul>li a i.ticon-heart {
background: url(https://flatsomea-z.com/wp-content/uploads/2021/08/flatsomeaz-icon-youtube.png) no-repeat;
background-size: contain;
width: 40px;
height: 40px;
display: block;
}
.giuseart-nav ul>li a i.ticon-angle-up {
background: url(https://flatsomea-z.com/wp-content/uploads/2021/08/flatsomeaz-icon-top.png) no-repeat;
background-size: contain;
width: 40px;
height: 40px;
display: block;
}

Lưu lại là xong. Kết quả này ^^

Code-thanh-lien-he-website-don-gian
Code-thanh-lien-he-website-don-gian

Chúc các bạn thành công!

Trả lời

Email của bạn sẽ không được hiển thị công khai.