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é.
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 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}
Và 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.
[size=5]Video[/size]
Đừng quên like và share bài viết nhé.
Nguồn: https://liemmkt.com/them-nut-lien-he-vao-website-de-lam.html