No Code Building
  • LIÊN HỆ
  • TÀI CHÍNH
  • GIẢI TRÍ
  • CUỘC SỐNG
  • CÔNG NGHỆ
  • WORDPRESS
No Result
View All Result
No Code Building
  • LIÊN HỆ
  • TÀI CHÍNH
  • GIẢI TRÍ
  • CUỘC SỐNG
  • CÔNG NGHỆ
  • WORDPRESS
No Result
View All Result
No Code Building
No Result
View All Result
Home WordPress

Hướng dẫn tạo Nút gọi điện thoại rung lắc kèm số điện thoại trên website

in WordPress
0
Hướng dẫn tạo Nút gọi điện thoại rung lắc kèm số điện thoại trên website
782
SHARES
4.3k
VIEWS
Share on FacebookShare on Twitter

Nút điện thoại trên website là 1 cách để khách hàng nhanh chóng liên hệ với bạn. Nhờ nút điện thoại này mà tỷ lệ bán hàng của bạn trở nên cao và hiệu quả hơn. Trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo nút điện thoại rung lắc kèm số điện thoại trên website.

Trong bài này, sau khi hoàn thành, các bạn sẽ có kết quả như hình bên dưới ở chế độ máy tính. Còn ở chế độ mobile và tablet thì chỉ hiển thị nút gọi điện thoại thôi. Lý do là vì máy tính thì khách hàng không thể gọi điện thoại được nên cần hiển thị số điện thoại để thuận tiện cho khách hàng liên lạc. Còn ở chế độ mobile và tablet, khách hàng có thể click vào và điện thoại trực tiếp.

tạo nút điện thoại rung lắc trên website

1. Hướng dẫn cách chèn code tạo nút điện thoại trên website:

Nếu bạn dùng theme GeneratePress bản quyền Premium thì có thể sử dụng tính năng Hook. Các thông số cụ thể bao gồm:

  • Tên Hook: wp_footer
  • Display Rules: All site

Nếu bạn dùng các theme khác thì bạn cần cài thêm plugin Insert Headers and Footers để chèn code.

2. Phần code tạo nút điện thoại

Bạn chèn code này theo cách hướng dẫn ở trên. Lưu ý sửa lại số điện thoại ở các dòng 6, 12, 13. Đối với dòng 6 và 12 là link kết nối sang phần gọi điện thoại nên các bạn cần ghi liên tục các số. Đối với dòng 13 là số điện thoại hiển thị ở chế độ máy tính nên bạn có thể ghi theo ý muốn.

Các bạn có thể mò mẫm để thay đổi vị trí left, right, bottom theo vị trí mà bạn muốn trong thẻ <style> nhé. Theo code này thì nút gọi điện thoại ở góc dưới bên trái.

<div class="hotline-phone-ring-wrap">
    <div class="hotline-phone-ring">
        <div class="hotline-phone-ring-circle"></div>
        <div class="hotline-phone-ring-circle-fill"></div>
        <div class="hotline-phone-ring-img-circle">
        <a href="tel:0988333069" class="pps-btn-img">
            <img src="https://nocodebuilding.com/wp-content/uploads/2020/07/icon-call-nh.png" alt="Gọi điện thoại" width="50">
        </a>
        </div>
    </div>
    <div class="hotline-bar">
        <a href="tel:0989333069">
            <span class="text-hotline">0989 333 069</span>
        </a>
    </div>
