[Hướng dẫn] Tạo chuông thông báo khuyến mãi Flatsome

Tao-chuong-thong-bao-khuyen-mai-flatsome

Bạn đang có 1 hoặc nhiều chương trình ưu đãi và muốn truyền thông các chương trình đó đến với khách hàng truy cập website của bạn. Thường thì bạn có thể truyền thông bằng hình ảnh banner đặt trên trang chủ website hoặc sử dụng popup là chủ yếu.

Tuy nhiên, hôm nay flatsomea-z sẽ hướng dẫn các bạn cách để tạo chuông thông báo khuyến mãi kích thích nhu cầu mua sắm của khách hàng mà không cần cài plugin.

Demo: https://noithatxuong.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 file header.phpstyle.css trong giao diện. Cá nhân mình đánh giá plugin này rất nhẹ, tiện ích 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="mepuzz-suggestion-element-wrapper">
<div class="mepuzz-suggestion-element-button-wrapper pd-left">
<div class="mepuzz-suggestion-element" style="width: 56px; height: 56px;">
<a id="mp-notification-button-open">
<a href="https://flatsomea-z.com"><img class="mepuzz-suggestion-element-button-img" src="https://sdk.pushdi.com/image/ico/ring-01.png"></a>
</a>
<span class="mepuzz-suggestion-element-button-count" style="top: 8px; right: 9px; font-size: 12px;">3</span>
</div>
<div class="mepuzz-suggestion-tooltip">KHUYẾN MẠI HÔM NAY</div>
</div>
</div></div>

Nhớ thay link trang khuyến mãi của bạn vào chỗ [a href =”….”] 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 dưới thẻ mở body trong header.php (Giao diện > Chỉnh sửa > header.php) nha!

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!

.mepuzz-suggestion-footer {
line-height: 1.23 !important;
text-align: center;
padding: 5px 0 7px 0 !important;
}
.mepuzz-suggestion-element-wrapper {
position: fixed;
left: 17px;
bottom: 80px;
display: block;
z-index: 99999;
}
.mepuzz-suggestion-element-button-wrapper {
bottom: 0;
display: flex;
background: none !important;
left: 0;
}
.mepuzz-suggestion-element {
width: 70px;
height: 70px;
border-radius: 50% !important;
position: relative;
cursor: pointer;
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.45);
animation: uptocallmini_offline 2s 0s ease-out infinite;
}
.mepuzz-suggestion-element:hover~.mepuzz-suggestion-tooltip {
opacity: 1;
visibility: unset;
}
.mepuzz-suggestion-element-button-img {
display: block;
margin: 0 auto;
width: 100%;
height: 100%;
opacity: 1;
}
.mepuzz-suggestion-element-button-count {
color: #ffffff;
background: none !important;
position: absolute;
top: 10px;
right: 10px;
line-height: 0 !important;
font-size: 15px;
font-weight: bold;
text-align: center;
border-radius: 100% !important;
}
.mepuzz-suggestion-tooltip {
position: relative;
color: #ffffff;
background: #243876;
visibility: hidden;
opacity: 0;
margin: auto 0 auto 10px;
transition: opacity .5s;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 400 !important;
padding: 8px;
border-radius: 4px;
text-align: center;
white-space: nowrap;
}
.mepuzz-suggestion-tooltip::after {
border-color: transparent #243876 transparent transparent;
right: 100%;
content: "";
position: absolute;
top: 50%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
}
@keyframes uptocallmini_offline {
0% {
box-shadow: 0 0 0px 0px rgba(41, 157, 218, 0.5);
}
75% {
box-shadow: 0 0 0px 20px rgba(41, 157, 218, 0);
}
100% {
box-shadow: 0 0 0px 0px rgba(41, 157, 218, 0);
}
}

Nếu không cài plugin thì thêm code này vào file style.css (Giao diện > Chỉnh sửa > Child theme > Style.css) hoặc Giao diện > Tuỳ biến > Add CSS nha!

Vậy là xong. Thử quay lại trang chủ xoá cache đi và xem thành quả nhé ^^

Tao-chuong-thong-bao-khuyen-mai-flatsome
Tao-chuong-thong-bao-khuyen-mai-flatsome

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.