Nội dung
Mình tham khảo một số website đẹp trên mạng, thấy họ có mấy nút liên hệ nhanh tuyệt vời quá nên mình tổng hợp và cóp nhặt về để làm cho website của mình. Kết quả là thật đáng tự hào, code HTML và CSS khá đơn giản nhưng cực kỳ hữu ích.
Nút liên hệ 3 nút Zalo – Messenger – Tổng Số Comment
Hiện thị Lightbox comment Zalo – Khi lick vào sẽ có 1 Box Comment của Zalo hiện thị , sẽ hiẹn thị comment theo từng ID bài đăng nhé
Chát messenger – Trực tiếp vào messenger để chát với Mình
Hiện thị Tổng Số Comment trên trang , có link trọ tới comment để có thể Bình luận trên mỗi bài đăng.
<div class="tg_contact_fixed_2021">
<ul>
<li class="zalo-cm">
<a href="#zalo1"><img src="https://wpvn.xyz/wp-content/uploads/2021/10/zalo.png"></a>
<script src="https://sp.zalo.me/plugins/sdk.js"></script>
<div class="zalo-comment-plugin" data-appid="2646601289461634641" data-size="5" data-href=""></div>
</li>
<li>
<a href="http://m.me/100001876557849" data-toggle="tooltip" data-html="true" target="_blank" data-placement="left" title="" data-original-title="Messenger">
<img src="https://wpvn.xyz/wp-content/uploads/2021/10/mess.png"></a>
</li>
<li>
<a href="#comments" data-toggle="tooltip" data-html="true" class="chatwithus" id="livechat" data-placement="left" title="" data-original-title="Bình Luận bài đăng"><span>
[wpb_total_comments]</span>
<img src="https://wpvn.xyz/wp-content/uploads/2021/10/contac.png">
</a></li>
</ul>
</div>
<style>
.tg_contact_fixed_2021 {
position: fixed;
z-index: 999;
right: 25px !important;
bottom: 80px !important;
}
.tg_contact_fixed_2021 ul li {
margin: 0 0 10px 0;
position: relative;
list-style: none;
}
.tg_contact_fixed_2021 ul li a {
width: 55px;
height: 55px;
background: #22aef9;
color: #fff;
display: table;
text-align: center;
line-height: 53px;
cursor: pointer;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tg_contact_fixed_2021 a.chatwithus span {
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 20px;
background: #ff0700;
color: #fff;
border-radius: 50%;
text-align: center;
line-height: 15px;
font-size: 11px;
padding: 3px;
}
</style>Tạo 1 Short có tên là [ wpb_total_comments] bằng cách thêm code sau vào function.php hoặc trong wp-extra
// Đếm số commem trong bài
function wpb_comment_count() {
$comments_count = wp_count_comments();
$message = ' '. $comments_count->approved . ' ';
return $message;
}
add_shortcode('wpb_total_comments','wpb_comment_count');
add_filter('widget_text','do_shortcode');Tiếp theo chèn comment bằng zalo vào data-appid=”2646601289461634641″
Để tạo tài khoản Zalo Official bạn truy cập vào địa chỉ http://developers.zalo.me tiếp theo chọn Ứng dụng của tôi > Thêm mới ứng dụng.
Tiếp theo Truy cập Tài liệu bằng link sau https://developers.zalo.me/docs/social/zalo-comment-widget
Lấy mã Zalo bình luận
Thay số: ID Zalo của bạn vào.
Code tạo nút liên hệ nhanh bằng HTML và CSS cho website
Theme Flatsome
Bước 1: Truy cập vị trí cần dán code
Trên thanh đen đen trên cùng có chữ Flatsome – Advanced – Global Setting – Footer Script
Bước 2: Cắt dán đoạn code cần thiết
Các bạn copy và paste toàn bộ đoạn code dưới đây vào Footer Script
Menu 5 nút (Chỉ đường, Zalo, Messenger, Gọi điện, Nhắn tin) + Desktop
<style>
.phone-mobile {display: none;}
.giuseart-nav {
position: fixed;
left: 13px;
background: #fff;
border-radius: 5px;
width: auto;
z-index: 150;
bottom: 50px;
padding: 10px 0;
border: 1px solid #f2f2f2;
}
.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: #515151;
font-weight: 700;
max-width: 72.19px;
max-height: 54px;
text-decoration: none;
}
.giuseart-nav ul>li .chat_animation{display:none}
.giuseart-nav ul>li a i.ticon-heart {
background: url(http://fashion3.ninhbinhweb.biz/wp-content/uploads/2020/03/icon-map.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}
.giuseart-nav ul>li a i.ticon-zalo-circle2 {
background: url(http://fashion3.ninhbinhweb.biz/wp-content/uploads/2020/03/icon-zalo-circle2.png.pagespeed.ce_.iUc59tfITH.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}.giuseart-nav li .button {
background: transparent;
}.giuseart-nav ul>li a i.ticon-angle-up {
background: url(http://fashion3.ninhbinhweb.biz/wp-content/uploads/2020/03/icon-angle-up.png.pagespeed.ce_.NGU5VowWiC.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}.giuseart-nav ul>li a i {
width: 33px;
height: 33px;
display: block;
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 .button .phone_animation i {
display: inline-block;
width: 27px;
font-size: 26px;
margin-top: 12px;
}.giuseart-nav ul>li a.chat_animation svg {
margin: -13px 0 -20px;
}
.giuseart-nav ul>li a i.ticon-messenger {
background: url(http://fashion3.ninhbinhweb.biz/wp-content/uploads/2020/03/icon-messenger.png.pagespeed.ce_.sSebhnGGgP.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}.giuseart-nav ul li .button .phone_animation i {
display: inline-block;
width: 27px;
font-size: 26px;
margin-top: 12px;
}
.giuseart-nav ul>li a i.ticon-chat-sms {
background: url(http://fashion3.ninhbinhweb.biz/wp-content/uploads/2020/03/icon-sms-1.jpg) no-repeat;
background-size: contain;
width: 38px;
height: 36px;
display: block;
}
.giuseart-nav ul>li a i.icon-phone-w {
background: url(http://fashion3.ninhbinhweb.biz/wp-content/uploads/2020/03/icon-phone-w.png) no-repeat;
background-size: contain;}
.giuseart-nav ul li .button .btn_phone_txt {
position: relative;
}
@media only screen and (max-width: 600px){
.giuseart-nav li .chat_animation{display:block !Important}
.giuseart-nav li .button .phone_animation {box-shadow: none;
position: absolute;
top: -16px;
left: 50%;
transform: translate(-50%,0);
width: 50px;
height: 50px;
border-radius: 100%;
background: #6cb917;
line-height: 15px;
border: 2px solid white;
}
.giuseart-nav ul>li a{padding:0; margin:0 auto}
.giuseart-nav {
background: white;
width: 100%; border-radius:0;
color: #fff;
height: 60px;
line-height: 50px;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
padding: 5px;
margin: 0;
box-shadow: 0 4px 10px 0 #000;
}
.giuseart-nav li {
float: left;
width: 20%;
list-style: none;
height: 50px;
}
.phone-mobile{display:block !important}}
</style>
<div class="giuseart-nav">
<ul>
<li><a href="https://www.google.com/maps/place/GiuseArt+-+Thi%E1%BA%BFt+k%E1%BA%BF+%C4%91%E1%BB%93+h%E1%BB%8Da+v%C3%A0+website+chuy%C3%AAn+nghi%E1%BB%87p/@20.3534004,105.894187,17z/data=!3m1!4b1!4m5!3m4!1s0x3135acc6066cb537:0x4fc1c256d7cdb4d!8m2!3d20.3533954!4d105.8963757" rel="nofollow" target="_blank"><i class="ticon-heart"></i>Tìm đường</a></li>
<li><a href="https://zalo.me/0972939830" rel="nofollow" target="_blank"><i class="ticon-zalo-circle2"></i>Chat Zalo</a></li>
<li class="phone-mobile">
<a href="tel:0972939830" rel="nofollow" class="button">
<span class="phone_animation animation-shadow">
<i class="icon-phone-w" aria-hidden="true"></i>
</span>
<span class="btn_phone_txt">Gọi điện</span>
</a>
</li>
<li><a href="https://www.messenger.com/t/joseph.thien.75" rel="nofollow" target="_blank"><i class="ticon-messenger"></i>Messenger</a></li>
<li><a href="sms:0972939830" class="chat_animation">
<i class="ticon-chat-sms" aria-hidden="true" title="Nhắn tin sms"></i>
Nhắn tin SMS</a>
</li>
<li class="to-top-pc">
<a href="#" rel="nofollow">
<i class="ticon-angle-up" aria-hidden="true" title="Quay lên trên"></i>
</a>
</li>
</ul>
</div>Thanh liên hệ nhanh gồm nút Gọi điện, Nhắn tin, Chat Zalo và Chat Messenger
<style>
.bottom-contact{display:none}
@media (max-width: 767px) {
.bottom-contact{display: block;
position: fixed;
bottom: 0;
background: white;
width: 100%;
z-index: 99;
box-shadow: 2px 1px 9px #dedede;
border-top: 1px solid #eaeaea;}
.bottom-contact ul li{width: 25%;
float: left;
list-style: none;
text-align: center; font-size:13.5px;}
.bottom-contact ul li span{color:black}
.bottom-contact ul li img{ width: 35px;
margin-top: 10px;
margin-bottom: 0px;}
}
</style>
<div class="bottom-contact">
<ul>
<li>
<a id="goidien" href="tel:xxxx">
<img src="duong-link-icon-goi-dien"/>
<br>
<span>Gọi điện</span>
</a>
</li>
<li>
<a id="nhantin" href="sms:xxxx">
<img src="duong-link-icon-nhan-tin-sms"/>
<br>
<span>Nhắn tin</span>
</a>
</li>
<li>
<a id="chatzalo" href="https://zalo.me/xxxx">
<img src="duong-link-icon-zalo-chat"/>
<br>
<span>Chat Zalo</span>
</a>
</li>
<li>
<a id="chatfb" href="https://m.me/yyyy">
<img src="duong-link-icon-nhan-tin-messenger"/>
<br>
<span>Messenger</span>
</a>
</li>
</ul>
</div>Contact bar bên trái mobile – 2 nút Gọi điện + chat Messenger
<style>
.mobile-hotline{display:none}
.hotline {position: fixed;
left: 10px;
bottom: 10px;
z-index: 9000;
display: block;
background: #fac100;
color: red;
padding-top: 5px;padding-bottom:5px; padding-left:12px; padding-right: 12px;
border-radius: 99px;}
.hotline .hotline-number{font-size:20px; color: #b20000; font-weight: bold}
@media (max-width: 767px) {
.hotline{
display :none;
}
.mobile-hotline{display: block; bottom: 0; width: 100%; background:rgba(0,0,0,0.5); height: 60px; position: fixed; z-index:9999999}
.mobile-hotline .mobile-hotline-left{width: 45%; float: left; text-align: center; background: #00a502; margin-left: 10px; margin-right:5px; margin-top: 7px; height: 45px; border-radius: 4px}
.mobile-hotline .mobile-hotline-left a{color: white; line-height: 46px; font-size:16px; font-weight: bold}
.mobile-hotline .mobile-hotline-right{width: 45%; float: right; text-align: center; background: #fac100; margin-left: 5px; margin-right: 10px; margin-top: 7px; height: 45px; border-radius: 4px}
.mobile-hotline .mobile-hotline-right a{color: red; line-height: 46px; font-size: 16px; font-weight: bold}
}
</style>
<a href="tel:+84972939830"><div class="hotline">
<span class="before-hotline">Hotline:</span>
<span class="hotline-number">0972.939.830</span>
</div></a>
<div class="mobile-hotline">
<div class="mobile-hotline-left">
<a href="http://www.messenger.com/t/joseph.thien.75" target="blank">Chat Facebook</a>
</div>
<div class="mobile-hotline-right"><a href="tel:+84972939830" target="blank">Gọi điện ngay</a></div>
</div>Contact bar mobile – 2 nút Gọi ngay + chat Zalo hoặc Messenger
<style>
.hotline-footer{display:none}
@media (max-width: 767px) {
.hotline-footer{display:block; position:fixed; bottom:0; width:100%; height:50px; z-index:99; background:rgba(0,0,0,0.6)}
.hotline-footer .left{ width: 65%;
float: left;
height: 100%;
color: white;
line-height: 43px;
text-align: center;}
.hotline-footer .right{ width: 35%;
float: right;
height: 100%;
line-height: 43px;
text-align: center;}.absolute-footer{font-size:13px}
.blog-single .large-9, .blog-single .large-3{ flex-basis: 100%;
max-width: 100%;}.blog-single .large-3{padding-left:15px; font-size:15px}
.blog-single .large-3 .widget-area .section4{display:none}.tin-tuc-section .cot1-2{display:none}.hotline-footer a{color:white}
.hotline-footer a{display:block;}.hotline-footer .left a{ background: #0082d0;
line-height: 40px;
margin: 5px;
border-radius: 3px;}.hotline-footer .right a{background: #3fb801;
line-height: 40px;
margin: 5px;
border-radius: 3px;}
.hotline-footer .left img, .hotline-footer .right img{width:30px; padding-right: 10px;}}
</style><div class="hotline-footer">
<div class="left">
<a href="https://messenger.com/t/joseph.thien.75" ><img src="/wp-content/uploads/2018/09/icon.png"/>Chat với tư vấn viên</a>
</div>
<div class="right">
<a href="tel:0972939830"><img src="/wp-content/uploads/2018/09/phone-icon.png"/>Gọi ngay</a>
</div>
<div class="clearboth"></div>
</div>Contact bar mobile – 3 nút Gọi ngay + Mua hàng + Xem chia sẻ
<style>
.hotline-footer{display:none}
@media (max-width: 767px) {
.hotline-footer{display:inline-block; position:fixed; bottom:0; height:45px; width:100%; z-index:999}
.hotline-footer .left{float:left; width:33.33%; background:#d60000; text-align:center; height:100%}
.hotline-footer .middle{float:left; width:33.33%; background:#11ad11; text-align:center; height:100%}
.hotline-footer .right{float:right; width:33.33%;background:#f38800; text-align:center; height:100%}
.hotline-footer .clearboth{clear:both}
.hotline-footer .right a, .hotline-footer .left a, .hotline-footer .middle a{line-height: 42px;
font-size: 13px;color:white}
.hotline-footer img{width:20px; padding-right:4px}}
</style>
<div class="hotline-footer">
<div class="left">
<a href="tel:0972939830" ><img src="/wp-content/uploads/2018/09/phone-icon.png"/>Gọi tư vấn</a>
</div>
<div class="middle">
<a href="/khach-hang-chia-se/" ><img src="/wp-content/uploads/2018/09/icon.png"/>Đọc chia sẻ</a>
</div>
<div class="right">
<a href="#dat-mua"><img src="/wp-content/uploads/2018/09/phone-icon.png"/>Đặt mua</a>
</div>
<div class="clearboth"></div>
</div>Menu 3 nút (Messenger, Zalo, Hotline)
<style>
.giuseart-mobile-contact-bar{
display:none
}
.giuseart-pc-contact-bar{
left: 30px;
bottom: 30px;
position: fixed;
z-index: 998;
margin-bottom:0
}
.giuseart-pc-contact-bar li{
width: 44px;
height: 46px;
overflow: hidden;
margin-bottom: 0;
list-style: none;
}
.giuseart-pc-contact-bar li.facebook{
margin-bottom: 8px;
background: url(https://giuseart.com/wp-content/uploads/2020/03/fb.png);
background-repeat: no-repeat;
}
.giuseart-pc-contact-bar li.zalo{
background: url(https://giuseart.com/wp-content/uploads/2020/03/zl.png); background-repeat: no-repeat;
}
.giuseart-pc-contact-bar li a{
display: block;
width: 44px;
height: 44px;
}
@media only screen and (max-width: 499px) {
.giuseart-pc-contact-bar{
display:none
}
.giuseart-mobile-contact-bar{
left: 10px;
bottom: 10px;
position: fixed;
z-index: 998;
margin-bottom:0;
display:block !Important
}
.giuseart-mobile-contact-bar li{
display:inline-block;
float:left;
margin-right:7px;
list-style:none
}
.giuseart-mobile-contact-bar li.facebook{
margin-bottom: 8px;
background: url(https://giuseart.com/wp-content/uploads/2020/03/fb.png);
background-repeat: no-repeat;
}
.giuseart-mobile-contact-bar li.zalo{
background: url(https://giuseart.com/wp-content/uploads/2020/03/zl.png); background-repeat: no-repeat;
}
.giuseart-mobile-contact-bar li a{
display: block;
width: 44px;
height: 44px;}
.giuseart-mobile-contact-bar li.hotline {
background: url(https://giuseart.com/wp-content/uploads/2020/03/p2.gif);
background-repeat: no-repeat;
background-size: 44px;
}
}
</style>
<ul class="giuseart-pc-contact-bar">
<li class="facebook">
<a href="https://m.me/fb" target="_blank" rel="nofollow"></a>
</li>
<li class="zalo">
<a href="https://zalo.me/sdtzalo" target="_blank" rel="nofollow"></a>
</li>
</ul>
<ul class="giuseart-mobile-contact-bar">
<li class="facebook">
<a href="https://m.me/fb" target="_blank" rel="nofollow"></a>
</li>
<li class="zalo">
<a href="https://zalo.me/sdtzalo" target="_blank" rel="nofollow"></a>
</li>
<li class="hotline">
<a href="tel:sdt" target="_blank" rel="nofollow"></a>
</li>
</ul>liên hệ all in one phiên bản có yêu cầu gọi lại
Một số lưu ý trước khi làm theo:
- Các bạn cài giúp mình plugin contact form 7, vì mình sử dụng plugin này để nhận dữ liệu đổ về.
- Font trong demo mình dùng là FontAwsome 5.9 vì vậy các bạn nên import font này vào trước nhé.
- Các bạn copy và dán code vào vị trí mà mình mong muốn, có 2 cách 1 là dùng hook để hook vào footer, 2 là các bạn copy và dán vào footer.
Bạn nào chưa biết cách chèn font awsome thì làm theo code này (Cách này không khuyến khích, theo mình nên tải bộ font về, nhưng cách này nhanh^^)
function add_font3(){
echo '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" />';
}
add_action('wp_head','add_font3');Đối với button này sẽ chia làm 3 phần HTML, CSS và JS các bạn pass nó vào các mục tương ứng nhé.
Phần HTML của button all in one phiên bản yêu cầu gọi lại.
Đầu tiên tạo 1 cái form contact form 7 với 1 input là số điện thoại và submit thôi nhé. Hoặc các bạn có thể copy đoạn này vào form của mình
<div class="flex-custom">
[tel* tel-521 class:sdt-pt placeholder "Yêu cầu gọi lại"]
[submit class:button primary "Gửi"]
</div>Phần HTML này vì mình có sử dụng PHP nữa nên mình sẽ hook nó vào footer lun.
Lưu ý dòng số 6, bạn sửa lại bằng form của mình nhé.
function lh_all_in_one_pttuan(){;?>
<div id="main-div">
<div id="main-button" class="wave">
<i class="fas fa-comments"></i>
</div>
<div class="btn-call"><i class="fas fa-phone-alt"></i><?php echo do_shortcode('Lỗi: Không tìm thấy biểu mẫu liên hệ.
');?></div>
<a href="#" class="whatsapp-custom"><i class="fab fa-whatsapp"></i></a>
<a href="#" class="messenger-custom"><i class="fab fa-facebook-messenger"></i></a>
<a href="#" class="zalo-custom"><i class="zalo-pt"></i></a>
</div>
<?php };
add_action('wp_footer','lh_all_in_one_pttuan');Phần CSS này các bạn paste nó vào file style.css hoặc vị trí CSS theme
<style>
.wpcf7-form-control.sdt-pt{
width:150px;
}
.flex-custom{
display:flex;
}
.zalo-pt{
background: url(https://pttuan410.com/wp-content/uploads/2021/05/zalo.png) center center no-repeat;
background-size: contain;
border-radius: 100%;
height:30px;
width:30px;
}
#main-div {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 0;
}
#main-button {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0;
bottom: 0;
height: 70px;
width: 70px;
font-size: 30px;
color: #0064f3;
cursor: pointer;
background-color: #fff;
box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
#main-button ~ .btn-call {
display: flex;
padding: 10px;
visibility: hidden;
font-weight: 600;
height: 55px;
color: #fff;
background: linear-gradient(90deg, #00a1f5, #0064f3);
box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
border: 0;
position: absolute;
z-index: -1;
right: 0;
bottom: 0;
opacity: 0;
white-space: nowrap;
cursor: pointer;
transition: .2s all linear;
-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-ms-transition: .2s all linear;
-o-transition: .2s all linear;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.btn-call .fas{
font-size: 22px;
margin: auto 10px;
}
#main-button.open ~ .btn-call {
visibility: visible;
right: 85px;
opacity: 1;
transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
-webkit-transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
-moz-transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
-ms-transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
-o-transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
}
#main-button ~ a {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
height: 60px;
width: 60px;
font-size: 30px;
opacity: 0;
text-decoration: none;
color: #fff;
background-color: #fff;
box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
transition: .2s all linear;
-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-ms-transition: .2s all linear;
-o-transition: .2s all linear;
}
#main-button ~ .zalo-custom {
background: linear-gradient(0deg, #017AB1, #01ABE6);
}
#main-button ~ .whatsapp-custom {
background: linear-gradient(0deg, #00B100, #09db09);
}
#main-button ~ .messenger-custom {
background: linear-gradient(0deg, #0078FF, #00C6FF);
}
#main-button.open ~ a {
opacity: 1;
transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
-webkit-transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
-moz-transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
-ms-transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
-o-transition: .4s all cubic-bezier(0, 0.01, 0, 1.27);
}
#main-button.open ~ a:nth-of-type(1) {
bottom: 80px;
}
#main-button.open ~ a:nth-of-type(2) {
bottom: 160px;
}
#main-button.open ~ a:nth-of-type(3) {
bottom: 240px;
}
.wave {
animation-name: wave;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes wave {
0% {box-shadow: 0 0 0px 0px rgba(255, 255, 255, 0.5);}
100% {box-shadow: 0 0 0px 10px rgba(255, 255, 255, 0);}
}
.open {
animation-iteration-count: 1;
}
.wpcf7-response-output{
position: absolute;
top: -75px;
right: -35px;
}
</style>để trong mượt hơn, các bạn thêm phần JS này nhé.
Thêm JQUERY
<script>
jQuery(document).ready(function ($) {
var mainDiv = jQuery('#main-button');
mainDiv.on('click', function($){
jQuery(this).find('i').toggleClass('fa-times');
jQuery(this).toggleClass('open');
});
});
</script>Nút Thêm vào giỏ hàng + Tư vấn
copy đoạn code dưới đây vào file function
function footerfixed(){
ob_start();
if(wp_is_mobile() && is_product()){;?>
<div class="footer-fixed">
<div class="col1">
<a href="#linkchatfb">
<i class="fab fa-facebook-messenger"></i>
<span>Tư vấn</span>
</a>
</div>
<div class="col2">
<a id="addtocart" href="#">
<i class="fa fa-cart-plus" aria-hidden="true"></i>
<span> Mua ngay</span>
</a>
</div>
</div>
<?php };?>
<?php $list_post = ob_get_contents();
ob_end_clean();
return $list_post;
}
add_shortcode('footerfixed','footerfixed');
function script_menu_footer_pttuan(){;?>
<script>
jQuery(document).ready(function ($) {
var id = $('.single_add_to_cart_button').val();
$('#addtocart').attr("href", "?add-to-cart="+id);
});
</script>
<?php };
add_action('wp_footer','script_menu_footer_pttuan');cuối cùng là css
.footer-fixed {
display: flex;
position: fixed;
width: 100%;
left: 0;
bottom: 0;
z-index: 10;
border-top: 1px solid #e5e5e5;
text-transform: uppercase;
}
.footer-fixed .col1 {
background: #ffad00;
}
.footer-fixed div {
text-align: center;
width: 50%;
padding: 10px 0;
}
.footer-fixed .col2 {
background: #62862b;
}
.footer-fixed div span {
margin-left: 10px;
}Để có thể sử dụng được thì các bạn copy short code [footerfixed] và dán vào footer của website nhé.
Button chạy dọc website
Và ngay sau đây, sẽ là bài hướng dẫn chi tiết để các bạn ai cũng đều có thể thực hiện được.
Bước 1: Các bạn chọn UX Blocks -> Thêm mới -> Đặt tiêu đề bất kỳ & dán đoạn html bên dưới vào -> Chọn “Edit With UX Builder”
Bước 2: Tại trình UX Builder các bạn sẽ thấy element Stack được tạo tương tự như bên dưới. Tại đây, các bạn click chọn từng phần tử “text” -> Chọn “Open Text Editor” -> Xóa toàn bộ văn bản và hình ảnh có sẵn, thay thế lại thành nội dung & hình ảnh của các bạn, và chèn thêm link liên kết nếu cần. Sau đó update để lưu lại (khuyến nghị dùng ảnh trắng, nền trong).
Bước 3: Các bạn coppy đoạn CSS ở dưới, dán vào mục “CSS tùy chỉnh” trong “Tùy biến” hoặc mục “Custom CSS” trong “Advance” của theme Flatsome.
.demo-wrapper{width: 70px;
overflow: hidden;
color: #FFF;
text-align: center;
padding: 0;
margin: 0;
position: fixed;
right: 5px;
top: 45%;
z-index: 25;
}
.demo-button {
display: block;
transition: all .3s;
-webkit-transition: all .3s;
background-color: rgba(0,0,0,.4);
text-align: center;
padding: 5px;
border-radius: 3px;
}
.demo-button p {
margin-bottom: 0;
color: #FFF;
font-weight: bolder;
font-size: 13px;
line-height: 1.3;
text-transform: uppercase;
}
.demo-button:hover {
background-color: #0073aa!important; /*Mã màu nền khi rê chuột*/ transform: translateX(0);
}Bước sau cùng, tùy thuộc vào việc bạn muốn menu button này xuất hiện ở một bài viết cụ thể, hoặc tất cả bài viết, hoặc toàn bộ trang web mà thực hiện như sau:
- Xuất hiện ở toàn bộ trang web: Các bạn copy lại đoạn Shortcode của Block đã tạo ở bước 1 -> Trong Flatsome, Chọn “advance” -> Dán đoạn Shortcode vào khung “FOOTER SCRIPTS” & lưu lại.
- Menu button xuất hiện ở toàn bộ bài viết: Các bạn cũng copy đoạn Shortcode của Block lại, Chọn “Tùy biến” -> “Blog” -> “Blog Single Post” -> Kéo xuống dưới cùng & dán Shortcode vào mục “HTML after blog posts“.
- Xuất hiện ở bài viết cụ thể: Tại bài viết đó, các bạn chọn “Add elements” -> Chọn “Block” -> Tại danh mục blocks có sẵn, các bạn chọn block đã tạo ở bước 1, và update.
Xong cuôi các bạn refresh lại trang để xem thành quả.
Nguồn: giuseart và pttuan410
Bài viết liên quan: