[Hướng dẫn] Tạo thanh liên hệ rung lắc cực đẹp dưới footer Flatsome

tao-thanh-bar-lien-he-flatsome-04

Thanh liên hệ trên website là một yếu tố không thể thiếu đối với bất kỳ blogger hay nhà bán hàng nào bởi nó là công cụ giúp khách hàng, độc giả có thể dễ dàng kết nối với bạn một cách nhanh nhất.

Có rất nhiều cách để tạo 1 thanh liên hệ cho website như sử dụng plugin hoặc những đoạn code được chia sẻ trên mạng. Tuy nhiên, hôm nay flatsomea-z sẽ hướng dẫn các bạn cách tạo thanh liên hệ rung lắc cực đẹp dưới footer Flatsome

Demo: https://mslanenglish.edu.vn/

Bước 1: Cài đặt Plugin Simple Custom CSS And JS

Đây là plugin giúp bạn có thể dễ dàng thêm HTML hay CSS và JS mà không cần can thiệp vào chỉnh sửa giao diện. Cá nhân mình đánh giá plugin này rất hay và dễ sử dụng. Các bạn hãy cài đặt và kích hoạt plugin này nhé.

Plugin simple custom css and js
Plugin simple custom css and js

Nếu bạn nào không thích dùng plugin thì chuyển luôn sang bước 2 nhé!

Bước 2: Tạo HTML cho thanh bar

Sau khi cài đặt và kích hoạt xong plugin ở trên. Các bạn vào tìm mục có tên Custom CSS & JS -> Add Custom HTML. Xoá hết dữ liệu trong ô nhập nội dung đi, copy và paste đoạn code sau vào rồi lưu lại nha!

<div class="mmt-app">
<div style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgb(142, 32, 32); opacity: 1; color: rgb(255, 255, 255); pointer-events: none; z-index: -1;">
</div>
<span class="mmt-menu__item" style="display: flex;">
<div class="mt-tooltip">
<span class="mmt-button call">
<span>
</span>
<a href="tel:0394321444"><img alt="url" src="https://media.metu.vn/fillcolor?url=https%3A%2F%2Fmedia.metu.vn%2Fimages%2Ficon_call_01.svg&color=%23ffd001" class="mmt-button__icon mmt-button__icon--motion">
<span class="mmt-button__label" style="color: rgb(255, 255, 255);">Hotline</span>
</span></a>
</div>
</span>
<span class="mmt-menu__item" style="display: flex;">
<div class="mt-tooltip">
<span class="mmt-button facebook"><span>
</span>
<a href="http://m.me/miootech.tech"><img alt="url" src="https://media.metu.vn/fillcolor?url=https%3A%2F%2Fmedia.metu.vn%2Fimages%2Ficon_facebook_01.svg&color=%23ffd001" class="mmt-button__icon mmt-button__icon--motion">
<span class="mmt-button__label" style="color: rgb(255, 255, 255);">Facebook</span></a>
</span>
</div>
</span>
<span class="mmt-menu__item" style="display: flex;">
<div class="mt-tooltip">
<span class="mmt-button zalo">
<span>
</span>
<a href="https://zalo.me/0394321444"><img alt="url" src="https://media.metu.vn/fillcolor?url=https%3A%2F%2Fmedia.metu.vn%2Fimages%2Ficon_zalo_01.svg&color=%23ffd001" class="mmt-button__icon mmt-button__icon--motion">
<span class="mmt-button__label" style="color: rgb(255, 255, 255);">Zalo</span></a>
</span>
</div>
</span>
<span class="mmt-menu__item" style="display: flex;">
<span class="mmt-button contact">
<span>
</span>
<a href="#"><img alt="url" src="https://media.metu.vn/fillcolor?url=https%3A%2F%2Fmedia.metu.vn%2Fimages%2Ficon_contact_01.svg&color=%23ffd001" class="mmt-button__icon">
<span class="mmt-button__label" style="color: rgb(255, 255, 255);">Chat Trực Tiếp </span></a>
</span>
</span>
</div>

Thay số điện thoại và đường link Fanpage của bạn vào nhé ^^

Trường hợp các bạn không muốn cài plugin ở bước 1 thì copy và paste đoạn code này vào ngay đoạn mở thẻ body trong header.php (Giao diện > Chỉnh sửa > header.php) nha!

tao-thanh-bar-lien-he-flatsome-01
tao-thanh-bar-lien-he-flatsome-01

Bước 3: Tạo CSS cho thanh bar

Các bạn vào tìm mục có tên Custom CSS & JS -> Add Custom CSS. Xoá hết dữ liệu trong ô nhập nội dung đi, copy và paste đoạn code sau vào rồi lưu lại nha!

.mmt-container--fit .mmt-app,.mmt-app {
display:none;
}
@media (max-width: 767px) {
.mmt-container--fit .mmt-app {
display: inline-flex;
border-radius: 4px 4px 0 0;
overflow: hidden;
}
.mmt-app {
position: fixed;
display: flex;
justify-content: center;
box-sizing: border-box;
min-height: 56px;
transition: all .24s;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
bottom:0;
z-index:999;
width:100%;
}
.mmt-menu__item {
pointer-events: auto;
}
.mt-tooltip {
display: inline-flex;
position: relative;
justify-content: center;
align-items: center;
}
.mmt-button {
background-color: hsla(0,0%,100%,.2);
}
.mmt-button {
display: flex;
align-items: center;
align-self: stretch;
padding: 0 10px;
flex-direction: row;
cursor: pointer;
position: relative;
justify-content: flex-start;
border-radius: 3px;
height: 40px;
margin: 10px 5px;
}
.mmt-button__icon--motion {
animation: tada 1.2s infinite;
}
.mmt-button__icon {
width: 20px;
height: 20px;
margin-right: 3px;
box-sizing: border-box;
}
.mmt-container--fit .mmt-button__label {
white-space: nowrap;
}
.mmt-button__label {
font-size: 9px;
line-height: 20px;
}
.mmt-button__icon--motion {
animation: tada 1.2s infinite;
}
@keyframes tada {
0% {transform: scale(1);} 
10%, 20% {transform: scale(0.9) rotate(-3deg);} 
30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} 
40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} 
100% {transform: scale(1) rotate(0);} 
}
}

Vậy là xong. Thử quay lại trang chủ xoá cache đi và xem thành quả nhé ^^. Mình chỉ cho hiển thị ở mobile, nếu bạn nào muốn hiển thị ở cả deskop thì xoá đoạn CSS này đi nhé

.mmt-container--fit .mmt-app,.mmt-app {
display:none;
}
tao-thanh-bar-lien-he-flatsome-02
tao-thanh-bar-lien-he-flatsome-02
tao-thanh-bar-lien-he-flatsome
tao-thanh-bar-lien-he-flatsome

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

2 thoughts on “[Hướng dẫn] Tạo thanh liên hệ rung lắc cực đẹp dưới footer Flatsome

Trả lời

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