Lượt xem bài viết : 0
Thủ Thuật Wordpress

Hướng dẫn làm nút liên hệ website wourdpress đẹp

Posted on by Admin

Nút liên hệ rất quan trọng đối với một website, đó là chức năng giúp khách hàng có thể kết nối nhanh chóng với bạn. Sau đây mình xin giới thiệu một số mẫu code nút liên hệ đẹp chèn trực tiếp vào website wourdpress

1, Mẫu code nút liên hệ website wourdpress 01

Cách sử dụng mẫu:  các bạn copy toàn bộ code bên dưới dán vào trước thẻ </body>.

<!--dán trước thẻ </body>-->
<script type='text/javascript'>
//<![CDATA[
var _widget_settings = {
  positions: 'bottom right',//thay right thành left nếu muốn hiển thị bên trái
  support: {
    staff: {
      name: 'Minh Nguyệt',
      image: 'http://thietkewebsitethanhhoa.com/wp-content/uploads/2023/12/lien-he-1.jpg',
      messages: 'Không biết em có thể hỗ trợ gì cho anh/chị không ạ?'
    }
  },
  buttons: {
    contact: {
      visible: 'true',//true hiển thị & false không hiển thị
      id: 'https://thietkewebsitethanhhoa.com/lien-he/',
      messages: 'Liên hệ'
    },
    email: {
      visible: 'true',
      id: 'anhnguyen.tpth@gmail.com',
      messages: 'Gửi email'
    },
    call: {
      visible: 'true',
      id: '0973463606',
      messages: 'Gọi điện'
    },
    sms: {
      visible: 'true',
      id: '0973463606',
      messages: 'Nhắn tin'
    },
    viber: {
      visible: 'false',
      id: 'vhost.vn',
      messages: 'Chat Viber'
    },
    telegram: {
      visible: 'false',
      id: 'vHostbot',
      messages: 'Chat Telegram'
    },
    zalo: {
      visible: 'true',
      id: '0973463606',
      messages: 'Chat Zalo'
    },
    facebook: {
      visible: 'true',
      id: 'AnhNguyenWeb',
      messages: 'Chat Facebook'
    }
  }
}
//]]></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://dl.dropboxusercontent.com/s/0g338x7mvg1x64z/contact-button-widget.js'></script>

Trong đó các bạn lưu ý thay đổi các thành phần mình tô vàng trong code như sau sau:

      – Mục positions: Thay right thành left nếu muốn nút nằm bên trái

      – Mục name:  Tên nhân viên

      – Mục image:  Link ảnh, các bạn có thể thay link ảnh khác.

      – Mục messages: Trên cùng là văn bản lời chào, các bạn có thể sửa lại theo ý của mình. Các mục messages còn lại là văn bản hiển thị của button.

      – Các mục visible: Thay true thành false nếu không hiển thị và ngược lại. Trong code hiện đang ẩn button “Viber” và “Telegram“.

      – Các mục id: tùy theo mỗi button mà thay link phù hợp.

Nếu các phần nào các bạn muốn lượn bỏ thì xóa trong code đi nhé, VD không muốn mục Vibe và telegram thì xóa đoạn này

 viber: {
      visible: 'false',
      id: 'vhost.vn',
      messages: 'Chat Viber'
    },
    telegram: {
      visible: 'false',
      id: 'vHostbot',
      messages: 'Chat Telegram'
    },

Nếu Template của các bạn đã có thư viện jquery.min.js rồi thì các bạn xóa bỏ link trong code đi nhé.

2, Mẫu code nút liên hệ website wourdpress 02

Bước 1: Tải về Plugin Simple Custom CSS and JS

Bước 2: Add CSS code, đặt tên bất kỳ và copy đoạn mã css sau vào lưu lại

CSS code 02


