Dễ làm & bản mới – Nút liên hệ tối ưu trải nghiệm người dùng cho Website WordPress

Huong Dan Them Nut Lien Dep Cho Website Wordpress

Nhiều bạn hiện dang tự thiết kế Website để viết blog hoặc kinh doanh nhưng chưa biết cách thêm nút liên hệ vào Website. Vì thế, trong bài viết này Liêm sẽ hướng dẫn bạn thêm nút liên hệ vào website nhanh và dễ nhất.

Bước 1: Tải Icon liên hệ theo ý bạn

Để có thể thêm nút liên hệ vào Website, thì trước tiên các bạn hãy tìm cho mình bộ icon phù hợp để bỏ vào Website. Ở đây, Liêm xin phép đề xuất trang Flaticon chuyên cung cấp các tập SVG đẹp, các bạn có thể truy cập và tham khảo những mẫu Icon phù hợp và bỏ vào Website nhé.

Tuy nhiên, hiện tại Flaticon chỉ cho tải file SVG khi đã có tài khoản Premium. Vì thế, hãy xem bài viết hướng dẫn tải SVG từ Flaticon miễn phí để tải file SVG nhé bạn.

Hoặc các bạn cũng thể tải bộ icon sẵn có của Liêm tại đây nhé.

Xem thêm: Hướng dẫn chèn thanh liên hệ tự co giãn cho Website tuyệt đẹp – Phần cũ

Bước 2: Copy đoạn mã

Tiếp theo, các bạn hãy copy lần lượt hai đoạn mã sau nhé.

Mã 1: bỏ vào trong Footer của Website

<div class="pd-widget-list pd-bottom-right pd-round" style="position: fixed; z-index: 999; right: 28px; bottom: 268px;">
<div class="pd-bar">
<a href="tel:0906733994">
<div class="pushdy-widget-button pd-tel" style="height: 48px;width: 48px;background-image: url(/wp-content/uploads/2022/04/icon-phone-s2.svg);">
<span class="pd-label pd-tel pd-tooltip-text" style="color: rgb(255, 255, 255);background: rgb(20, 53, 195);">Hotline</span>
</div>
</a>

<a href="https://zalo.me/0906733994">
<div class="pushdy-widget-button pd-mail" style="height: 48px; width: 48px; background-image: url(/wp-content/uploads/2022/04/zalo.svg);">
<span class="pd-label pd-mail pd-tooltip-text" style="color: rgb(255, 255, 255); background: rgb(20, 53, 195);">Liên hệ qua Zalo</span>
</div>
</a>

<a href="#thay thành liên kết đến bản đồ của bạn vào đây">
<div class="pushdy-widget-button pd-gmap" style="height: 48px; width: 48px; background-image: url(/wp-content/uploads/2022/04/icon-map-s2.svg);">
<span class="pd-label pd-gmap pd-tooltip-text" style="color: rgb(255, 255, 255); background: rgb(20, 53, 195);">Showroom</span>
</div>
</a>

<a href="#thay thành liên kết đến fanpage của bạn vào đây">
<div class="pushdy-widget-button pd-fanpage" style="height: 48px; width: 48px; background-image: url(/wp-content/uploads/2022/04/icon-fanpage-s2.svg);">
<span class="pd-label pd-fanpage pd-tooltip-text" style="color: rgb(255, 255, 255); background: rgb(20, 53, 195);">Liên hệ qua Facebook</span>
</div>
</a>
</div>
</div>

 Mã 2: bỏ vào tệp Stylesheet của Website

Với giao diện Website thường

Với đoạn mã này, các bạn sẽ copy và bỏ nó vào nơi chứa tệp Stylesheet của Website (Stylesheet.css), hoặc các bạn có thể vào trong Menu Tùy biến > CSS Bổ sung và bỏ đoạn mã vào.