</div>
<style>
.hotline-phone-ring-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999999;
}
.hotline-phone-ring {
  position: relative;
  visibility: visible;
  background-color: transparent;
  width: 110px;
  height: 110px;
  cursor: pointer;
  z-index: 11;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transition: visibility .5s;
  left: 0;
  bottom: 0;
  display: block;
}
.hotline-phone-ring-circle {
    width: 85px;
  height: 85px;
  top: 10px;
  left: 10px;
  position: absolute;
  background-color: transparent;
  border-radius: 100%;
  border: 2px solid #e60808;
  -webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
  animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
  transition: all .5s;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  opacity: 0.5;
}
.hotline-phone-ring-circle-fill {
    width: 55px;
  height: 55px;
  top: 25px;
  left: 25px;
  position: absolute;
  background-color: rgba(230, 8, 8, 0.7);
  border-radius: 100%;
  border: 2px solid transparent;
  -webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
  animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
  transition: all .5s;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.hotline-phone-ring-img-circle {
    background-color: #e60808;
    width: 33px;
  height: 33px;
  top: 37px;
  left: 37px;
  position: absolute;
  background-size: 20px;
  border-radius: 100%;
  border: 2px solid transparent;
  -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
  animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hotline-phone-ring-img-circle .pps-btn-img {
    display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.hotline-phone-ring-img-circle .pps-btn-img img {
    width: 20px;
    height: 20px;
}
.hotline-bar {
  position: absolute;
  background: rgba(230, 8, 8, 0.75);
  height: 40px;
  width: 180px;
  line-height: 40px;
  border-radius: 3px;
  padding: 0 10px;
  background-size: 100%;
  cursor: pointer;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
  z-index: 9;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50px !important;
  /* width: 175px !important; */
  left: 33px;
  bottom: 37px;
}
.hotline-bar > a {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  text-indent: 50px;
  display: block;
  letter-spacing: 1px;
  line-height: 40px;
  font-family: Arial;
}
.hotline-bar > a:hover,
.hotline-bar > a:active {
  color: #fff;
}
@-webkit-keyframes phonering-alo-circle-anim {
  0% {
    -webkit-transform: rotate(0) scale(0.5) skew(1deg);
    -webkit-opacity: 0.1;
  }
  30% {
    -webkit-transform: rotate(0) scale(0.7) skew(1deg);
    -webkit-opacity: 0.5;
  }
  100% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
    -webkit-opacity: 0.1;
  }
}
@-webkit-keyframes phonering-alo-circle-fill-anim {
  0% {
    -webkit-transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.6;
  }
  50% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.6;
  }
}
@-webkit-keyframes phonering-alo-circle-img-anim {
  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);
  }
}
@media (max-width: 768px) {
  .hotline-bar {
    display: none;
  }
}
</style>

Nhớ Save lại rồi tận hưởng nha.

3. Bonus phần nút icon Zalo và Messenger

Bên cạnh nút điện thoại thì Zalo và Messenger cũng thường được sử dụng. Mình bonus thêm code của hai nút chat nhanh này để các bạn có nhu cầu có thể dùng. Các bạn nhớ chỉnh sửa lại dòng số 4 và 7 theo địa chỉ messenger và zalo của mình nha.

Tương tự ở trên, các bạn có thể tùy chỉnh trong thẻ <style> các thông số liên quan đến left, right, bottom. Theo code này thì 2 nút zalo và messenger ở góc dưới bên phải.