.arcontactus-widget{opacity:1;transition:.2s opacity;line-height:1}.arcontactus-widget *{box-sizing:border-box}.arcontactus-widget.left.arcontactus-message{left:20px;right:auto}.arcontactus-widget.left .arcontactus-message-button{right:auto;left:0}.arcontactus-widget.left .arcontactus-prompt{left:80px;right:auto;transform-origin:0 50%}.arcontactus-widget.left .arcontactus-prompt.arcu-prompt-top{left:0;right:auto}.arcontactus-widget.left .arcontactus-prompt.arcu-prompt-top:before{border-right:8px solid transparent;border-top:8px solid #fff;border-left:8px solid transparent;border-bottom:0 none;left:25px;right:auto}.arcontactus-widget.left .arcontactus-prompt:before{border-right:8px solid #fff;border-top:8px solid transparent;border-left:8px solid transparent;border-bottom:8px solid transparent;right:auto;left:-15px}.arcontactus-widget.left .messangers-block{right:auto;left:0;-webkit-transform-origin:10% 105%;-ms-transform-origin:10% 105%;transform-origin:10% 105%}.arcontactus-widget.left .callback-countdown-block{left:0;right:auto}.arcontactus-widget.left .messangers-block:before,.arcontactus-widget.left .callback-countdown-block:before{left:25px;right:auto}.arcontactus-widget.hg.arcontactus-message{width:100px;height:100px}.arcontactus-widget.hg .messangers-block,.arcontactus-widget.hg .callback-countdown-block,.arcontactus-widget.hg .arcu-popup{bottom:110px}.arcontactus-widget.hg .arcontactus-prompt{bottom:5px}.arcontactus-widget.hg .icons-line{top:22px;left:24px}.arcontactus-widget.hg.left .messangers-block:before,.arcontactus-widget.hg.left .callback-countdown-block:before,.arcontactus-widget.hg.left .arcu-popup:before{left:41px}.arcontactus-widget.hg.left .arcontactus-prompt{left:110px;bottom:26px}.arcontactus-widget.hg.right .messangers-block:before,.arcontactus-widget.hg.right .callback-countdown-block:before,.arcontactus-widget.hg.right .arcu-popup:before{right:41px}.arcontactus-widget.hg.right .arcontactus-prompt{right:110px;bottom:26px}.arcontactus-widget.hg .arcontactus-message-button{width:100px;height:100px}.arcontactus-widget.hg .arcontactus-message-button .pulsation{width:114px;height:114px;border-radius:60px}.arcontactus-widget.hg .arcontactus-message-button .icons{width:70px;height:70px;margin-top:-35px;margin-left:-35px}.arcontactus-widget.hg .arcontactus-message-button .callback-state{width:70px;height:70px;margin-top:-35px;margin-left:-35px}.arcontactus-widget.md.arcontactus-message{width:60px;height:60px}.arcontactus-widget.md .messangers-block,.arcontactus-widget.md .callback-countdown-block,.arcontactus-widget.md .arcu-popup{bottom:70px}.arcontactus-widget.md .arcontactus-prompt{bottom:5px}.arcontactus-widget.md.left .messangers-block:before,.arcontactus-widget.md.left .callback-countdown-block:before,.arcontactus-widget.md.left .arcu-popup:before{left:21px}.arcontactus-widget.md.left .arcontactus-prompt{left:70px}.arcontactus-widget.md.left .arcontactus-prompt.arcu-prompt-top{bottom:70px;left:0;right:auto}.arcontactus-widget.md.left .arcontactus-prompt.arcu-prompt-top:before{border-right:8px solid transparent;border-top:8px solid #fff;border-left:8px solid transparent;border-bottom:0 none;left:21px;right:auto}.arcontactus-widget.md.right .messangers-block:before,.arcontactus-widget.md.right .callback-countdown-block:before,.arcontactus-widget.md.right .arcu-popup:before{right:21px}.arcontactus-widget.md.right .arcontactus-prompt{right:70px}.arcontactus-widget.md.right .arcontactus-prompt.arcu-prompt-top{right:0;bottom:70px}.arcontactus-widget.md.right .arcontactus-prompt.arcu-prompt-top:before{right:21px}.arcontactus-widget.md .arcontactus-message-button{width:60px;height:60px}.arcontactus-widget.md .arcontactus-message-button .pulsation{width:74px;height:74px}.arcontactus-widget.md .arcontactus-message-button .icons{width:40px;height:40px;margin-top:-20px;margin-left:-20px}.arcontactus-widget.md .arcontactus-message-button .callback-state{width:40px;height:40px;margin-top:-20px;margin-left:-20px}.arcontactus-widget.sm.arcontactus-message{width:50px;height:50px}.arcontactus-widget.sm .messangers-block,.arcontactus-widget.sm .callback-countdown-block,.arcontactus-widget.sm .arcu-popup{bottom:60px}.arcontactus-widget.sm .arcontactus-prompt{bottom:0}.arcontactus-widget.sm.left .messangers-block:before,.arcontactus-widget.sm.left .callback-countdown-block:before,.arcontactus-widget.sm.left .arcu-popup:before{left:16px}.arcontactus-widget.sm.left .arcontactus-prompt{left:60px}.arcontactus-widget.sm.left .arcontactus-prompt.arcu-prompt-top{bottom:60px;left:0;right:auto}.arcontactus-widget.sm.left .arcontactus-prompt.arcu-prompt-top:before{border-right:8px solid transparent;border-top:8px solid #fff;border-left:8px solid transparent;border-bottom:0 none;left:16px;right:auto}.arcontactus-widget.sm.right .messangers-block:before,.arcontactus-widget.sm.right .callback-countdown-block:before,.arcontactus-widget.sm.right .arcu-popup:before{right:16px}.arcontactus-widget.sm.right .arcontactus-prompt{right:60px}.arcontactus-widget.sm.right .arcontactus-prompt.arcu-prompt-top{right:0;bottom:60px}.arcontactus-widget.sm.right .arcontactus-prompt.arcu-prompt-top:before{right:16px}.arcontactus-widget.sm .arcontactus-message-button{width:50px;height:50px}.arcontactus-widget.sm .arcontactus-message-button .pulsation{width:64px;height:64px}.arcontactus-widget.sm .arcontactus-message-button .icons{width:40px;height:40px;margin-top:-20px;margin-left:-20px}.arcontactus-widget.sm .arcontactus-message-button .static{margin-top:-16px}.arcontactus-widget.sm .arcontactus-message-button .callback-state{width:40px;height:40px;margin-top:-20px;margin-left:-20px}.arcontactus-widget.active{opacity:1}.arcontactus-widget.arcontactus-message{z-index:1000000;right:20px;bottom:20px;position:fixed!important;height:70px;width:70px}.arcontactus-widget .arcontactus-message-button{width:70px;position:absolute;height:70px;right:0;background-color:red;border-radius:50px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}.arcontactus-widget .arcontactus-message-button p,.arcontactus-widget .arcontactus-message-button .arcu-item-label{font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;color:#fff;font-weight:700;font-size:10px;line-height:11px;margin:0}.arcontactus-widget .arcontactus-message-button .pulsation{width:84px;height:84px;background-color:red;border-radius:50px;position:absolute;left:-7px;top:-7px;z-index:-1;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:arcontactus-pulse 2s infinite;animation:arcontactus-pulse 2s infinite}.arcontactus-widget .arcontactus-message-button .icons{background-color:#fff;width:44px;height:44px;border-radius:50px;position:absolute;overflow:hidden;top:50%;left:50%;margin-top:-22px;margin-left:-22px}.arcontactus-widget .arcontactus-message-button .static{position:absolute;top:50%;left:50%;margin-top:-19px;margin-left:-26px;width:52px;height:52px;text-align:center}.arcontactus-widget .arcontactus-message-button .static img{display:inline}.arcontactus-widget .arcontactus-message-button .static svg{width:24px;height:24px;color:#fff}.arcontactus-widget .arcontactus-message-button.no-text .static{margin-top:-12px}.arcontactus-widget .pulsation:nth-of-type(2n){-webkit-animation-delay:.5s;animation-delay:.5s}.arcontactus-widget .pulsation.stop{-webkit-animation:none;animation:none}.arcontactus-widget .icons-line{top:10px;left:12px;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;-webkit-transition:cubic-bezier(.13,1.49,.14,-.4);-o-transition:cubic-bezier(.13,1.49,.14,-.4);transition:cubic-bezier(.13,1.49,.14,-.4);-webkit-animation-delay:0s;animation-delay:0s;-webkit-transform:translateX(30px);-ms-transform:translateX(30px);transform:translateX(30px);height:24px;transition:.2s all}.arcontactus-widget .icons-line.stop{-webkit-animation-play-state:paused;animation-play-state:paused}.arcontactus-widget .icons-line span{display:inline-block;width:24px;height:24px;color:red}.arcontactus-widget .icons-line span svg,.arcontactus-widget .icons-line span i{width:24px;height:24px}.arcontactus-widget .icons-line span i{display:block;font-size:24px;line-height:24px}.arcontactus-widget .icons-line img,.arcontactus-widget .icons-line span{margin-right:40px}.arcontactus-widget .static{transition:.2s all}.arcontactus-widget .static.hide{transform:scale(0);opacity:0}.arcontactus-widget .icons{transition:.2s all}.arcontactus-widget .icons.hide{transform:scale(0);opacity:0}.arcontactus-widget .icons.hide .icons-line{transform:scale(0)}.arcontactus-widget .icons .icon:first-of-type{margin-left:0}.arcontactus-widget .arcontactus-close{color:#fff}.arcontactus-widget .arcontactus-close svg{-webkit-transform:rotate(180deg) scale(0);-ms-transform:rotate(180deg) scale(0);transform:rotate(180deg) scale(0);-webkit-transition:ease-in .12s all;-o-transition:ease-in .12s all;transition:ease-in .12s all;display:block}.arcontactus-widget .arcontactus-close.show-messageners-block svg{-webkit-transform:rotate(0) scale(1);-ms-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}.arcontactus-widget .arcontactus-prompt{display:-webkit-box;display:-ms-flexbox;display:flex}.arcontactus-widget .messangers-block,.arcontactus-widget .arcontactus-prompt,.arcontactus-widget .arcu-popup{background:#fff;box-shadow:0 0 40px rgba(0,0,0,.2);width:300px;background-repeat:no-repeat;background-position:center;position:absolute;bottom:80px;right:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:10px 0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:7px;-webkit-transform-origin:80% 105%;-ms-transform-origin:80% 105%;transform-origin:80% 105%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transition:ease-out .12s all;-o-transition:ease-out .12s all;transition:ease-out .12s all;z-index:1000000}.arcontactus-widget .messangers-block:before,.arcontactus-widget .arcontactus-prompt:before,.arcontactus-widget .arcu-popup:before{position:absolute;bottom:-7px;right:25px;left:auto;display:inline-block!important;border-right:8px solid transparent;border-top:8px solid #fff;border-left:8px solid transparent;content:''}.arcontactus-widget .messangers-block.show-messageners-block,.arcontactus-widget .arcontactus-prompt.show-messageners-block,.arcontactus-widget .arcu-popup.show-messageners-block{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.arcontactus-widget .arcu-popup{padding:0}.arcontactus-widget .arcu-popup .arcu-popup-header{padding:18px 15px;color:#fff;background:#787878;border-radius:7px 7px 0 0;font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;margin-bottom:0;font-size:17px;position:relative;line-height:1.4}.arcontactus-widget .arcu-popup .arcu-popup-content{padding:10px;max-height:300px;overflow:auto;line-height:initial}.arcontactus-widget .arcontactus-prompt.arcu-prompt-top{right:0;max-width:260px;bottom:80px}.arcontactus-widget .arcontactus-prompt.arcu-prompt-top:before{bottom:-7px;right:25px;left:auto;border-right:8px solid transparent;border-top:8px solid #fff;border-left:8px solid transparent;border-bottom:0 none}.arcontactus-widget .messangers-block{display:block}.arcontactus-widget .messangers-block.has-header{padding-top:0}.arcontactus-widget .messangers-block .arcu-menu-header{padding:18px 15px;color:#fff;background:#787878;border-radius:7px 7px 0 0;font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;margin-bottom:10px;font-size:17px;position:relative;line-height:1.4}.arcontactus-widget .arcu-header-close,.arcontactus-widget .arcu-popup-close,.arcontactus-widget .arcu-popup-back{position:absolute;right:0;top:-30px;padding:0;margin:0;border:0 none;background:0 0;line-height:1;width:26px;height:26px;cursor:pointer;color:#fff;background:#787878;border-radius:50%;text-align:center}.arcontactus-widget .arcu-header-close svg,.arcontactus-widget .arcu-popup-close svg,.arcontactus-widget .arcu-popup-back svg{height:12px;width:12px;display:block;position:absolute;left:50%;top:50%;margin:-6px 0 0 -6px}.arcontactus-widget .arcu-popup-back{right:auto;left:0;top:50%;margin-top:-13px;display:none}.arcontactus-widget .arcu-popup-back svg{height:16px;width:16px;margin:-8px 0 0 -8px}.arcontactus-widget .arcontactus-prompt{color:#787878;font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:18px;width:auto;bottom:10px;right:80px;white-space:nowrap;padding:14px 20px 14px}.arcontactus-widget .arcontactus-prompt:before{border-right:8px solid transparent;border-top:8px solid transparent;border-left:8px solid #fff;border-bottom:8px solid transparent;bottom:16px;right:-15px}.arcontactus-widget .arcontactus-prompt.active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.arcontactus-widget .arcontactus-prompt:hover .arcontactus-prompt-close{opacity:1}.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-close{opacity:0;transition:.2s all;position:absolute;right:-10px;top:-10px;padding:0;margin:0;border:0 none;background:0 0;line-height:1;width:26px;height:26px;cursor:pointer;color:#fff;background:#787878;border-radius:50%;text-align:center}.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-close svg{height:12px;width:12px;display:block;position:absolute;left:50%;top:50%;margin:-6px 0 0 -6px}.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-typing{border-radius:10px;display:inline-block;left:3px;padding:0 0 0 3px;position:relative;top:4px;width:50px}.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-typing>div{position:relative;float:left;border-radius:50%;width:10px;height:10px;background:#ccc;margin:0 2px;-webkit-animation:arcontactus-updown 2s infinite;animation:arcontactus-updown 2s infinite}.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-typing>div:nth-child(2){animation-delay:.1s}.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-typing>div:nth-child(3){animation-delay:.2s}.arcontactus-widget .messangers-block .messangers-list{list-style:none;margin:0;padding:0}.arcontactus-widget .messangers-block .messangers-list li{margin:0;padding:0}.arcontactus-widget .messangers-block.sm .arcu-menu-header{padding-top:12px;padding-bottom:12px}.arcontactus-widget .messangers-block.sm .not-rounded-items .messanger{padding-left:42px}.arcontactus-widget .messangers-block.sm .messanger{padding-left:50px;min-height:44px;padding-top:4px;padding-bottom:4px}.arcontactus-widget .messangers-block.sm .messanger span{height:32px;width:32px;margin-top:-16px}.arcontactus-widget .messangers-block.sm .messanger span svg,.arcontactus-widget .messangers-block.sm .messanger span i{height:20px;width:20px;line-height:20px;margin-top:-10px;margin-left:-10px;font-size:21px}.arcontactus-widget .not-rounded-items .messanger{padding-left:48px}.arcontactus-widget .not-rounded-items .messanger span{left:5px}.arcontactus-widget .messanger{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0;cursor:pointer;width:100%;padding:8px 20px 8px 60px;position:relative;min-height:54px;text-decoration:none}.arcontactus-widget .messanger:hover{background-color:#eee}.arcontactus-widget .messanger:before{background-repeat:no-repeat;background-position:center}.arcontactus-widget .messanger.facebook span{background:#0084ff}.arcontactus-widget .messanger.viber span{background:#7c529d}.arcontactus-widget .messanger.telegram span{background:#2ca5e0}.arcontactus-widget .messanger.skype span{background:#31c4ed}.arcontactus-widget .messanger.email span{background:#ff8400}.arcontactus-widget .messanger.contact span{background:#7eb105}.arcontactus-widget .messanger.call-back span{background:#54cd81}.arcontactus-widget .messanger span{position:absolute;left:10px;top:50%;margin-top:-20px;display:block;width:40px;height:40px;border-radius:50%;background-color:#0084ff;margin-right:10px;color:#fff;text-align:center;vertical-align:middle}.arcontactus-widget .messanger span svg,.arcontactus-widget .messanger span i{width:24px;height:24px;vertical-align:middle;text-align:center;display:block;position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-12px}.arcontactus-widget .messanger span i{font-size:24px;line-height:24px}.arcontactus-widget .messanger p,.arcontactus-widget .messanger .arcu-item-label{margin:0;font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;font-size:15px;color:rgba(0,0,0,.87);padding:0;line-height:17px;text-align: left;}.arcontactus-widget .messanger p .arcu-item-subtitle,.arcontactus-widget .messanger .arcu-item-label .arcu-item-subtitle{font-size:13px;color:#787878}.arcontactus-widget .callback-countdown-block{background:#fff;box-shadow:0 0 40px rgba(0,0,0,.2);width:410px;background-repeat:no-repeat;background-position:center;position:absolute;bottom:80px;left:auto;right:0;align-items:center;border-radius:7px;-webkit-transform-origin:80% 105%;-ms-transform-origin:80% 105%;transform-origin:80% 105%;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:ease-out .12s all;-o-transition:ease-out .12s all;transition:ease-out .12s all;z-index:1000000;color:red;padding-top:5px;padding-left:8px;padding-right:8px;display:none}.arcontactus-widget .callback-countdown-block .callback-countdown-block-timer_timer{font-size:38px;font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif}.arcontactus-widget .callback-countdown-block.display-flex{display:block}.arcontactus-widget .callback-countdown-block:before{position:absolute;bottom:-7px;right:25px;left:auto;display:inline-block!important;border-right:8px solid transparent;border-top:8px solid #fff;border-left:8px solid transparent;content:''}.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone{font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;font-size:15px;line-height:18px;padding:0 10px 10px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:none;width:100%;position:relative}.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone:before{transition:.2s all}.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone.ar-loading:before{background:rgba(255,255,255,.8);content:' ';position:absolute;width:100%;height:100%;left:0;top:0;z-index:1}.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone.ar-loading:after{content:' ';position:absolute;width:30px;height:30px;z-index:2;top:50%;bottom:50%;margin-top:-15px;margin-bottom:-15px;left:50%;margin-left:-15px;background:url(//sanhungthinhland.com/wp-content/themes/thanhcomvn/../../../plugins/ar-contactus/res/img/ring-alt.gif) no-repeat transparent scroll 0 0}.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone p,.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .arcu-item-label{text-align:center;margin-bottom:10px;margin-top:3px}.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group{align-items:center}.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group .arcu-form-group{margin-bottom:10px}.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group .arcu-form-group.arcu-form-group-required .arcu-form-label:after{content:" *";color:#c7254e}.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group .arcu-form-group.arcu-form-group-type-checkbox{position:relative;padding-left:20px}.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group .arcu-form-group.arcu-form-group-type-checkbox input{position:absolute;top:2px;left:0;width:16px;height:16px}.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group .arcu-form-label{font-size:14px;margin-bottom:3px;color:#333}.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group .arcu-form-field{display:block;width:100%;font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:16px;border-radius:4px;border:0;height:36px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:6px 10px 6px;border:1px solid #ddd;margin:0!important}.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group textarea.arcu-form-field{height:80px;resize:vertical;max-height:140px;min-height:60px}.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group button[type=submit]{display:block;width:100%;border-radius:4px;border:0;background-color:red;color:#fff;font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;font-size:14px;padding:7px 5px 7px;cursor:pointer;height:36px;margin:0;line-height:1}.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group button[type=submit]:hover{opacity:.8}.arcontactus-widget .callback-countdown-block .callback-countdown-block-sorry{height:140px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none}.arcontactus-widget .callback-countdown-block .callback-countdown-block-sorry p{font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:18px;text-align:center;margin-bottom:5px;margin-top:7px;width:100%}.arcontactus-widget .callback-countdown-block .callback-countdown-block-close{position:absolute;right:9px;top:9px;padding:0;margin:0;border:0 none;background:0 0;line-height:1;width:26px;height:26px;cursor:pointer;color:#fff;background:#787878;border-radius:50%;z-index:1;text-align:center}.arcontactus-widget .callback-countdown-block .callback-countdown-block-close svg{height:12px;width:12px;display:block;position:absolute;left:50%;top:50%;margin:-6px 0 0 -6px}.arcontactus-widget .callback-countdown-block .callback-countdown-block-timer{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:140px;display:none}.arcontactus-widget .callback-countdown-block .callback-countdown-block-timer p{font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:21px;text-align:center;margin-bottom:5px;margin-top:7px}.arcontactus-widget .callback-countdown-block .callback-countdown-block-timer h1{font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;font-size:40px;line-height:46px;text-align:center;font-weight:300}.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone.display-flex{display:block}.arcontactus-widget .callback-countdown-block .callback-countdown-block-timer.display-flex,.arcontactus-widget .callback-countdown-block .callback-countdown-block-sorry.display-flex{display:-webkit-box;display:-ms-flexbox;display:flex}.arcontactus-widget .callback-state{background-color:#fff;width:44px;height:44px;border-radius:50px;position:absolute;overflow:hidden;top:50%;left:50%;margin-top:-22px;margin-left:-22px;display:none;-webkit-animation:none;animation:none;z-index:999999;transition:.2s all;transform:scale(0);color:red;display:-webkit-box;display:-ms-flexbox;display:flex}.arcontactus-widget .callback-state.display-flex{transform:scale(1)}.arcontactus-widget .callback-state svg{width:24px;height:24px;position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-12px}.arcontactus-widget .callback-state .callback-state-img{position:absolute;top:12px;left:12px}.arcontactus-widget .animation-pause{-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes arcontactus-pulse{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}50%{opacity:.5}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.donglienhe{background:#f57224;color:#fff;display:block;padding:85px 5px !important;text-align:center;height: 270px;border-radius: 7px 0px 0px 7px;}.donglienhe span{float:right}#arcontactus{width:100% !important}.messangers-block{padding:0 !important}.donglienhe span{float:right;margin-right:10px}}.sd-content ul{list-style:none;display:flex;justify-content:flex-end;margin-bottom:15px}.sd-content ul li{margin:0 5px;list-style:none !important}.sd-content ul li a.sd-button{text-decoration:none !important;display:inline-block;font-size:23px;font-weight:400;border-radius:3px;color:#777 !important;background:#f8f8f8;border:1px solid #ccc;box-shadow:0;text-shadow:none;line-height:22px;padding:1px 8px 0 5px;border:none;vertical-align:top;margin:-3px;background:0 0}

Bước 3: Add JS code, đặt tên bất kỳ rồi lưu lại

JS CODE 02

var so = 0; window.addEventListener("load", function() { jQuery('.arcontactus-message-button').click(function() { if (!jQuery('#arcontactus').hasClass('open')) { jQuery('.messangers-block').addClass('show-messageners-block'); jQuery('.arcontactus-close').addClass('show-messageners-block'); jQuery('#arcontactus').addClass('open'); so = 6; jQuery('#arcontactus .icons').addClass('hide'); jQuery('#arcontactus .static').addClass('hide') } else { jQuery('.messangers-block').removeClass('show-messageners-block'); jQuery('.arcontactus-close').removeClass('show-messageners-block'); jQuery('#arcontactus').removeClass('open'); jQuery('#arcontactus .static').removeClass('hide'); so = 0 } }); jQuery('.donglienhe span').click(function() { jQuery('.messangers-block').removeClass('show-messageners-block'); jQuery('.arcontactus-close').removeClass('show-messageners-block'); jQuery('#arcontactus').removeClass('open'); jQuery('#arcontactus .static').removeClass('hide'); so = 0 }); var arr = ['-2', '-66', '-130', '-194']; var thanh = setInterval(function() { if (so < 4) { jQuery('#arcontactus .icons').removeClass('hide'); jQuery('#arcontactus .static').addClass('hide'); jQuery('#arcontactus .icons-line').css('transform', 'translate(' + arr[so] + 'px)'); so = so + 1 } else { if (so == 4) { jQuery('#arcontactus .icons').addClass('hide'); jQuery('#arcontactus .static').removeClass('hide'); so = 0 } } }, 2000) })

Bước 4: copy toàn bộ code bên dưới dán vào FOOTER SCRIPTS

CODE 02

<div class='arcontactus-widget arcontactus-message left lg active' id='arcontactus' style='width: 70px; height: 70px;'> <div class='messangers-block arcuAnimated lg'> <div class='messangers-list-container'> <ul class='messangers-list rounded-items'> <li class='donglienhe'>Liên Hệ Tư Vấn <span><i class='far fa-times-circle'/></span> </li>
<!--button Gọi ngay-->
<li><a class='messanger msg-item-phone' href='tel:+84123456789' id='msg-item-11' rel='nofollow noopener' target='_blank'><span style='background-color:#3EB891'> <svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'> <path d='M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z' fill='currentColor'/> </svg> </span><div class='arcu-item-label'><div class='arcu-item-title'>Gọi ngay</div><div class='arcu-item-subtitle'>0123456789</div></div> </a> </li>
<!--button Zalo-->
<li><a class='messanger msg-item-zalo' href='https://zalo.me/012346789' id='msg-item-10' rel='nofollow noopener' target='_blank'><span style='background-color:#008FE5'> <svg viewBox='0 0 460.1 436.6' xmlns='http://www.w3.org/2000/svg'> <path class='st0' d='M82.6 380.9c-1.8-.8-3.1-1.7-1-3.5 1.3-1 2.7-1.9 4.1-2.8 13.1-8.5 25.4-17.8 33.5-31.5 6.8-11.4 5.7-18.1-2.8-26.5C69 269.2 48.2 212.5 58.6 145.5 64.5 107.7 81.8 75 107 46.6c15.2-17.2 33.3-31.1 53.1-42.7 1.2-.7 2.9-.9 3.1-2.7-.4-1-1.1-.7-1.7-.7-33.7 0-67.4-.7-101 .2C28.3 1.7.5 26.6.6 62.3c.2 104.3 0 208.6 0 313 0 32.4 24.7 59.5 57 60.7 27.3 1.1 54.6.2 82 .1 2 .1 4 .2 6 .2H290c36 0 72 .2 108 0 33.4 0 60.5-27 60.5-60.3v-.6-58.5c0-1.4.5-2.9-.4-4.4-1.8.1-2.5 1.6-3.5 2.6-19.4 19.5-42.3 35.2-67.4 46.3-61.5 27.1-124.1 29-187.6 7.2-5.5-2-11.5-2.2-17.2-.8-8.4 2.1-16.7 4.6-25 7.1-24.4 7.6-49.3 11-74.8 6zm72.5-168.5c1.7-2.2 2.6-3.5 3.6-4.8 13.1-16.6 26.2-33.2 39.3-49.9 3.8-4.8 7.6-9.7 10-15.5 2.8-6.6-.2-12.8-7-15.2-3-.9-6.2-1.3-9.4-1.1-17.8-.1-35.7-.1-53.5 0-2.5 0-5 .3-7.4.9-5.6 1.4-9 7.1-7.6 12.8 1 3.8 4 6.8 7.8 7.7 2.4.6 4.9.9 7.4.8 10.8.1 21.7 0 32.5.1 1.2 0 2.7-.8 3.6 1-.9 1.2-1.8 2.4-2.7 3.5-15.5 19.6-30.9 39.3-46.4 58.9-3.8 4.9-5.8 10.3-3 16.3s8.5 7.1 14.3 7.5c4.6.3 9.3.1 14 .1 16.2 0 32.3.1 48.5-.1 8.6-.1 13.2-5.3 12.3-13.3-.7-6.3-5-9.6-13-9.7-14.1-.1-28.2 0-43.3 0zm116-52.6c-12.5-10.9-26.3-11.6-39.8-3.6-16.4 9.6-22.4 25.3-20.4 43.5 1.9 17 9.3 30.9 27.1 36.6 11.1 3.6 21.4 2.3 30.5-5.1 2.4-1.9 3.1-1.5 4.8.6 3.3 4.2 9 5.8 14 3.9 5-1.5 8.3-6.1 8.3-11.3.1-20 .2-40 0-60-.1-8-7.6-13.1-15.4-11.5-4.3.9-6.7 3.8-9.1 6.9zm69.3 37.1c-.4 25 20.3 43.9 46.3 41.3 23.9-2.4 39.4-20.3 38.6-45.6-.8-25-19.4-42.1-44.9-41.3-23.9.7-40.8 19.9-40 45.6zm-8.8-19.9c0-15.7.1-31.3 0-47 0-8-5.1-13-12.7-12.9-7.4.1-12.3 5.1-12.4 12.8-.1 4.7 0 9.3 0 14v79.5c0 6.2 3.8 11.6 8.8 12.9 6.9 1.9 14-2.2 15.8-9.1.3-1.2.5-2.4.4-3.7.2-15.5.1-31 .1-46.5z' fill='currentColor'/> </svg> </span><div class='arcu-item-label'><div class='arcu-item-title'>Chat Zalo</div><div class='arcu-item-subtitle'>0123456789</div></div> </a> </li>
<!--button Messages-->
<li><a class='messanger msg-item-facebook-messenger' href='https://m.me/NTLRUBYfanpage' id='msg-item-1' rel='nofollow noopener' target='_blank'><span style='background-color:#3B5998'> <svg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'> <path d='M224 32C15.9 32-77.5 278 84.6 400.6V480l75.7-42c142.2 39.8 285.4-59.9 285.4-198.7C445.8 124.8 346.5 32 224 32zm23.4 278.1L190 250.5 79.6 311.6l121.1-128.5 57.4 59.6 110.4-61.1-121.1 128.5z' fill='currentColor'/> </svg> </span><div class='arcu-item-label'><div class='arcu-item-title'>Messenger</div><div class='arcu-item-subtitle'>Nhắn tin qua Facebook</div></div> </a> </li>
<!--button Email-->
<li><a class='messanger msg-item-viber' href='mailto:ntlrubymail@gmail.com' id='msg-item-3' rel='nofollow noopener' target='_blank'><span style='background-color:#848484'> <svg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'><path d='M40 8H8c-2.21 0-3.98 1.79-3.98 4L4 36c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm0 28H8V16l16 10 16-10v20zM24 22L8 12h32L24 22z' fill='#fff'/></svg> </span><div class='arcu-item-label'><div class='arcu-item-title'>Gửi Mail</div><div class='arcu-item-subtitle'>ntlrubymail@gmail.com</div></div> </a> </li>
<!--button Viber-->
<li><a class='messanger msg-item-viber' href='viber://chat?number=%2B84930611340' id='msg-item-3' rel='nofollow noopener' target='_blank'><span style='background-color:#812379'> <svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'> <path d='M444 49.9C431.3 38.2 379.9.9 265.3.4c0 0-135.1-8.1-200.9 52.3C27.8 89.3 14.9 143 13.5 209.5c-1.4 66.5-3.1 191.1 117 224.9h.1l-.1 51.6s-.8 20.9 13 25.1c16.6 5.2 26.4-10.7 42.3-27.8 8.7-9.4 20.7-23.2 29.8-33.7 82.2 6.9 145.3-8.9 152.5-11.2 16.6-5.4 110.5-17.4 125.7-142 15.8-128.6-7.6-209.8-49.8-246.5zM457.9 287c-12.9 104-89 110.6-103 115.1-6 1.9-61.5 15.7-131.2 11.2 0 0-52 62.7-68.2 79-5.3 5.3-11.1 4.8-11-5.7 0-6.9.4-85.7.4-85.7-.1 0-.1 0 0 0-101.8-28.2-95.8-134.3-94.7-189.8 1.1-55.5 11.6-101 42.6-131.6 55.7-50.5 170.4-43 170.4-43 96.9.4 143.3 29.6 154.1 39.4 35.7 30.6 53.9 103.8 40.6 211.1zm-139-80.8c.4 8.6-12.5 9.2-12.9.6-1.1-22-11.4-32.7-32.6-33.9-8.6-.5-7.8-13.4.7-12.9 27.9 1.5 43.4 17.5 44.8 46.2zm20.3 11.3c1-42.4-25.5-75.6-75.8-79.3-8.5-.6-7.6-13.5.9-12.9 58 4.2 88.9 44.1 87.8 92.5-.1 8.6-13.1 8.2-12.9-.3zm47 13.4c.1 8.6-12.9 8.7-12.9.1-.6-81.5-54.9-125.9-120.8-126.4-8.5-.1-8.5-12.9 0-12.9 73.7.5 133 51.4 133.7 139.2zM374.9 329v.2c-10.8 19-31 40-51.8 33.3l-.2-.3c-21.1-5.9-70.8-31.5-102.2-56.5-16.2-12.8-31-27.9-42.4-42.4-10.3-12.9-20.7-28.2-30.8-46.6-21.3-38.5-26-55.7-26-55.7-6.7-20.8 14.2-41 33.3-51.8h.2c9.2-4.8 18-3.2 23.9 3.9 0 0 12.4 14.8 17.7 22.1 5 6.8 11.7 17.7 15.2 23.8 6.1 10.9 2.3 22-3.7 26.6l-12 9.6c-6.1 4.9-5.3 14-5.3 14s17.8 67.3 84.3 84.3c0 0 9.1.8 14-5.3l9.6-12c4.6-6 15.7-9.8 26.6-3.7 14.7 8.3 33.4 21.2 45.8 32.9 7 5.7 8.6 14.4 3.8 23.6z' fill='currentColor'/> </svg> </span><div class='arcu-item-label'><div class='arcu-item-title'>Liên hệ Viber</div><div class='arcu-item-subtitle'>Gọi hoặc nhắn tin Viber</div></div> </a> </li>
</ul></div> </div>
<div class='arcontactus-message-button' style='background-color: #F57224'> <div class='static'> <svg viewBox='0 0 576 512' xmlns='http://www.w3.org/2000/svg'> <path d='M416 192c0-88.4-93.1-160-208-160S0 103.6 0 192c0 34.3 14.1 65.9 38 92-13.4 30.2-35.5 54.2-35.8 54.5-2.2 2.3-2.8 5.7-1.5 8.7S4.8 352 8 352c36.6 0 66.9-12.3 88.7-25 32.2 15.7 70.3 25 111.3 25 114.9 0 208-71.6 208-160zm122 220c23.9-26 38-57.7 38-92 0-66.9-53.5-124.2-129.3-148.1.9 6.6 1.3 13.3 1.3 20.1 0 105.9-107.7 192-240 192-10.8 0-21.3-.8-31.7-1.9C207.8 439.6 281.8 480 368 480c41 0 79.1-9.2 111.3-25 21.8 12.7 52.1 25 88.7 25 3.2 0 6.1-1.9 7.3-4.8 1.3-2.9.7-6.3-1.5-8.7-.3-.3-22.4-24.2-35.8-54.5z' fill='currentColor'/> </svg> <p>Liên hệ</p> </div> <div class='callback-state' style='color: #F57224'> <svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'> <path d='M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z' fill='currentColor'/> </svg> </div> <div class='icons hide'> <div class='icons-line'><span style='color: #F57224'> <svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'> <path d='M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z' fill='currentColor'/> </svg> </span><span style='color: #F57224'> <svg viewBox='0 0 460.1 436.6' xmlns='http://www.w3.org/2000/svg'> <path class='st0' d='M82.6 380.9c-1.8-.8-3.1-1.7-1-3.5 1.3-1 2.7-1.9 4.1-2.8 13.1-8.5 25.4-17.8 33.5-31.5 6.8-11.4 5.7-18.1-2.8-26.5C69 269.2 48.2 212.5 58.6 145.5 64.5 107.7 81.8 75 107 46.6c15.2-17.2 33.3-31.1 53.1-42.7 1.2-.7 2.9-.9 3.1-2.7-.4-1-1.1-.7-1.7-.7-33.7 0-67.4-.7-101 .2C28.3 1.7.5 26.6.6 62.3c.2 104.3 0 208.6 0 313 0 32.4 24.7 59.5 57 60.7 27.3 1.1 54.6.2 82 .1 2 .1 4 .2 6 .2H290c36 0 72 .2 108 0 33.4 0 60.5-27 60.5-60.3v-.6-58.5c0-1.4.5-2.9-.4-4.4-1.8.1-2.5 1.6-3.5 2.6-19.4 19.5-42.3 35.2-67.4 46.3-61.5 27.1-124.1 29-187.6 7.2-5.5-2-11.5-2.2-17.2-.8-8.4 2.1-16.7 4.6-25 7.1-24.4 7.6-49.3 11-74.8 6zm72.5-168.5c1.7-2.2 2.6-3.5 3.6-4.8 13.1-16.6 26.2-33.2 39.3-49.9 3.8-4.8 7.6-9.7 10-15.5 2.8-6.6-.2-12.8-7-15.2-3-.9-6.2-1.3-9.4-1.1-17.8-.1-35.7-.1-53.5 0-2.5 0-5 .3-7.4.9-5.6 1.4-9 7.1-7.6 12.8 1 3.8 4 6.8 7.8 7.7 2.4.6 4.9.9 7.4.8 10.8.1 21.7 0 32.5.1 1.2 0 2.7-.8 3.6 1-.9 1.2-1.8 2.4-2.7 3.5-15.5 19.6-30.9 39.3-46.4 58.9-3.8 4.9-5.8 10.3-3 16.3s8.5 7.1 14.3 7.5c4.6.3 9.3.1 14 .1 16.2 0 32.3.1 48.5-.1 8.6-.1 13.2-5.3 12.3-13.3-.7-6.3-5-9.6-13-9.7-14.1-.1-28.2 0-43.3 0zm116-52.6c-12.5-10.9-26.3-11.6-39.8-3.6-16.4 9.6-22.4 25.3-20.4 43.5 1.9 17 9.3 30.9 27.1 36.6 11.1 3.6 21.4 2.3 30.5-5.1 2.4-1.9 3.1-1.5 4.8.6 3.3 4.2 9 5.8 14 3.9 5-1.5 8.3-6.1 8.3-11.3.1-20 .2-40 0-60-.1-8-7.6-13.1-15.4-11.5-4.3.9-6.7 3.8-9.1 6.9zm69.3 37.1c-.4 25 20.3 43.9 46.3 41.3 23.9-2.4 39.4-20.3 38.6-45.6-.8-25-19.4-42.1-44.9-41.3-23.9.7-40.8 19.9-40 45.6zm-8.8-19.9c0-15.7.1-31.3 0-47 0-8-5.1-13-12.7-12.9-7.4.1-12.3 5.1-12.4 12.8-.1 4.7 0 9.3 0 14v79.5c0 6.2 3.8 11.6 8.8 12.9 6.9 1.9 14-2.2 15.8-9.1.3-1.2.5-2.4.4-3.7.2-15.5.1-31 .1-46.5z' fill='currentColor'/> </svg> </span><span style='color: #F57224'> <svg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'> <path d='M224 32C15.9 32-77.5 278 84.6 400.6V480l75.7-42c142.2 39.8 285.4-59.9 285.4-198.7C445.8 124.8 346.5 32 224 32zm23.4 278.1L190 250.5 79.6 311.6l121.1-128.5 57.4 59.6 110.4-61.1-121.1 128.5z' fill='currentColor'/> </svg> </span><span style='color: #F57224'> <svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'> <path d='M444 49.9C431.3 38.2 379.9.9 265.3.4c0 0-135.1-8.1-200.9 52.3C27.8 89.3 14.9 143 13.5 209.5c-1.4 66.5-3.1 191.1 117 224.9h.1l-.1 51.6s-.8 20.9 13 25.1c16.6 5.2 26.4-10.7 42.3-27.8 8.7-9.4 20.7-23.2 29.8-33.7 82.2 6.9 145.3-8.9 152.5-11.2 16.6-5.4 110.5-17.4 125.7-142 15.8-128.6-7.6-209.8-49.8-246.5zM457.9 287c-12.9 104-89 110.6-103 115.1-6 1.9-61.5 15.7-131.2 11.2 0 0-52 62.7-68.2 79-5.3 5.3-11.1 4.8-11-5.7 0-6.9.4-85.7.4-85.7-.1 0-.1 0 0 0-101.8-28.2-95.8-134.3-94.7-189.8 1.1-55.5 11.6-101 42.6-131.6 55.7-50.5 170.4-43 170.4-43 96.9.4 143.3 29.6 154.1 39.4 35.7 30.6 53.9 103.8 40.6 211.1zm-139-80.8c.4 8.6-12.5 9.2-12.9.6-1.1-22-11.4-32.7-32.6-33.9-8.6-.5-7.8-13.4.7-12.9 27.9 1.5 43.4 17.5 44.8 46.2zm20.3 11.3c1-42.4-25.5-75.6-75.8-79.3-8.5-.6-7.6-13.5.9-12.9 58 4.2 88.9 44.1 87.8 92.5-.1 8.6-13.1 8.2-12.9-.3zm47 13.4c.1 8.6-12.9 8.7-12.9.1-.6-81.5-54.9-125.9-120.8-126.4-8.5-.1-8.5-12.9 0-12.9 73.7.5 133 51.4 133.7 139.2zM374.9 329v.2c-10.8 19-31 40-51.8 33.3l-.2-.3c-21.1-5.9-70.8-31.5-102.2-56.5-16.2-12.8-31-27.9-42.4-42.4-10.3-12.9-20.7-28.2-30.8-46.6-21.3-38.5-26-55.7-26-55.7-6.7-20.8 14.2-41 33.3-51.8h.2c9.2-4.8 18-3.2 23.9 3.9 0 0 12.4 14.8 17.7 22.1 5 6.8 11.7 17.7 15.2 23.8 6.1 10.9 2.3 22-3.7 26.6l-12 9.6c-6.1 4.9-5.3 14-5.3 14s17.8 67.3 84.3 84.3c0 0 9.1.8 14-5.3l9.6-12c4.6-6 15.7-9.8 26.6-3.7 14.7 8.3 33.4 21.2 45.8 32.9 7 5.7 8.6 14.4 3.8 23.6z' fill='currentColor'/> </svg> </span> </div> </div> <div class='arcontactus-close'> <svg height='13' version='1.1' viewBox='0 0 14 14' width='12' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g id='Canvas' transform='translate(-4087 108)'> <g id='Vector'> <use fill='currentColor' transform='translate(4087 -108)' xlink:href='#path0_fill'/> </g> </g> <defs> <path d='M 14 1.41L 12.59 0L 7 5.59L 1.41 0L 0 1.41L 5.59 7L 0 12.59L 1.41 14L 7 8.41L 12.59 14L 14 12.59L 8.41 7L 14 1.41Z' id='path0_fill'/> </defs> </svg> </div> <div class='pulsation' style='background-color: #F57224'/> <div class='pulsation' style='background-color: #F57224'/></div> <div class='arcontactus-prompt arcu-prompt-top'> <div class='arcontactus-prompt-close' style='background-color: #F57224; color: #FFFFFF'> <svg height='13' version='1.1' viewBox='0 0 14 14' width='12' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g id='Canvas' transform='translate(-4087 108)'> <g id='Vector'> <use fill='currentColor' transform='translate(4087 -108)' xlink:href='#path0_fill'/> </g> </g> <defs> <path d='M 14 1.41L 12.59 0L 7 5.59L 1.41 0L 0 1.41L 5.59 7L 0 12.59L 1.41 14L 7 8.41L 12.59 14L 14 12.59L 8.41 7L 14 1.41Z' id='path0_fill'/> </defs> </svg> </div> <div class='arcontactus-prompt-inner'/></div> </div>

 

Nếu các phần nào các bạn muốn lượn bỏ thì xóa trong code đi nhé. Các nút tương ứng với các đoạn code button bôi xanh.

Thay SDT hoặc link của các bạn tương ứng với các đoạn code màu cam nhé

Nếu thiếu thư viện jquery.min.js không chạy được, các bạn có thể thêm đoạn mã thư viện sau ngay bên dưới đoạn CODE02 bên trên

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Admin