.pd-bar{display:grid;-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.pd-widget-list .pd-bar.pd-bg{background-color:#fff;-webkit-box-shadow:0 -2px 6px 0 #ccc;box-shadow:0 -2px 6px 0 #ccc}.pd-widget-list.pd-align-center .pd-bar{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.pd-widget-list.pd-align-right .pd-bar{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}
.pd-widget-list.pd-align-left .pd-bar,.pd-widget-list.pd-align-right .pd-bar,.pd-widget-list.pd-show-label .pd-bar{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.pd-widget-list.pd-align-left .pd-bar{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.pd-widget-list.pd-show-label .pd-bar{-ms-flex-pack:distribute!important;justify-content:space-around!important}.pd-widget-list.pd-highlight .pd-bar{overflow:unset;height:60px!important}.pd-p-error{font-family:"Roboto",sans-serif;font-size:13px;text-align:center;color:red;margin-top:7px!important;height:15px}
.pushdy-widget-button,.pushdy-widget-icon{background-repeat:no-repeat;background-position:center center}.pushdy-widget-button{cursor:pointer;background-size:100%}.pushdy-widget-icon{width:100%;height:100%;background-size:cover}.pd-widget-list.pd-highlight .pushdy-widget-icon{width:36px;height:36px;margin:5px auto 0}.pd-widget-list.pd-highlight.pd-round .pushdy-widget-icon{border-radius:10rem}.pushdy-widget-icon.highlight{width:50px!important;height:50px!important;position:absolute;bottom:18px;border:2px solid #fff;-webkit-transform:translateX(5px);transform:translateX(5px)}
.pd-widget-main-button{width:60px;height:60px;background:-webkit-gradient(linear,left top,left bottom,from(#6480f1),to(#4861c6));background:linear-gradient(to bottom,#6480f1,#4861c6);border-radius:50%;position:relative;overflow:hidden;border:2px solid #fff;-webkit-animation:uptocallmini_offline 2s 0s ease-out infinite;animation:uptocallmini_offline 2s 0s ease-out infinite;cursor:pointer;box-sizing:content-box!important;-webkit-box-sizing:content-box!important}.pd-widget-main-button .pushdy-widget-button-icons-line{display:-webkit-box;display:-ms-flexbox;display:flex;width:-webkit-max-content!important;width:-moz-max-content!important;width:max-content!important;overflow:visible!important;-webkit-transition:.2s all;transition:.2s all;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:auto!important;-webkit-transform:translate(0,0);transform:translate(0,0)}.pd-widget-main-button .pushdy-widget-button-icon{-webkit-transition:.2s all;transition:.2s all;position:absolute;top:0;left:0;display:none}.pushdy-widget-feature{width:60px;height:60px;position:fixed;background:0 0;-webkit-box-shadow:none;box-shadow:none;display:block;z-index:999;border-radius:100%;cursor:pointer}.pushdy-widget-feature.pd-hl-shadow{-webkit-animation:uptocallmini_offline 2s 0s ease-out infinite;animation:uptocallmini_offline 2s 0s ease-out infinite}.pushdy-widget-feature.pd-d-shadow{-webkit-box-shadow:0 5px 6px 0 rgba(0,0,0,.14);box-shadow:0 5px 6px 0 rgba(0,0,0,.14)}.pushdy-widget-feature>div.pd-avatar-img{background-size:cover!important;width:100%!important;height:100%!important;border-radius:50%;border:2px solid #fff}.pushdy-widget-feature>div.pd-avatar-img>img{width:20px;height:20px;position:absolute;left:0;bottom:0;border-radius:50%}.pushdy-widget-feature:hover .pd-feature-tooltip{visibility:visible;opacity:1}.pd-feature-tooltip,.pd-feature-tooltip.pd-tooltip-text{position:absolute;top:calc(50% - 16px);z-index:1;text-align:center;white-space:nowrap;border-radius:4px;padding:8px;opacity:0;-webkit-transition:opacity .5s;transition:opacity .5s}.pd-feature-tooltip{font-family:'Roboto',sans-serif!important;font-size:14px;font-weight:500;line-height:1.32!important;background-color:#0070e0;background-image:none;color:#fff;visibility:hidden;height:auto;margin:0;overflow:hidden}.pd-feature-tooltip.pd-tooltip-text{-o-object-fit:contain;object-fit:contain;font-size:12px!important;line-height:16px!important;-webkit-box-shadow:0 6px 10px 0 rgba(0,0,0,.09);box-shadow:0 6px 10px 0 rgba(0,0,0,.09);background-color:#fff}.pd-feature-tooltip.pd-tooltip-content{position:absolute;white-space:nowrap;color:#fff;padding:0 8px;height:100%;visibility:unset;background-color:#17b8ff}.pushdy-widget-feature[class*=-right] .pd-feature-tooltip.pd-tooltip-text{right:120%}.pd-widget-list[class*=-left] .pushdy-widget-button:hover .pd-label.pd-tooltip-text,.pd-widget-list[class*=-right] .pushdy-widget-button:hover .pd-label.pd-tooltip-text,.pushdy-widget-feature[class*=-left]:hover .pd-feature-tooltip.pd-tooltip-text,.pushdy-widget-feature[class*=-right]:hover .pd-feature-tooltip.pd-tooltip-text{visibility:unset;opacity:1}.pushdy-widget-feature[class*=-left] .pd-feature-tooltip.pd-tooltip-text{left:120%}.pushdy-widget-button{margin:5px auto;position:relative}.pd-widget-list[class*=-left] .pushdy-widget-button,.pd-widget-list[class*=-right] .pushdy-widget-button,.pushdy-widget-button{height:54px;width:54px;box-shadow: 1px 1px 3px 0px black;}.pd-widget-list.pd-bottom .pushdy-widget-button{height:40px;width:40px;margin:0 15px}.pd-widget-list.pd-bottom.pd-show-label .pushdy-widget-button{height:50px;width:50px;margin:0 5px;background-size:28px;overflow:auto;background-position:center 20%}.pd-widget-list.pd-bottom.pd-show-label.pd-highlight .pushdy-widget-button{height:60px;width:60px;overflow:unset!important;position:relative}.pd-round .pushdy-widget-button{border-radius:10rem}.pd-square .pushdy-widget-button{border-radius:0}.pd-rounded .pushdy-widget-button{border-radius:20%}.pd-widget-list[class*=-left].pd-partrounded .pushdy-widget-button{border-radius:0 20% 20% 0}.pd-widget-list[class*=-right].pd-partrounded .pushdy-widget-button{border-radius:20% 0 0 20%}.pd-highlight .pushdy-widget-button{width:60px;height:60px;overflow:unset!important;position:relative}.pd-label,.pd-widget-list .pushdy-suggestion-footer>span{font-family:'Roboto',sans-serif!important;white-space:nowrap}.pd-label{font-size:14px;font-weight:500;line-height:1.32!important;color:#0d192d;height:auto;margin:0;visibility:hidden;overflow:hidden;padding:0 40px 0 20px}.pd-label.pd-tooltip-text{position:absolute;top:calc(50% - 16px);z-index:1;-o-object-fit:contain;object-fit:contain;font-size:12px!important;line-height:16px!important;text-align:center;white-space:nowrap;border-radius:4px;padding:8px;-webkit-box-shadow:0 6px 10px 0 rgba(0,0,0,.09);box-shadow:0 6px 10px 0 rgba(0,0,0,.09);background-color:#fff;opacity:0;-webkit-transition:opacity .5s;transition:opacity .5s}.pd-label.pd-tooltip-content{position:absolute;white-space:nowrap;color:#fff;padding:0 8px;height:100%;visibility:unset;background-color:#17b8ff}.pd-widget-list[class*=-right] .pd-label.pd-tooltip-text{right:120%}.pd-widget-list[class*=-right] .pd-label.pd-tooltip-text::after{border-color:transparent #1d243e transparent transparent;right:100%;content:"";position:absolute;top:50%;margin-top:-5px;border-width:5px;border-style:solid}.pd-widget-list[class*=-right] .pd-label.pd-tooltip-content{left:calc(100% - 1px);text-align:right;line-height:54px!important}.pd-widget-list[class*=-left] .pd-label.pd-tooltip-text{left:120%}.pd-widget-list[class*=-left] .pd-label.pd-tooltip-text::after{border-color:transparent transparent transparent #1d243e;left:100%;content:"";position:absolute;top:50%;margin-top:-5px;border-width:5px;border-style:solid}.pd-widget-list[class*=-left] .pd-label.pd-tooltip-content{right:calc(100% - 1px);text-align:left;line-height:54px!important}.pd-widget-list[class*=-left] .pushdy-widget-button:hover .pd-label,.pd-widget-list[class*=-right] .pushdy-widget-button:hover .pd-label{display:block}.pd-widget-list.pd-bottom.pd-show-label .pd-label{visibility:unset;display:block;top:auto;width:100%;bottom:5%;left:0;padding:0;margin:0;text-align:center;opacity:1;font-size:9px!important;font-weight:400;color:#000;background:unset!important;border:unset!important;-webkit-box-shadow:unset!important;box-shadow:unset!important}.pd-widget-list.pd-bottom.pd-show-label.pd-highlight .pd-label{bottom:3px}.pd-widget-list .pushdy-suggestion-footer{position:relative;width:100%;visibility:hidden;opacity:0;-webkit-transition:visibility 2s ease,opacity .6s ease;transition:visibility 2s ease,opacity .6s ease}.pd-widget-list .pushdy-suggestion-footer>span{background-color:red;padding:3px 7px;border-radius:3px;color:#555!important;background:rgba(0,0,0,.1)}.pd-widget-list:hover .pushdy-suggestion-footer{opacity:1}.pd-widget-list[class*=-right] .pushdy-suggestion-footer{text-align:right}.pd-widget-list[class*=-left] .pushdy-suggestion-footer{text-align:left}.pd-widget-list.pd-bottom .pushdy-suggestion-footer{display:none}


.mobile-hotline{display:none}

@media only screen and (max-width: 480p){{.pd-bar{display:none}
/*** Mobile Hotline ***/

.mobile-hotline{display: inline-block; bottom: 0; width: 100%; background:rgba(0,0,0,0.5); height: 35px; position: fixed; z-index:9999999}

.mobile-hotline .mobile-hotline-left{width: 25%; float: left; text-align: center; background: #ffffff; height: 100%;}
.mobile-hotline .mobile-hotline-left a{color: #4267b2; line-height: 35px; font-size: 12px; font-weight: bold}

.mobile-hotline .mobile-hotline-center{width: 25%; float: left; text-align: center; background: #00b9eb; height: 100%;}
.mobile-hotline .mobile-hotline-center a{color: white; line-height: 35px; font-size: 12px; font-weight: bold}

.mobile-hotline .mobile-hotline-cent{width: 25%; float: left; text-align: center; background: #64A7C9; height: 100%;}
.mobile-hotline .mobile-hotline-cent a{color: white; line-height: 35px; font-size:12px; font-weight: bold}
 
.mobile-hotline .mobile-hotline-right{width: 25%; float: right; text-align: center; background: #308BFF; height: 100%;}
.mobile-hotline .mobile-hotline-right a{color: white; line-height: 35px; font-size:12px; font-weight: bold}

.mobile-hotline .mobile-hotline-call{width: 25%; float: right; text-align: center; background: #308BFF; height: 100%;}
.mobile-hotline .mobile-hotline-call a{color: white; line-height: 35px; font-size:12px; font-weight: bold}
.mobile-hotline .clearboth{clear:both}

.mobile-hotline img{width:20px; padding-right:5px}

.mobile-hotline{box-shadow: 3px 3px 10px 2px;}
}

Với giao diện Flatsome thì các bạn hãy áp dụng theo phương pháp sau đây.

Các bạn tab Advanced của giao diện Flatsome Flatsome Advanced Options vào tab “Custom CSS” và copy lần lượt cho 2 bảng.

ALL SCREENS

 

.pd-bar{display:grid;-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.pd-widget-list .pd-bar.pd-bg{background-color:#fff;-webkit-box-shadow:0 -2px 6px 0 #ccc;box-shadow:0 -2px 6px 0 #ccc}.pd-widget-list.pd-align-center .pd-bar{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.pd-widget-list.pd-align-right .pd-bar{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}
.pd-widget-list.pd-align-left .pd-bar,.pd-widget-list.pd-align-right .pd-bar,.pd-widget-list.pd-show-label .pd-bar{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.pd-widget-list.pd-align-left .pd-bar{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.pd-widget-list.pd-show-label .pd-bar{-ms-flex-pack:distribute!important;justify-content:space-around!important}.pd-widget-list.pd-highlight .pd-bar{overflow:unset;height:60px!important}.pd-p-error{font-family:"Roboto",sans-serif;font-size:13px;text-align:center;color:red;margin-top:7px!important;height:15px}
.pushdy-widget-button,.pushdy-widget-icon{background-repeat:no-repeat;background-position:center center}.pushdy-widget-button{cursor:pointer;background-size:100%}.pushdy-widget-icon{width:100%;height:100%;background-size:cover}.pd-widget-list.pd-highlight .pushdy-widget-icon{width:36px;height:36px;margin:5px auto 0}.pd-widget-list.pd-highlight.pd-round .pushdy-widget-icon{border-radius:10rem}.pushdy-widget-icon.highlight{width:50px!important;height:50px!important;position:absolute;bottom:18px;border:2px solid #fff;-webkit-transform:translateX(5px);transform:translateX(5px)}
.pd-widget-main-button{width:60px;height:60px;background:-webkit-gradient(linear,left top,left bottom,from(#6480f1),to(#4861c6));background:linear-gradient(to bottom,#6480f1,#4861c6);border-radius:50%;position:relative;overflow:hidden;border:2px solid #fff;-webkit-animation:uptocallmini_offline 2s 0s ease-out infinite;animation:uptocallmini_offline 2s 0s ease-out infinite;cursor:pointer;box-sizing:content-box!important;-webkit-box-sizing:content-box!important}.pd-widget-main-button .pushdy-widget-button-icons-line{display:-webkit-box;display:-ms-flexbox;display:flex;width:-webkit-max-content!important;width:-moz-max-content!important;width:max-content!important;overflow:visible!important;-webkit-transition:.2s all;transition:.2s all;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:auto!important;-webkit-transform:translate(0,0);transform:translate(0,0)}.pd-widget-main-button .pushdy-widget-button-icon{-webkit-transition:.2s all;transition:.2s all;position:absolute;top:0;left:0;display:none}.pushdy-widget-feature{width:60px;height:60px;position:fixed;background:0 0;-webkit-box-shadow:none;box-shadow:none;display:block;z-index:999;border-radius:100%;cursor:pointer}.pushdy-widget-feature.pd-hl-shadow{-webkit-animation:uptocallmini_offline 2s 0s ease-out infinite;animation:uptocallmini_offline 2s 0s ease-out infinite}.pushdy-widget-feature.pd-d-shadow{-webkit-box-shadow:0 5px 6px 0 rgba(0,0,0,.14);box-shadow:0 5px 6px 0 rgba(0,0,0,.14)}.pushdy-widget-feature>div.pd-avatar-img{background-size:cover!important;width:100%!important;height:100%!important;border-radius:50%;border:2px solid #fff}.pushdy-widget-feature>div.pd-avatar-img>img{width:20px;height:20px;position:absolute;left:0;bottom:0;border-radius:50%}.pushdy-widget-feature:hover .pd-feature-tooltip{visibility:visible;opacity:1}.pd-feature-tooltip,.pd-feature-tooltip.pd-tooltip-text{position:absolute;top:calc(50% - 16px);z-index:1;text-align:center;white-space:nowrap;border-radius:4px;padding:8px;opacity:0;-webkit-transition:opacity .5s;transition:opacity .5s}.pd-feature-tooltip{font-family:'Roboto',sans-serif!important;font-size:14px;font-weight:500;line-height:1.32!important;background-color:#0070e0;background-image:none;color:#fff;visibility:hidden;height:auto;margin:0;overflow:hidden}.pd-feature-tooltip.pd-tooltip-text{-o-object-fit:contain;object-fit:contain;font-size:12px!important;line-height:16px!important;-webkit-box-shadow:0 6px 10px 0 rgba(0,0,0,.09);box-shadow:0 6px 10px 0 rgba(0,0,0,.09);background-color:#fff}.pd-feature-tooltip.pd-tooltip-content{position:absolute;white-space:nowrap;color:#fff;padding:0 8px;height:100%;visibility:unset;background-color:#17b8ff}.pushdy-widget-feature[class*=-right] .pd-feature-tooltip.pd-tooltip-text{right:120%}.pd-widget-list[class*=-left] .pushdy-widget-button:hover .pd-label.pd-tooltip-text,.pd-widget-list[class*=-right] .pushdy-widget-button:hover .pd-label.pd-tooltip-text,.pushdy-widget-feature[class*=-left]:hover .pd-feature-tooltip.pd-tooltip-text,.pushdy-widget-feature[class*=-right]:hover .pd-feature-tooltip.pd-tooltip-text{visibility:unset;opacity:1}.pushdy-widget-feature[class*=-left] .pd-feature-tooltip.pd-tooltip-text{left:120%}.pushdy-widget-button{margin:5px auto;position:relative}.pd-widget-list[class*=-left] .pushdy-widget-button,.pd-widget-list[class*=-right] .pushdy-widget-button,.pushdy-widget-button{height:54px;width:54px;box-shadow: 1px 1px 3px 0px black;}.pd-widget-list.pd-bottom .pushdy-widget-button{height:40px;width:40px;margin:0 15px}.pd-widget-list.pd-bottom.pd-show-label .pushdy-widget-button{height:50px;width:50px;margin:0 5px;background-size:28px;overflow:auto;background-position:center 20%}.pd-widget-list.pd-bottom.pd-show-label.pd-highlight .pushdy-widget-button{height:60px;width:60px;overflow:unset!important;position:relative}.pd-round .pushdy-widget-button{border-radius:10rem}.pd-square .pushdy-widget-button{border-radius:0}.pd-rounded .pushdy-widget-button{border-radius:20%}.pd-widget-list[class*=-left].pd-partrounded .pushdy-widget-button{border-radius:0 20% 20% 0}.pd-widget-list[class*=-right].pd-partrounded .pushdy-widget-button{border-radius:20% 0 0 20%}.pd-highlight .pushdy-widget-button{width:60px;height:60px;overflow:unset!important;position:relative}.pd-label,.pd-widget-list .pushdy-suggestion-footer>span{font-family:'Roboto',sans-serif!important;white-space:nowrap}.pd-label{font-size:14px;font-weight:500;line-height:1.32!important;color:#0d192d;height:auto;margin:0;visibility:hidden;overflow:hidden;padding:0 40px 0 20px}.pd-label.pd-tooltip-text{position:absolute;top:calc(50% - 16px);z-index:1;-o-object-fit:contain;object-fit:contain;font-size:12px!important;line-height:16px!important;text-align:center;white-space:nowrap;border-radius:4px;padding:8px;-webkit-box-shadow:0 6px 10px 0 rgba(0,0,0,.09);box-shadow:0 6px 10px 0 rgba(0,0,0,.09);background-color:#fff;opacity:0;-webkit-transition:opacity .5s;transition:opacity .5s}.pd-label.pd-tooltip-content{position:absolute;white-space:nowrap;color:#fff;padding:0 8px;height:100%;visibility:unset;background-color:#17b8ff}.pd-widget-list[class*=-right] .pd-label.pd-tooltip-text{right:120%}.pd-widget-list[class*=-right] .pd-label.pd-tooltip-text::after{border-color:transparent #1d243e transparent transparent;right:100%;content:"";position:absolute;top:50%;margin-top:-5px;border-width:5px;border-style:solid}.pd-widget-list[class*=-right] .pd-label.pd-tooltip-content{left:calc(100% - 1px);text-align:right;line-height:54px!important}.pd-widget-list[class*=-left] .pd-label.pd-tooltip-text{left:120%}.pd-widget-list[class*=-left] .pd-label.pd-tooltip-text::after{border-color:transparent transparent transparent #1d243e;left:100%;content:"";position:absolute;top:50%;margin-top:-5px;border-width:5px;border-style:solid}.pd-widget-list[class*=-left] .pd-label.pd-tooltip-content{right:calc(100% - 1px);text-align:left;line-height:54px!important}.pd-widget-list[class*=-left] .pushdy-widget-button:hover .pd-label,.pd-widget-list[class*=-right] .pushdy-widget-button:hover .pd-label{display:block}.pd-widget-list.pd-bottom.pd-show-label .pd-label{visibility:unset;display:block;top:auto;width:100%;bottom:5%;left:0;padding:0;margin:0;text-align:center;opacity:1;font-size:9px!important;font-weight:400;color:#000;background:unset!important;border:unset!important;-webkit-box-shadow:unset!important;box-shadow:unset!important}.pd-widget-list.pd-bottom.pd-show-label.pd-highlight .pd-label{bottom:3px}.pd-widget-list .pushdy-suggestion-footer{position:relative;width:100%;visibility:hidden;opacity:0;-webkit-transition:visibility 2s ease,opacity .6s ease;transition:visibility 2s ease,opacity .6s ease}.pd-widget-list .pushdy-suggestion-footer>span{background-color:red;padding:3px 7px;border-radius:3px;color:#555!important;background:rgba(0,0,0,.1)}.pd-widget-list:hover .pushdy-suggestion-footer{opacity:1}.pd-widget-list[class*=-right] .pushdy-suggestion-footer{text-align:right}.pd-widget-list[class*=-left] .pushdy-suggestion-footer{text-align:left}.pd-widget-list.pd-bottom .pushdy-suggestion-footer{display:none}
.mobile-hotline{display:none}

MOBILE ONLY

.pd-bar{display:none}
/*** Mobile Hotline ***/

.mobile-hotline{display: inline-block; bottom: 0; width: 100%; background:rgba(0,0,0,0.5); height: 35px; position: fixed; z-index:9999999}

.mobile-hotline .mobile-hotline-left{width: 25%; float: left; text-align: center; background: #ffffff; height: 100%;}
.mobile-hotline .mobile-hotline-left a{color: #4267b2; line-height: 35px; font-size: 12px; font-weight: bold}

.mobile-hotline .mobile-hotline-center{width: 25%; float: left; text-align: center; background: #00b9eb; height: 100%;}
.mobile-hotline .mobile-hotline-center a{color: white; line-height: 35px; font-size: 12px; font-weight: bold}

.mobile-hotline .mobile-hotline-cent{width: 25%; float: left; text-align: center; background: #64A7C9; height: 100%;}
.mobile-hotline .mobile-hotline-cent a{color: white; line-height: 35px; font-size:12px; font-weight: bold}
 
.mobile-hotline .mobile-hotline-right{width: 25%; float: right; text-align: center; background: #308BFF; height: 100%;}
.mobile-hotline .mobile-hotline-right a{color: white; line-height: 35px; font-size:12px; font-weight: bold}

.mobile-hotline .mobile-hotline-call{width: 25%; float: right; text-align: center; background: #308BFF; height: 100%;}
.mobile-hotline .mobile-hotline-call a{color: white; line-height: 35px; font-size:12px; font-weight: bold}
.mobile-hotline .clearboth{clear:both}

.mobile-hotline img{width:20px; padding-right:5px}

.mobile-hotline{box-shadow: 3px 3px 10px 2px;}

Vậy là xong, giờ thì tận hưởng thành quả thôi.

Video hướng dẫn chi tiết

Hi vọng, với bài viết này, sẽ giúp các bạn biết cách thêm nút liên hệ vào Website nhanh nhất có thể. Đừng quên bình luận vào bài viết này để Liêm biết ý kiến của các bạn nhé.

Điểm đánh giá
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
Gọi Liêm
Youtube
Zalo
Website của Liêm sử dụng Cookies để tối ưu hóa trải nghiệm lướt web của bạn.