<div class="social-button">
    <div class="social-button-content">
       
        <a href="https://m.me/nocodebuilding/" target="_blank" class="mes">
          <img src="https://nocodebuilding.com/wp-content/uploads/2020/07/fb.png" alt="Chat Messenger">
          </a>
        <a href="http://zalo.me/0989333069" target="_blank" class="zalo">
           <img src="https://nocodebuilding.com/wp-content/uploads/2020/07/zl.png" alt="Chat Zalo">
          </a>
    </div>
       
  </div>

  <style>
    .social-button{
      display: inline-grid;
        position: fixed;
        background-color:rgba(255,255,255,0) !important;
        bottom: 15px;
        right: 20px;
        min-width: 45px;
        text-align: center;
        z-index: 99999;
    }
    .social-button-content{
      display: inline-grid;   
    }
    .social-button a {padding:8px 0;cursor: pointer;position: relative;}
    .social-button i{
      width: 40px;
        height: 40px;
        background: #F05A5E;
        color: #fff;
        border-radius: 100%;
        font-size: 20px;
        text-align: center;
        line-height: 1.9;
        position: relative;
        z-index: 999;
    }
    .social-button span{
      display: none;
    }
    
    .mes:hover > span, .zalo:hover > span{display: block}
    .social-button a span {
        border-radius: 2px;
        text-align: center;
        background: #ffffff;
        padding: 9px;
        display: none;
        width: 180px;
        margin-right: 10px;
        position: absolute;
        color: #ffffff;
        z-index: 999;
        top: 9px;
        right: 20px;
  </style>

 

Cảm ơn các bạn đã theo dõi bài viết về hướng dẫn tạo nút gọi điện thoại trên website có kèm số điện thoại của No Code Building.

Previous Post

Các mẫu kim đồng hồ treo tường được ưa chuộng nhất

Next Post

Lệnh kiểm tra ổ cứng VPS trên SSH

Related Posts

Trọn bộ Crocoblock và Jetplugins – Addons tốt nhất của Elementor
WordPress

Trọn bộ Crocoblock và Jetplugins – Addons tốt nhất của Elementor

by TRUNG NO CODE
3 Tháng Tám, 2021
Làm sao để mua lại TÊN MIỀN QUÁ HẠN đã bị người khác mua mất?
Công nghệ

Làm sao để mua lại TÊN MIỀN QUÁ HẠN đã bị người khác mua mất?

by TRUNG NO CODE
22 Tháng Bảy, 2021
Đây là lý do mình xóa AMP trên website của mình.
Công nghệ

Đây là lý do mình xóa AMP trên website của mình.

by TRUNG NO CODE
15 Tháng Bảy, 2021
Hiển thị Giá khuyến mãi trước Giá bán thông thường trong Woocommerce (Display Sale price before Regular price)
WordPress

Thêm chữ sau Tổng tiền giỏ hàng và Tổng tiền đơn hàng (Add text after Total Cart in Cart page and Total Order in Checkout page in Woocommerce)

by TRUNG NO CODE
6 Tháng Bảy, 2021
Hiển thị Giá khuyến mãi trước Giá bán thông thường trong Woocommerce (Display Sale price before Regular price)
WordPress

Change PROCEED TO CHECKOUT text in Woocommerce Cart page

by TRUNG NO CODE
6 Tháng Bảy, 2021
Next Post
Lệnh kiểm tra ổ cứng VPS trên SSH

Lệnh kiểm tra ổ cứng VPS trên SSH

Chuyên mục

  • Công nghệ
  • Cuộc sống
  • Giải trí
  • Tài chính
  • WordPress

Thẻ

bàn bida hollywood 2021 chỉnh font mặc định trong corel code auto choose variable product code để khách gửi email bằng tài khoản gmail hướng dẫn cách xem kênh youtube nào nhiều sub nhất hướng dẫn lắp kim đồng hồ treo tường in nón bảo hiểm giá rẻ in nón bảo hiểm giá rẻ tphcm in nón bảo hiểm giá sỉ khuyến mãi kênh youtube nhiều sub nhất thế giới kênh youtube nhiều sub nhất việt nam mua elementor pro namesilo nocodebuilding nón bảo hiểm quà tặng qts1 quà tặng 90 năm thành lập đoàn quà tặng kỷ niệm 90 năm đoàn thanh niên quà tặng số 1 raya và rồng thần cuối cùng full sản xuất nón bảo hiểm chất lượng sản xuất đồng hồ treo tường theo yêu cầu thiết kế website thiết kế website không cần code thiết kế website wordpress top 100 phim hoạt hình hay nhất mọi thời đại tra cứu thông tin bầu cử quận 12 tự động chọn biến thể vultr woocommerce xưởng sản xuất nón bảo hiểm xưởng sản xuất nón bảo hiểm giá rẻ đặt in nón bảo hiểm số lượng lớn đặt làm đồng hồ treo tường theo yêu cầu đặt nón bảo hiểm quà tặng đặt nón bảo hiểm theo yêu cầu đồng hồ công cộng đồng hồ công cộng uy tín đồng hồ treo tường 1m đồng hồ treo tường cỡ lớn đồng hồ treo tường giá rẻ đồng hồ treo tường hội trường đồng hồ treo tường in logo giá rẻ đồng hồ treo tường trước cổng trường

Categories

  • Công nghệ
  • Cuộc sống
  • Giải trí
  • Tài chính
  • WordPress

Recent News

Bitcoin 15/02/2023 chờ đợi Bull trap $23k – $24k

Bitcoin 15/02/2023 chờ đợi Bull trap $23k – $24k

15 Tháng Hai, 2023
Tài liệu trading duy nhất mà mình đang áp dụng (tiếng Anh)

Tài liệu trading duy nhất mà mình đang áp dụng (tiếng Anh)

11 Tháng Hai, 2023

© 2021 No Code Building - Giải pháp Marketing hiệu quả

No Result
View All Result
  • LIÊN HỆ
  • TÀI CHÍNH
  • GIẢI TRÍ
  • CUỘC SỐNG
  • CÔNG NGHỆ
  • WORDPRESS

© 2021 No Code Building - Giải pháp Marketing hiệu quả