6 mẫu nút liên hệ tích hợp đẹp cho Blogspot - NTLRUBY -->
6 mẫu nút liên hệ tích hợp đẹp cho Blogspot 6 mẫu nút liên hệ tích hợp đẹp cho Blogspot
  • 6 mẫu nút liên hệ tích hợp đẹp cho Blogspot

       Nút liên hệ trên một website là công cụ chính giúp khách hàng liên lạc với các bạn dễ dàng hơn. Chắc chắn lượt liên hệ đến từ các button liên hệ này sẽ nhiều hơn so với một trang liên hệ tĩnh. Vì vậy các bạn cần phải làm đẹp các nút liên hệ này và tạo sự chú ý nhất định cho người xem.
       Tuy nhiên khi các bạn có nhiều phương thức liên hệ như:

     "Goi ngay"

     "Chát Zalo"

     "Messenger"

    và nhiều hơn nữa, thì các bạn có thể tích hợp chúng lại thành một. Việc tích hợp các nút liên hệ này vừa giúp trang Web của các bạn chuyên nghiệp hơn, vừa không bị rối bố cục khi phải thêm nhiều nút.
    thủ thuật blogspot

       Bài này mình chia sẻ với các bạn 6 mẫu nút liên hệ tích hợp đẹp cho Blogspot, mà mình sưu tập được nhé.
    ***Lưu ý: Từ mẫu 1 đến mẫu 4 đều có thư viện jquery.min.js trong code. Nếu template của các bạn đã có hãy xóa bỏ link trong code đi để tránh bị xung đột.

    Mẫu 1:

    Xem demo bên dưới hoặc xem
       Code:
    Sử dụng mẫu này, các bạn copy toàn bộ code bên dưới dán vào trước thẻ </body>.

    <script type='text/javascript'>

    //<![CDATA[

    var _widget_settings = {

      positions: 'bottom right',

      support: {

        staff: {

          name: 'Minh Nguyệt',

          image: 'https://1.bp.blogspot.com/-mvLtT-Kn4t0/X4XL74DjrgI/AAAAAAAAV_w/4wcvvKhZXaMPOtVP1y9z9wYE-CmeZ1MywCLcBGAsYHQ/s100/lien-he-1.jpg',

          messages: 'Không biết em có thể hỗ trợ gì cho anh/chị không ạ?'

        }

      },

      buttons: {

        contact: {

          visible: 'true',

          id: 'https://www.ntlruby.com/p/lien-he.html',

          messages: 'Liên hệ'

        },

        email: {

          visible: 'true',

          id: '[email protected]',

          messages: 'Gửi email'

        },

        call: {

          visible: 'true',

          id: '0900123456',

          messages: 'Gọi điện'

        },

        sms: {

          visible: 'true',

          id: '0900123456',

          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: '0900123456',

          messages: 'Chat Zalo'

        },

        facebook: {

          visible: 'true',

          id: 'NTLRUBYfanpage',

          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 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é.

    Mẫu 2:

    Xem demo bên dưới hoặc xem
       Code:
    Sử dụng mẫu này, các bạn copy toàn bộ code bên dưới dán vào trước thẻ </body>.

    <link href='https://dl.dropboxusercontent.com/s/jt0oykguxpwx4i1/Lien-he-tich-hop-cam.css' rel='stylesheet'/>

    <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:[email protected]' 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'>[email protected]</div></div> </a> </li>

    <!--button Viber-->

    <li><a class='messanger msg-item-viber' href='viber://chat?number=%2B84900900123' 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>

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

    <script src='https://dl.dropboxusercontent.com/s/2wczungj2r04yio/Lien-he-tich-hop-cam.js' type='text/javascript'/>

       Trong code mình đã tách các button ra cho các bạn dễ nhìn, button nào cần thì để, không có thể xóa bỏ đi nhé. Và nhớ thay các thông tin của các bạn vào những chỗ tô vàng.
    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é.

    Mẫu 3:

    Xem demo bên dưới hoặc xem
       Code:
    Sử dụng mẫu này, các bạn copy toàn bộ code bên dưới dán vào trước thẻ </body>.

    <!--Contact Button Widget-->

    <link href='https://vietblogdao.github.io/css/contact-button-widget.css' rel='stylesheet'/>

    <div class='wh-widget-send-button-desktop'>

      <div class='wh-widget-send-button-wrapper wh-widget-right'>

        <div class='wh-widget-hello-popup-wrapper wh-popup-right wh-hide popup-slide popup-slide-in'>

          <div class='wh-widget-hello-popup'>

            <div class='wh-widget-hello-popup-close'>

              <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

                <path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'></path>

                <path d='M0 0h24v24H0z' fill='none'></path>

              </svg>

            </div>

          </div>

        </div>

        <div class='wh-animation-in' id='wh-call-to-action' style='top: 29px;'>

          <a href='javascript:void(0)' title=''>

            <div class='wh-call-to-action-content'>Liên hệ hỗ trợ 24/7</div>

          </a>

        </div>

        <div class='wh-widget-send-button-wrapper-list'>

          <!--Facebook-->

    <a class='wh-widget-button button-slide-out' href='#' rel='noopener nofollow' target='_blank' title=''>

      <div class='wh-widget-button-icon wh-messenger-bg-facebook'>

        <div>

          <svg class='wh-messenger-svg-facebook wh-svg-icon' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>

            <path d=' M16 6C9.925 6 5 10.56 5 16.185c0 3.205 1.6 6.065 4.1 7.932V28l3.745-2.056c1 .277 2.058.426 3.155.426 6.075 0 11-4.56 11-10.185C27 10.56 22.075 6 16 6zm1.093 13.716l-2.8-2.988-5.467 2.988 6.013-6.383 2.868 2.988 5.398-2.987-6.013 6.383z' fill-rule='evenodd'></path>

          </svg>

        </div>

      </div>

      <div class='mes-us'>Facebook Messenger</div>

      <div class='clear'></div>

    </a>

     

    <!-- Zalo-->

    <a class='wh-widget-button button-slide-out' href='#' rel='noopener nofollow' target='_blank' title=''>

      <div class='wh-widget-button-icon wh-messenger-bg-zalo'>

        <div>

          <svg class='wh-messenger-svg-zalo wh-svg-icon' viewBox='0 0 97.4 87.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>

            <path d='M78.4,42c-1.4,0-2.4,0.6-3.2,1.7c-0.7,1-1,2.2-1,3.7c0,1.5,0.3,2.7,1,3.7c0.8,1.2,1.8,1.7,3.2,1.7 c1.4,0,2.5-0.6,3.2-1.7c0.7-1,1-2.2,1-3.7c0-1.4-0.3-2.6-1-3.6C80.8,42.6,79.7,42,78.4,42z' fill-rule='evenodd'></path>

            <path d='M48.8,0C21.9,0,0,19.5,0,43.6c0,11.9,5.4,22.7,14,30.6c2.2,2-5.4,10.5-9,11.3c10.4,2.9,20.7-3.4,23.2-2.4 c6.2,2.6,13.2,4,20.5,4c26.9,0,48.7-19.5,48.7-43.6C97.5,19.5,75.7,0,48.8,0z M27.8,58.2H14.6c-3.1,0-4.6-1.1-4.6-3.3 c0-1,0.6-2.4,1.8-4l11.8-15.6h-8.5c-3.1,0-4.7-1-4.7-3c0-2,1.6-3,4.7-3h11.2c3.8,0,5.7,1.1,5.7,3.2c0,1-0.6,2.3-1.9,4L18.5,52.2 h9.3c3.1,0,4.7,1,4.7,3C32.5,57.2,30.9,58.2,27.8,58.2z M54.9,53.8c0,3.1-1.1,4.7-3.2,4.7c-1.4,0-2.4-0.7-3.1-2.2 c-1.3,1.6-3.1,2.4-5.4,2.4c-2.9,0-5.3-1.2-7.2-3.5c-1.7-2.2-2.5-4.8-2.5-7.8c0-3,0.9-5.6,2.7-7.8c1.9-2.3,4.3-3.5,7.3-3.5 c2.2,0,3.9,0.8,5.1,2.3c0.7-1.4,1.8-2,3.1-2c2.1,0,3.2,1.5,3.2,4.6V53.8z M64.7,53.8c0,3.1-1.1,4.7-3.2,4.7c-2.1,0-3.2-1.6-3.2-4.7 V31.9c0-3.1,1.1-4.7,3.2-4.7c2.1,0,3.2,1.6,3.2,4.7V53.8z M78.4,58.9c-3.2,0-5.9-1.1-7.9-3.3c-2-2.2-3-4.9-3-8.1s1-6,3-8.1 c2-2.2,4.7-3.3,7.9-3.3c3.3,0,5.9,1.1,7.9,3.3c1.9,2.1,2.9,4.9,2.9,8.1s-1,6-2.9,8.1C84.2,57.8,81.6,58.9,78.4,58.9z' fill-rule='evenodd'></path>

            <path d='M44.4,42.2c-1.3,0-2.4,0.5-3.1,1.6c-0.7,1-1,2.1-1,3.5c0,1.4,0.3,2.6,1,3.6c0.8,1.1,1.8,1.7,3.2,1.7 c1.3,0,2.4-0.6,3.1-1.7c0.6-1,1-2.2,1-3.6c0-1.4-0.3-2.5-1-3.5C46.7,42.8,45.7,42.2,44.4,42.2z' fill-rule='evenodd'></path>

          </svg>

        </div>

      </div>

      <div class='mes-us'>Zalo Chat</div>

      <div class='clear'></div>

    </a>

     

    <!--Viber-->

    <a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>

      <div class='wh-widget-button-icon wh-messenger-bg-viber'>

        <div>

          <svg class='wh-messenger-icon wh-messenger-bg-viber' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>

            <path d=' M21.176 27c-.208-.062-.618-.13-.987-.303-6.476-3.02-11.18-7.972-13.853-15.082-.897-2.383.04-4.396 2.298-5.22.405-.147.802-.157 1.2.002.964.383 3.404 4.022 3.458 5.11.042.835-.48 1.287-1 1.67-.983.722-.988 1.638-.568 2.66.948 2.308 2.567 3.895 4.663 4.925.76.374 1.488.337 2.007-.515.925-1.518 2.06-1.445 3.3-.502.62.473 1.253.936 1.844 1.45.8.702 1.816 1.285 1.336 2.754-.5 1.527-2.226 3.066-3.7 3.05zm-4.76-20.986c4.546.166 8.46 4.677 8.406 9.543-.005.478.153 1.185-.504 1.172-.628-.015-.464-.733-.52-1.21-.603-5.167-2.786-7.606-7.52-8.394-.392-.066-.99.026-.96-.535.044-.833.754-.523 1.097-.576zm6.072 8.672c-.045.356.147.968-.385 1.056-.72.118-.58-.595-.65-1.053-.48-3.144-1.5-4.297-4.423-5.005-.43-.105-1.1-.032-.99-.75.108-.685.71-.452 1.164-.393 2.92.38 5.307 3.126 5.284 6.144zm-2.222-.573c.013.398-.026.818-.46.874-.314.04-.52-.245-.553-.597-.12-1.296-.75-2.062-1.95-2.27-.36-.063-.712-.19-.544-.715.11-.352.408-.387.712-.396 1.297-.036 2.815 1.647 2.794 3.103z' fill-rule='evenodd'></path>

          </svg>

        </div>

      </div>

      <div class='mes-us'>Call Viber</div>

      <div class='clear'></div>

    </a>

     

    <!--Phone-->

    <a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>

      <div class='wh-widget-button-icon wh-messenger-bg-call'>

        <div>

          <svg class="wh-messenger-icon wh-messenger-bg-call" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-72 -72 704 704">

            <path d=" M166.156,512h-41.531c-7.375-0.031-20.563-8.563-20.938-8.906C37.438,437.969,0,348.906,0,255.938 C0,162.719,37.656,73.375,104.281,8.219C104.313,8.188,117.25,0,124.625,0h41.531c15.219,0,33.25,11.125,40.063,24.781l2.906,5.844 c6.781,13.594,6.188,35.563-1.344,48.75l-27.906,48.813c-7.563,13.219-26.188,24.25-41.406,24.25H110.75 c-36.813,64-36.813,143.094-0.031,207.125h27.75c15.219,0,33.844,11.031,41.406,24.25l27.875,48.813 c7.531,13.188,8.156,35.094,1.375,48.781l-2.906,5.844C199.375,500.844,181.375,512,166.156,512z M512,128v256 c0,35.344-28.656,64-64,64H244.688c-1.25-11.219-3.969-22.156-9.156-31.25l-27.875-48.813 c-13.406-23.406-42.469-40.375-69.188-40.375h-8.156c-20.188-45.438-20.188-97.719,0-143.125h8.156 c26.719,0,55.781-16.969,69.188-40.375l27.906-48.813c5.188-9.094,7.906-20.063,9.156-31.25H448C483.344,64,512,92.656,512,128z M328,368c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S328,381.25,328,368z M328,304c0-13.25-10.75-24-24-24 s-24,10.75-24,24s10.75,24,24,24S328,317.25,328,304z M328,240c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24 S328,253.25,328,240z M392,368c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S392,381.25,392,368z M392,304 c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S392,317.25,392,304z M392,240c0-13.25-10.75-24-24-24s-24,10.75-24,24 s10.75,24,24,24S392,253.25,392,240z M456,368c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S456,381.25,456,368z M456,304 c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S456,317.25,456,304z M456,240c0-13.25-10.75-24-24-24s-24,10.75-24,24 s10.75,24,24,24S456,253.25,456,240z M456,144c0-8.844-7.156-16-16-16H296c-8.844,0-16,7.156-16,16v32c0,8.844,7.156,16,16,16h144 c8.844,0,16-7.156,16-16V144z" fill-rule="evenodd"></path>

          </svg>

        </div>

      </div>

      <div class='mes-us'>Call now</div>

      <div class='clear'></div>

    </a>

     

    <!--SMS-->

    <a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>

      <div class='wh-widget-button-icon wh-messenger-bg-sms'>

        <div>

          <svg class='wh-messenger-icon wh-messenger-bg-sms' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>

            <path d='M21 23h4.01c1.1 0 1.99-.893 1.99-1.994V8.994C27 7.894 26.11 7 25.01 7H6.99C5.89 7 5 7.893 5 8.994v12.012C5 22.106 5.89 23 6.99 23h9.566l3.114 3.504c.73.82 1.33.602 1.33-.5V23zM10.515 12.165c.36.11.682.26.962.446l-.413.88a3.882 3.882 0 0 0-.915-.416 2.9 2.9 0 0 0-.82-.136c-.3 0-.536.054-.707.16a.512.512 0 0 0-.256.46c0 .173.055.32.167.437.11.12.252.214.42.285.17.072.408.152.714.24.4.12.725.236.977.35.252.117.467.29.644.518.177.228.266.526.266.892 0 .344-.095.647-.285.907-.19.26-.453.46-.79.6-.338.14-.724.212-1.16.212-.45 0-.888-.086-1.31-.255a3.673 3.673 0 0 1-1.11-.684l.434-.863c.3.276.628.49.985.64.356.15.695.224 1.017.224.35 0 .622-.063.816-.19a.598.598 0 0 0 .292-.528.618.618 0 0 0-.174-.45 1.212 1.212 0 0 0-.43-.28 9.65 9.65 0 0 0-.713-.237 7.414 7.414 0 0 1-.977-.347 1.75 1.75 0 0 1-.637-.498c-.177-.22-.266-.51-.266-.877 0-.334.09-.625.27-.874.18-.25.434-.443.76-.578.324-.135.7-.202 1.127-.202.38 0 .75.055 1.11.165zm7.732 5.8l-.01-4.424-1.87 3.806h-.653l-1.867-3.805v4.426h-.942V12.04h1.186l1.955 3.938 1.945-3.937h1.178v5.926h-.92zm5.728-5.8c.36.11.68.26.962.446l-.413.88a3.882 3.882 0 0 0-.915-.416 2.9 2.9 0 0 0-.82-.136c-.3 0-.537.054-.707.16a.512.512 0 0 0-.257.46c0 .173.056.32.168.437.11.12.252.214.42.285.17.072.408.152.714.24.4.12.725.236.977.35.252.117.467.29.644.518.177.228.266.526.266.892 0 .344-.095.647-.285.907-.19.26-.453.46-.79.6-.338.14-.724.212-1.16.212-.45 0-.888-.086-1.31-.255a3.673 3.673 0 0 1-1.11-.684l.434-.863c.3.276.628.49.985.64.356.15.695.224 1.017.224.35 0 .622-.063.816-.19a.598.598 0 0 0 .29-.528.618.618 0 0 0-.172-.45 1.212 1.212 0 0 0-.43-.28 9.65 9.65 0 0 0-.713-.237 7.414 7.414 0 0 1-.977-.347 1.75 1.75 0 0 1-.637-.498c-.177-.22-.266-.51-.266-.877 0-.334.09-.625.27-.874.18-.25.434-.443.76-.578.324-.135.7-.202 1.126-.202.38 0 .75.055 1.112.165z' fill-rule='evenodd'></path>

          </svg>

        </div>

      </div>

      <div class='mes-us'>Send SMS</div>

      <div class='clear'></div>

    </a>

     

    <!-- Whatsapp-->

    <a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>

      <div class='wh-widget-button-icon wh-messenger-bg-whatsapp'>

        <div>

          <svg class="wh-messenger-icon wh-messenger-bg-whatsapp" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

            <path d=" M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z" fill-rule="evenodd"></path>

          </svg>

        </div>

      </div>

      <div class='mes-us'>Whatsapp</div>

      <div class='clear'></div>

    </a>

     

    <!-- Snapchat-->

    <a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>

      <div class='wh-widget-button-icon wh-messenger-bg-snapchat'>

        <div>

          <svg  class="wh-messenger-icon wh-messenger-bg-snapchat" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

            <path d=" m 254.23192,67.745656 c -24.1553,0.16536 -49.1333,6.57616 -68.7188,22.0625 -14.667,11.577654 -26.19916,26.921164 -33.46871,44.062504 -0.0109,0.0415 -0.0213,0.0832 -0.0312,0.125 -6.92358,17.66206 -6.28241,36.45908 -5.34375,53.875 4.9e-4,0.0106 -4.9e-4,0.0207 0,0.0312 0.57046,12.24111 1.9192,24.09182 0.78125,35.34375 -0.0919,0.43802 -0.096,0.54776 -0.15625,0.8125 -5.44516,0.98701 -11.372,0.62902 -17.25,-0.5 -0.0312,-2.9e-4 -0.0625,-2.9e-4 -0.0937,0 -4.02639,-0.69306 -8.32797,-2.35229 -13.1875,-3.71875 -0.0828,-0.023 -0.16615,-0.0438 -0.25,-0.0625 -4.71633,-1.07824 -9.35242,0.29501 -12.90625,2.9375 -0.0457,0.0296 -0.10985,0.0635 -0.15625,0.0937 -0.071,0.054 -0.14865,0.10124 -0.21875,0.15625 -2.89265,1.9156 -6.854978,5.13197 -7.062498,10.71875 -0.009,0.36655 0.0225,0.73407 0.0937,1.09375 0.62464,3.28299 2.64407,5.68343 4.437498,7.25 1.79342,1.56657 3.48778,2.60119 4.53125,3.40625 0.0814,0.0651 0.16474,0.12762 0.25,0.1875 8.79695,5.93514 18.53281,8.54299 27,11.84375 0.009,0.003 0.0225,-0.003 0.0312,0 5.86205,2.59731 10.95592,6.63609 12.125,11.71875 1.45977,6.42713 -1.2468,13.80558 -4.78125,20.96875 -0.004,0.009 0.004,0.0226 0,0.0312 -9.53334,18.98565 -23.69089,35.49609 -41.093748,47.59375 -9.12374,6.29511 -19.416525,10.9945 -30.156305,13.9064 -0.148149,0.0453 -0.294192,0.0974 -0.4375,0.15625 -2.20374,0.82986 -7.42924,1.37247 -10.71875,6.375 -0.233793,0.34937 -0.423282,0.72835 -0.5625,1.125 -1.10923,3.2168 0.1562,6.67058 1.71875,8.5625 1.4921,1.80662 3.15667,2.85786 4.59375,3.625 0.0735,0.043 0.1451,0.0824 0.21875,0.125 9.04276,5.22608 18.918595,7.49157 27.937505,9.8125 0.0415,0.0109 0.0832,0.0213 0.125,0.0312 6.4981,1.47977 12.488738,2.27029 17.374998,4.375 0.23923,0.40234 0.72852,2.05832 1.875,4.8125 1.60151,4.99968 2.32952,10.9037 4.1875,17.09375 0.50804,1.71342 2.00225,3.09556 3.75,3.46875 4.104,0.87193 6.36119,-0.53617 6.71875,-0.5625 0.16758,-0.0124 0.33452,-0.0333 0.5,-0.0625 15.10019,-2.6468 30.16835,-4.99383 43.99996,-1.5 0.01,0.003 0.021,-0.003 0.031,0 14.516,3.82363 27.1309,13.91446 41.3438,22.59375 0.025,0.0154 0.037,0.0471 0.062,0.0625 l 0,-0.0312 c 9.4342,5.98646 20.3393,11.8485 32.9375,12.28125 l 0,0.0312 c 0.042,10e-4 0.083,-10e-4 0.125,0 9.5155,0.53896 18.855,-0.0657 27.9687,-0.6875 0.0521,8.1e-4 0.1042,8.1e-4 0.1563,0 7.8038,-0.77302 15.3807,-3.37002 22,-7.625 0.094,-0.0535 0.1876,-0.10258 0.2812,-0.15625 14.9452,-8.56344 28.2258,-18.88234 42.7813,-25.34375 0.021,-0.008 0.042,-0.0237 0.062,-0.0312 4.7208,-1.71157 10.6189,-1.61506 17.1875,-2.0625 0.062,-0.002 0.125,0.002 0.1875,0 12.0527,-0.3721 24.1283,0.27414 36.0937,1.875 0.41448,0.0522 0.83552,0.0522 1.25,0 1.5714,-0.1864 3.2889,-1.24155 4.125,-2.3125 0.8361,-1.07095 1.077,-1.94318 1.25,-2.5625 0.3462,-1.23864 0.667,-1.83102 0.094,-0.8125 0.1817,-0.31606 0.3287,-0.65205 0.4375,-1 2.1971,-7.28002 3.3925,-13.86797 6.9375,-17.96875 1.5929,-1.55716 4.334,-2.33886 7.4375,-2.28125 0.22952,0.005 0.45941,-0.005 0.6875,-0.0312 10.4024,-1.23133 19.8052,-4.98696 28.7188,-8.1875 0.10556,-0.0382 0.20984,-0.0799 0.3126,-0.12505 3.3113,-1.44341 8.2453,-3.09963 11.625,-7.84375 0.018,-0.0254 0.044,-0.0369 0.062,-0.0625 l -0.031,-0.0312 c 2.8428,-3.9725 1.523,-9.42469 -2.5,-11.90625 l 0.062,-0.0625 c -0.1275,-0.0867 -0.2474,-0.13595 -0.375,-0.21875 -0.034,-0.0186 -0.059,-0.0444 -0.094,-0.0625 l 0,0.0312 c -4.8259,-3.10006 -9.6612,-3.53092 -12.7187,-4.65625 -0.0621,-0.0221 -0.1246,-0.0429 -0.1875,-0.0625 -20.6872,-6.63568 -38.5778,-20.92111 -51.9375,-38.3125 -7.4172,-9.69129 -13.6899,-20.22202 -17.8438,-31.46875 -0.014,-0.041 -0.018,-0.084 -0.031,-0.125 -1.6262,-4.88353 -1.7077,-10.20902 0.6875,-13.4375 0.0317,-0.0308 0.0631,-0.062 0.094,-0.0937 3.7366,-5.36839 10.5935,-8.81878 17.9063,-11.53125 0.03,-0.0104 0.064,-0.0208 0.094,-0.0312 8.0819,-2.81157 16.9263,-6.08686 24.2187,-12.5625 0.0318,-0.0308 0.0631,-0.062 0.094,-0.0937 1.1283,-1.06695 2.4852,-2.45602 3.5,-4.53125 1.0149,-2.07523 1.4961,-5.31032 0.1563,-8.125 3e-5,-0.0104 3e-5,-0.0208 0,-0.0312 -2.1044,-4.33549 -5.774,-6.5662 -8.5,-8.1875 -0.0103,-3e-5 -0.0207,-3e-5 -0.031,0 -4.5673,-2.66592 -9.8816,-2.83887 -14.5,-1.34375 -0.01,0.003 -0.021,-0.003 -0.031,0 -0.031,0.0101 -0.063,0.021 -0.094,0.0312 -4.9892,1.51835 -9.0624,3.33391 -12.8438,3.8125 -0.0839,0.0187 -0.16722,0.0395 -0.25,0.0625 -5.3737,0.95777 -10.5773,1.18779 -14.625,-0.3125 -0.038,-0.60649 -0.057,-1.79013 -0.2187,-3.25 l 0.031,0 c -0.2988,-8.9153 0.4565,-18.10604 0.5937,-27.625 3e-4,-0.0212 -3e-4,-0.0413 0,-0.0625 0.4112,-14.46318 0.9948,-29.35295 -1.125,-44.34375 -0.009,-0.0731 -0.0191,-0.14607 -0.031,-0.21875 -4.6154,-25.28753 -20.687,-47.06736 -41.0625,-61.562504 -14.8121,-10.50987 -32.3972,-16.37581 -50.25,-18.03125 -0.01,-0.001 -0.021,0.001 -0.031,0 -5.9912,-0.60487 -11.9741,-0.81945 -17.9375,-0.75 z" fill-rule="evenodd"></path>

          </svg>

        </div>

      </div>

      <div class='mes-us'>Snapchat</div>

      <div class='clear'></div>

    </a>

     

    <!--Telegram-->

    <a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>

      <div class='wh-widget-button-icon wh-messenger-bg-telegram'>

        <div>

          <svg class="wh-messenger-icon wh-messenger-bg-telegram" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">

            <path d=" M15.02 20.814l9.31-12.48L9.554 17.24l1.92 6.42c.225.63.114.88.767.88l.344-5.22 2.436 1.494z" opacity=".6" fill-rule="evenodd"></path><path d=" M12.24 24.54c.504 0 .727-.234 1.008-.51l2.687-2.655-3.35-2.054-.344 5.22z" opacity=".3" fill-rule="evenodd"></path><path d=" M12.583 19.322l8.12 6.095c.926.52 1.595.25 1.826-.874l3.304-15.825c.338-1.378-.517-2.003-1.403-1.594L5.024 14.727c-1.325.54-1.317 1.29-.24 1.625l4.98 1.58 11.53-7.39c.543-.336 1.043-.156.633.214" fill-rule="evenodd"></path>

          </svg>

        </div>

      </div>

      <div class='mes-us'>Send SMS</div>

      <div class='clear'></div>

    </a>

     

    <!--Line-->

    <a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>

      <div class='wh-widget-button-icon wh-messenger-bg-line'>

        <div>

          <svg class="wh-messenger-icon wh-messenger-bg-line" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

            <path d="M27 14.926C27 10.006 22.065 6 16 6S5 10.005 5 14.926c0 4.413 3.913 8.11 9.2 8.808.358.077.845.236.968.542.112.278.073.713.036.995l-.157.942c-.048.28-.22 1.088.953.593 1.174-.494 6.334-3.73 8.642-6.386C26.236 18.67 27 16.896 27 14.925zm-4.247-.41a.577.577 0 0 1 0 1.153h-1.61v1.03h1.61a.578.578 0 0 1 0 1.155h-2.186a.578.578 0 0 1-.577-.577v-4.37c0-.32.26-.578.577-.578h2.186a.578.578 0 0 1 0 1.153h-1.61v1.033h1.61zm-3.537 2.762a.575.575 0 0 1-.578.577.58.58 0 0 1-.46-.23l-2.24-3.05v2.703a.577.577 0 0 1-1.154 0v-4.37a.577.577 0 0 1 1.038-.347l2.24 3.05v-2.703a.578.578 0 0 1 1.154 0v4.37zm-5.26 0a.577.577 0 0 1-1.154 0v-4.37a.577.577 0 0 1 1.153 0v4.37zm-2.262.577H9.508a.577.577 0 0 1-.576-.577v-4.37a.577.577 0 0 1 1.153 0V16.7h1.61a.577.577 0 0 1 0 1.155z" fill-rule="evenodd"></path>

          </svg>

        </div>

      </div>

      <div class='mes-us'>Line</div>

      <div class='clear'></div>

    </a>

     

    <!-- Email-->

    <a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>

      <div class='wh-widget-button-icon wh-messenger-bg-email'>

        <div>

          <svg class="wh-messenger-icon wh-messenger-bg-email" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

            <path d=" M27 22.757c0 1.24-.988 2.243-2.19 2.243H7.19C5.98 25 5 23.994 5 22.757V13.67c0-.556.39-.773.855-.496l8.78 5.238c.782.467 1.95.467 2.73 0l8.78-5.238c.472-.28.855-.063.855.495v9.087z" fill-rule="evenodd"></path><path d=" M27 9.243C27 8.006 26.02 7 24.81 7H7.19C5.988 7 5 8.004 5 9.243v.465c0 .554.385 1.232.857 1.514l9.61 5.733c.267.16.8.16 1.067 0l9.61-5.733c.473-.283.856-.96.856-1.514v-.465z" fill-rule="evenodd"></path>

           </svg>

        </div>

      </div>

      <div class='mes-us'>Gửi Email</div>

      <div class='clear'></div>

    </a>

     

          <a class='wh-widget-button wh-widget-button-activator' href='javascript:void(0);'>

            <div class='wh-widget-button-icon wh-messenger-bg-activator' style='background-color:#129BF4;'>

              <div>

                <svg class='wh-messenger-svg-close wh-svg-close' viewBox='-9 -10 41 44' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>

                  <path d=' M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z' fill-rule='evenodd'></path>

                </svg>

                <i class='wh-icon-whatshelp wh-svg-icon'></i>

              </div>

            </div>

            <div class='clear'></div>

          </a>

        </div>

        <div class='clear'></div>

      </div>

    </div>

    <script>//<![CDATA[
    $('.wh-messenger-bg-activator').on('click', function() {
      $(this).parent().parent().toggleClass('wh-widget-show-get-button wh-widget-activator-as-close wh-widget-activate');
      var call_to_action = $(this).parent().parent().parent().find('#wh-call-to-action');
      var widget_button = $(this).parent().parent().find('.wh-widget-button');
      if ($(call_to_action).hasClass('wh-animation-in')) {
        $(call_to_action).removeClass('wh-animation-in').addClass('wh-animation-out wh-hide');
      } else {
        $(call_to_action).addClass('wh-animation-in').removeClass('wh-animation-out wh-hide');
      }
      if ($(widget_button).not('.wh-widget-button-activator').hasClass('button-slide-out')) {
        $(widget_button).not('.wh-widget-button-activator').removeClass('button-slide-out').addClass('button-slide');
      } else {
        $(widget_button).not('.wh-widget-button-activator').addClass('button-slide-out').removeClass('button-slide');
      }
    });
    //]]></script>

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

    <!--/Contact Button Widget-->

       Trong code mình đã tách các button ra cho các bạn dễ nhìn, button nào cần thì để, không có thể xóa bỏ đi nhé. Và nhớ thay các thông tin của các bạn vào những chỗ tô vàng.
       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é.

    Mẫu 4:

    Xem demo bên dưới hoặc xem
        Code:
    Sử dụng mẫu này, các bạn copy toàn bộ code bên dưới dán vào trước thẻ </body>.

    <div id='arcontactus'/>

    <script type='text/javascript'>

    //<![CDATA[

    var arCuMessages = ["Xin chào!", "Tôi có thể giúp gì cho bạn?"];

    var arCuLoop = false;

    var arCuCloseLastMessage = false;

    var arCuPromptClosed = false;

    var _arCuTimeOut = null;

    var arCuDelayFirst = 2000;

    var arCuTypingTime = 2000;

    var arCuMessageTime = 4000;

    var arCuClosedCookie = 0;

    var arcItems = [];

    window.addEventListener('load', function() {

      arCuClosedCookie = arCuGetCookie('arcu-closed');

      jQuery('#arcontactus').on('arcontactus.init', function() {

        if (arCuClosedCookie) {

          return false;

        }

        arCuShowMessages();

      });

      jQuery('#arcontactus').on('arcontactus.openMenu', function() {

        clearTimeout(_arCuTimeOut);

        arCuPromptClosed = true;

        jQuery('#contact').contactUs('hidePrompt');

        arCuCreateCookie('arcu-closed', 1, 30);

      });

      jQuery('#arcontactus').on('arcontactus.hidePrompt', function() {

        clearTimeout(_arCuTimeOut);

        arCuPromptClosed = true;

        arCuCreateCookie('arcu-closed', 1, 30);

      });

      var arcItem = {};

      arcItem.id = 'msg-item-1';

      arcItem.class = 'msg-item-facebook-messenger';

      arcItem.title = 'Messenger';

      arcItem.icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" 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"></path></svg>';

      arcItem.href = 'https://m.me/NTLRUBYfanpage/';

      arcItem.color = '#567AFF';

      arcItems.push(arcItem);

      var arcItem = {};

      arcItem.id = 'msg-item-9';

      arcItem.class = 'msg-item-telegram-plane';

      arcItem.title = 'Zalo Chat';

      arcItem.icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z"></path></svg>';

      arcItem.href = 'https://zalo.me/090321456';

      arcItem.color = '#1EBEA5';

      arcItems.push(arcItem);

      var arcItem = {};

      arcItem.id = 'msg-item-6';

      arcItem.class = 'msg-item-skype';

      arcItem.title = 'Skype Chat';

      arcItem.icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M424.7 299.8c2.9-14 4.7-28.9 4.7-43.8 0-113.5-91.9-205.3-205.3-205.3-14.9 0-29.7 1.7-43.8 4.7C161.3 40.7 137.7 32 112 32 50.2 32 0 82.2 0 144c0 25.7 8.7 49.3 23.3 68.2-2.9 14-4.7 28.9-4.7 43.8 0 113.5 91.9 205.3 205.3 205.3 14.9 0 29.7-1.7 43.8-4.7 19 14.6 42.6 23.3 68.2 23.3 61.8 0 112-50.2 112-112 .1-25.6-8.6-49.2-23.2-68.1zm-194.6 91.5c-65.6 0-120.5-29.2-120.5-65 0-16 9-30.6 29.5-30.6 31.2 0 34.1 44.9 88.1 44.9 25.7 0 42.3-11.4 42.3-26.3 0-18.7-16-21.6-42-28-62.5-15.4-117.8-22-117.8-87.2 0-59.2 58.6-81.1 109.1-81.1 55.1 0 110.8 21.9 110.8 55.4 0 16.9-11.4 31.8-30.3 31.8-28.3 0-29.2-33.5-75-33.5-25.7 0-42 7-42 22.5 0 19.8 20.8 21.8 69.1 33 41.4 9.3 90.7 26.8 90.7 77.6 0 59.1-57.1 86.5-112 86.5z"></path></svg>';

      arcItem.href = 'skype:live:.cid.38254504fa4d8168?chat';

      arcItem.color = '#1C9CC5';

      arcItems.push(arcItem);

      var arcItem = {};

      arcItem.id = 'msg-item-7';

      arcItem.class = 'msg-item-envelope';

      arcItem.title = 'Gửi Email';

      arcItem.icon = '<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h416c8.8 0 16 7.2 16 16v41.4c-21.9 18.5-53.2 44-150.6 121.3-16.9 13.4-50.2 45.7-73.4 45.3-23.2.4-56.6-31.9-73.4-45.3C85.2 197.4 53.9 171.9 32 153.4V112c0-8.8 7.2-16 16-16zm416 320H48c-8.8 0-16-7.2-16-16V195c22.8 18.7 58.8 47.6 130.7 104.7 20.5 16.4 56.7 52.5 93.3 52.3 36.4.3 72.3-35.5 93.3-52.3 71.9-57.1 107.9-86 130.7-104.7v205c0 8.8-7.2 16-16 16z"></path></svg>';

      arcItem.href = 'mailto:[email protected]';

      arcItem.color = '#FF643A';

      arcItems.push(arcItem);

      var arcItem = {};

      arcItem.id = 'msg-item-8';

      arcItem.class = 'msg-item-phone';

      arcItem.title = 'Call 0903611340';

      arcItem.icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" 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"></path></svg>';

      arcItem.href = 'tel:090369852';

      arcItem.color = '#4EB625';

      arcItems.push(arcItem);

      jQuery('#arcontactus').contactUs({

        items: arcItems

      });

    });//]]></script>

    <link href='https://dl.dropboxusercontent.com/s/c11knf6x2zajumb/arcontactus-widget.css' rel='stylesheet'/>

    <script src='https://dl.dropboxusercontent.com/s/4z4wmr4l3udcl83/arcontactus-widget.js' type='text/javascript'/>

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

       Trong đó các bạn nhớ thay các thông tin của các bạn vào những chỗ tô vàng.
       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é.

    Mẫu 5:

    Xem demo bên dưới hoặc xem
       Code:
    Mẫu này sẽ chuyển thành hàng ngang ở chân trang trên màn hình 600px trở xuống. Sử dụng mẫu này, các bạn copy toàn bộ code bên dưới dán vào bố cục -> tiện ích HTML/JavaScript

    <div class="minhweb-nav"> <ul>

    <!--Bản đồ-->

    <li><a href=" https://goo.gl/maps/gPQ4uRanB5xJ2Q3q8" rel="nofollow" target="_blank"><i class="ticon-heart"></i>Tìm đường</a></li> <li><a href="https://zalo.me/0888123131" rel="nofollow" target="_blank"><i class="ticon-zalo-circle2"></i>Chat Zalo</a></li>

    <!--Gọi điện-->

    <li class="phone-mobile"> <a href="tel:0909372229" rel="nofollow" class="button"> <span class="phone_animation animation-shadow"> <i class="icon-phone-w rung" aria-hidden="true"></i> </span> <span class="btn_phone_txt">Gọi điện</span> </a> </li>

    <!--Gửi Messenger-->

    <li><a href=" https://www.messenger.com/t/ketoangsc" rel="nofollow" target="_blank"><i class="ticon-messenger"></i>Messenger</a></li>

    <!--Gửi Gửi Email-->

    <li><a href=" mailto:[email protected]" class="chat_animation"> <i class="ticon-chat-sms" aria-hidden="true" title="Gửi Email"></i> Gửi Email</a> </li> <li class="to-top-pc"> <a href="#top" rel="nofollow"> <i class="ticon-angle-up" aria-hidden="true" title="Quay lên trên"></i> </a> </li> </ul> </div>

    <style>

                   .phone-mobile {display: none;} .minhweb-nav { position: fixed; right: 15px; background: #fff; border-radius: 5px; width: auto; z-index: 150; bottom: 50px; padding: 10px 0; border: 1px solid #f2f2f2; } .minhweb-nav ul {list-style: none;padding: 0;margin: 0;} .minhweb-nav ul li {list-style: none!important;} .minhweb-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; } .minhweb-nav ul>li .chat_animation{display:none} .minhweb-nav ul>li a i.ticon-heart { background: url(//copphaviet.com/wp-content/uploads/2020/05/wpfast-icon-map.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; } .minhweb-nav ul>li a i.ticon-zalo-circle2 { background: url(//copphaviet.com/wp-content/uploads/2020/05/wpfast-icon-zalo.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; }.minhweb-nav li .button { background: transparent; }.minhweb-nav ul>li a i.ticon-angle-up { background: url(//copphaviet.com/wp-content/uploads/2020/05/wpfast-icon-angle-up.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; }.minhweb-nav ul>li a i { width: 33px; height: 33px; display: block; margin: auto; }.minhweb-nav ul li .button .btn_phone_txt { position: relative; top:35px; font-size: 10px; font-weight: bold; text-transform: none; } .minhweb-nav ul li .button .phone_animation i { display: inline-block; width: 27px; font-size: 26px; margin-top: 12px; }.minhweb-nav ul>li a.chat_animation svg { margin: -13px 0 -20px; } .minhweb-nav ul>li a i.ticon-messenger { background: url(//copphaviet.com/wp-content/uploads/2020/05/wpfast-icon-messenger.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; }.minhweb-nav ul li .button .phone_animation i { display: inline-block; width: 27px; font-size: 26px; margin-top: 12px; } .minhweb-nav ul>li a i.ticon-chat-sms { background: url(//copphaviet.com/wp-content/uploads/2020/05/wpfast-icon-sms.png) no-repeat; background-size: contain; width: 38px; height: 36px; display: block; } .minhweb-nav ul>li a i.icon-phone-w { background: url(//copphaviet.com/wp-content/uploads/2020/05/wpfast-icon-phone.png) no-repeat; background-size: contain;} .minhweb-nav ul li .button .btn_phone_txt { position: relative; } @media only screen and (max-width: 600px){ .minhweb-nav li .chat_animation{display:block !Important} .minhweb-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; } .minhweb-nav ul>li a{padding:0; margin:0 auto} .minhweb-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; } .minhweb-nav li { float: left; width: 20%; list-style: none; height: 50px; } .phone-mobile{display:block !important}} .rung {animation: code-pro-rung-lac 1s ease infinite;}@-webkit-keyframes code-pro-rung-lac { 0% {-webkit-transform: rotate(0) scale(1) skew(1deg);}10% {-webkit-transform: rotate(-25deg) scale(1) skew(1deg);} 20%{-webkit-transform: rotate(25deg) scale(1) skew(1deg); } 30% {-webkit-transform: rotate(-25deg) scale(1)skew(1deg);} 40% {-webkit-transform: rotate(25deg) scale(1) skew(1deg);}50% {-webkit-transform: rotate(0) scale(1) skew(1deg);}100% {-webkit-transform: rotate(0) scale(1) skew(1deg); }}

    </style>

       Trong code mình đã tách các button ra cho các bạn dễ nhìn. Các bạn nhớ thay các thông tin của các bạn vào những chỗ tô vàng.

    Mẫu 6:

    Xem demo bên dưới hoặc xem
       Code:
    Mẫu này, nút sẽ nằm ở giữa bên trái màn hình, chạy ra khi rê chuột vào. Sử dụng mẫu này, các bạn copy toàn bộ code bên dưới dán vào bố cục -> tiện ích HTML/JavaScript

    <div class="contact-module flex">

      <div class="flex-align">

        <div class="contact-module-content flex">

          <div>

            <div class="contact-title">

              <div class="contact-text-wrapper">

                <div>

                  <h3 class="text-center">Hãy liên hệ ngay với chúng tôi để được tư vấn miễn phí</h3>

                </div>

                <div class="flex-center">

                  <div class="is-divider"></div>

                </div>

                <div class="text-center">

                  <div><a href="tel:0123456789" rel="nofollow">0123.456.789</a><span> | </span><a href="tel:0123987654" rel="nofollow">0123.987.654</a></div>

                  <div><span>Email: [email protected]</span></div>

                </div>

              </div>

            </div>

            <div class="contact-set flex text-center">

              <div class="w-50">

                <a href="http://zalo.me/0123456789" rel="noopener nofollow" target="_blank" title="Chat Zalo">

                  <div class="flex-center"><span class="flex has-icon zalo-icon"></span></div>

                  <div>

                    <h4>Chat Zalo</h4>

                    <p>Chat trực tuyến với NTLRUBY</p>

                  </div>

                </a>

              </div>

              <div></div>

              <div class="w-50">

                <a href="/p/lien-he.html" title="Liên hệ">

                  <div class="flex-center"><span class="has-icon contact-icon"></span></div>

                  <div>

                    <h4>Gửi yêu cầu</h4>

                    <p>NTLRUBY sẽ phản hồi ngay khi nhận được yêu cầu</p>

                  </div>

                </a>

              </div>

            </div>

          </div>

        </div>

        <div class="contact-module-title flex-center">

          <div>Liên hệ</div>

        </div>

      </div>

    </div>

    <style>

    .flex{display:-ms-flexbox;display:-webkit-flex;display:flex}.align-center{-webkit-align-items:center;align-items:center}

    .flex-align{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}

    .flex-center{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;justify-content:center}

    .text-center{text-align:center}

    .w-50{float:left;width:50%}

    .zalo-icon:before,.contact-icon:before{content:"";display:inline-block;vertical-align:middle;width:48px;height:48px;background-position:center center;background-repeat:no-repeat}

    .zalo-icon:before{background-color:#018fe5;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 97.4 87.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath fill='%23fff' d='M78.4,42c-1.4,0-2.4,0.6-3.2,1.7c-0.7,1-1,2.2-1,3.7c0,1.5,0.3,2.7,1,3.7c0.8,1.2,1.8,1.7,3.2,1.7 c1.4,0,2.5-0.6,3.2-1.7c0.7-1,1-2.2,1-3.7c0-1.4-0.3-2.6-1-3.6C80.8,42.6,79.7,42,78.4,42z' fill-rule='evenodd'%3E%3C/path%3E%3Cpath fill='%23fff' d='M48.8,0C21.9,0,0,19.5,0,43.6c0,11.9,5.4,22.7,14,30.6c2.2,2-5.4,10.5-9,11.3c10.4,2.9,20.7-3.4,23.2-2.4 c6.2,2.6,13.2,4,20.5,4c26.9,0,48.7-19.5,48.7-43.6C97.5,19.5,75.7,0,48.8,0z M27.8,58.2H14.6c-3.1,0-4.6-1.1-4.6-3.3 c0-1,0.6-2.4,1.8-4l11.8-15.6h-8.5c-3.1,0-4.7-1-4.7-3c0-2,1.6-3,4.7-3h11.2c3.8,0,5.7,1.1,5.7,3.2c0,1-0.6,2.3-1.9,4L18.5,52.2 h9.3c3.1,0,4.7,1,4.7,3C32.5,57.2,30.9,58.2,27.8,58.2z M54.9,53.8c0,3.1-1.1,4.7-3.2,4.7c-1.4,0-2.4-0.7-3.1-2.2 c-1.3,1.6-3.1,2.4-5.4,2.4c-2.9,0-5.3-1.2-7.2-3.5c-1.7-2.2-2.5-4.8-2.5-7.8c0-3,0.9-5.6,2.7-7.8c1.9-2.3,4.3-3.5,7.3-3.5 c2.2,0,3.9,0.8,5.1,2.3c0.7-1.4,1.8-2,3.1-2c2.1,0,3.2,1.5,3.2,4.6V53.8z M64.7,53.8c0,3.1-1.1,4.7-3.2,4.7c-2.1,0-3.2-1.6-3.2-4.7 V31.9c0-3.1,1.1-4.7,3.2-4.7c2.1,0,3.2,1.6,3.2,4.7V53.8z M78.4,58.9c-3.2,0-5.9-1.1-7.9-3.3c-2-2.2-3-4.9-3-8.1s1-6,3-8.1 c2-2.2,4.7-3.3,7.9-3.3c3.3,0,5.9,1.1,7.9,3.3c1.9,2.1,2.9,4.9,2.9,8.1s-1,6-2.9,8.1C84.2,57.8,81.6,58.9,78.4,58.9z' fill-rule='evenodd'%3E%3C/path%3E%3Cpath fill='%23fff' d='M44.4,42.2c-1.3,0-2.4,0.5-3.1,1.6c-0.7,1-1,2.1-1,3.5c0,1.4,0.3,2.6,1,3.6c0.8,1.1,1.8,1.7,3.2,1.7 c1.3,0,2.4-0.6,3.1-1.7c0.6-1,1-2.2,1-3.6c0-1.4-0.3-2.5-1-3.5C46.7,42.8,45.7,42.2,44.4,42.2z' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");background-size:55%}

    .contact-icon:before{background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M22.407%200h-21.1C.586%200%200%20.586%200%201.306v21.1c0%20.72.586%201.306%201.306%201.306h21.1c.72%200%201.306-.586%201.306-1.305V1.297C23.702.587%2023.117%200%2022.407%200zm-9.094%2018.046c0%20.41-.338.737-.738.737H3.9c-.41%200-.738-.337-.738-.737v-1.634c0-.408.337-.737.737-.737h8.675c.41%200%20.738.337.738.737v1.634zm7.246-5.79c0%20.408-.338.737-.738.737H3.89c-.41%200-.737-.338-.737-.737v-1.634c0-.41.337-.737.737-.737h15.923c.41%200%20.738.337.738.737v1.634h.01zm0-5.8c0%20.41-.338.738-.738.738H3.89c-.41%200-.737-.338-.737-.738V4.822c0-.408.337-.737.737-.737h15.923c.41%200%20.738.338.738.737v1.634h.01z%22/%3E%3C/svg%3E);background-color:#00aeef;background-size:43%}

    .contact-module{position:fixed;top:50%;left:-450px;transform:translate(-0%,-50%);max-width:480px;z-index:20;transition:left .7s}

    .contact-module:hover{left:0}

    .contact-module-content{background:#fff;padding:20px;border-radius:0 4px 4px 0;box-shadow:rgba(0,0,0,0.3) 0 0 6px,rgba(0,0,0,0.15) 0 1px 6px}

    .contact-module-content>div>div:nth-of-type(1){margin-bottom:20px}

    .contact-module-content>div>div:nth-of-type(2){background:#dadce0;opacity:.7;padding:10px;border-radius:4px}

    .contact-module-content>div>div:nth-of-type(2)>div:nth-of-type(2){width:2px;background:#00aeef;margin:0 10px}

    .contact-text-wrapper h3{line-height:1.5;opacity:.8;text-transform:uppercase;cursor:default}

    .contact-module-content a{color:#212529}

    .contact-module-title{background:#00aeef;border:1px solid #00aeef;border-radius:0 4px 4px 0;color:#fff;width:30px;height:100px}

    .contact-module-title>div{transform:rotate(-90deg);white-space:nowrap;letter-spacing:3px;font-size:90%;font-weight:500}

    .contact-module-content .has-icon{width:48px;height:48px;border-radius:50%;overflow:hidden}

    .contact-set a>div:nth-of-type(2){line-height:1.4}.contact-set h4{margin-bottom:5px}

    .contact-text-wrapper>div:nth-of-type(3){line-height:1.6}

    .contact-text-wrapper>div:nth-of-type(3) a{font-size:1.2rem;font-weight:500}

    .contact-text-wrapper>div:nth-of-type(3) a+span{font-size:1.4rem;opacity:.7}

    .is-divider{display:block;margin: .7em 0 .5em;background:rgba(0,0,0,0.1);width:100%;max-width:50px;height:2px}

    @media(min-width:1025px){.contact-module-title{cursor:pointer}}

    @media(max-width:480px){.contact-module{display:none!important}}

    </style>

       Trong đó các bạn nhớ thay các thông tin của các bạn vào những chỗ tô vàng.

    Chúc các bạn thành công!

  • Bài Viết Liên Quan

    Vui lòng đăng nhập tài khoản tương ứng trên trình duyệt của bạn trước khi bình luận!

    Google

    Zalo

    Không có nhận xét nào :

    Đăng nhận xét

    Hãy đánh dấu vào "Thông báo cho tôi" trước khi gửi bình luận để nhận được thông báo khi Admin trả lời!

NTLRUBY

Đăng ký kênh để ủng hộ NTLRUBY và xem những video thị phạm code nhé!