Blog Mua Sắm Thông Minh – MEGA STOREBlog Mua Sắm Thông Minh – MEGA STORE
  • TRANG CHỦ
  • Shop
  • Thủ Thuật
    • Thủ Thuật WordPress
    • Thủ Thuật Blogspot
    • Thủ Thuật SEO
    • Thủ Thuật Windows
    • Thủ Thuật Phần Cứng
    • Thủ Thuật Văn Phòng
    • Thủ Thuật Android
    • Thủ Thuật IOS
    • Thủ Thuật Mac OS
    • Thủ Thuật Mạng Internet
  • Phần Mềm
    • Phần Mềm Windows
    • Phần Mềm Android
    • Phần Mềm IOS
    • Phần Mềm Mac OS
  • Games
    • Windows Game
    • Game Android
    • Game IOS
    • Game Mac
    • Game Online
    • Hướng dẫn chơi Game
  • Web
    • Mạng Xã Hội
    • Giải Trí Online
    • Chia Sẻ Trực Tuyến
    • Học Tập Trực Tuyến
    • Mua Sắm Trực Tuyến
    • Các Tiện Ích Online Khác
  • Tin Tức
    • Tin Nóng 24h
    • Công Nghệ
    • Tổng Hợp
  • Liên Hệ
Facebook Twitter Instagram Pinterest YouTube LinkedIn
Thứ Hai, Tháng Bảy 4
Đăng nhập
tin mới
  • Nghệ sĩ Hồ Hoài Anh và Hồng Đăng có thể đã dính bẫy tống tiền hiếp dâm
  • Quỹ bình ổn giá xăng dầu giữ hay bỏ ?
  • “Quái vật xuyên không” 7 tỉ năm hiện hình, 1 giây nuốt hết 1 Trái Đất
  • Chuyện Ma có thật ( chuyện xảy ra trong đời )
  • 500+ câu nói hay nhất, ấn tượng nhất giúp bạn sống tích cực hơn mỗi ngày
  • Top 10 công cụ tăng traffic cho website hiệu quả nhất
  • ‘Ngọc Hoàng’ Quốc Khánh U60 vẫn độc thân, sống ở phòng 10m2
  • Hướng dẫn kiểm tra máy tính có cài được Windows 11 hay không
Facebook Twitter Instagram
Blog Mua Sắm Thông Minh – MEGA STORE Blog Mua Sắm Thông Minh – MEGA STORE
ĐỒ DA XỊN - CHẾ TÁC THỦ CÔNG BỞI THỢ LÀNH NGHỀ
  • TRANG CHỦ
  • Shop
  • Thủ Thuật
    • Thủ Thuật WordPress
    • Thủ Thuật Blogspot
    • Thủ Thuật SEO
    • Thủ Thuật Windows
    • Thủ Thuật Phần Cứng
    • Thủ Thuật Văn Phòng
    • Thủ Thuật Android
    • Thủ Thuật IOS
    • Thủ Thuật Mac OS
    • Thủ Thuật Mạng Internet
  • Phần Mềm
    • Phần Mềm Windows
    • Phần Mềm Android
    • Phần Mềm IOS
    • Phần Mềm Mac OS
  • Games
    • Windows Game
    • Game Android
    • Game IOS
    • Game Mac
    • Game Online
    • Hướng dẫn chơi Game
  • Web
    • Mạng Xã Hội
    • Giải Trí Online
    • Chia Sẻ Trực Tuyến
    • Học Tập Trực Tuyến
    • Mua Sắm Trực Tuyến
    • Các Tiện Ích Online Khác
  • Tin Tức
    • Tin Nóng 24h
    • Công Nghệ
    • Tổng Hợp
  • Liên Hệ
Blog Mua Sắm Thông Minh – MEGA STOREBlog Mua Sắm Thông Minh – MEGA STORE
Trang chủ » Tạo nút gọi điện rung lắc cho website cực đẹp trên PC và mobile
Thủ Thuật

Tạo nút gọi điện rung lắc cho website cực đẹp trên PC và mobile

Nguyễn Đình QuânBy Nguyễn Đình Quân10/04/2021Không có phản hồi8 Phút đọc

Bạn lướt web thấy 1 số trang web bán hàng có nút gọi điện thoại rung lắc trông rất đẹp mắt? Bỗng nhiên, bạn nhận ra web của mình không có nút gọi điện như vậy? Ngay lập tức, bạn lên Google tìm kiếm cách tạo nút gọi điện rung lắc cho web và thấy bài viết này?

Tạo nút gọi điện rung lắc cho website cực đẹp trên PC và mobile
Tạo nút gọi điện rung lắc cho website cực đẹp trên PC và mobile

Bạn đã tìm đúng bài viết rồi đó! Bài viết này, mình sẽ hướng dẫn cho bạn cách tạo nút gọi rung lắc đẹp cho web. Nó sẽ giúp gây chú ý cho khách hàng và kích thích họ bấm vào nút gọi trên web của bạn hơn.

Giao diện hiển thị nút gọi trên PC và mobile theo hướng dẫn này
Giao diện hiển thị nút gọi trên PC và mobile theo hướng dẫn này

Với nút gọi này, khi khách hàng truy cập trên máy tính thì họ sẽ nhìn thấy số hotline và có thể tự bấm số để gọi cho bạn. Còn nếu khách truy cập bằng mobile thì họ chỉ cần click vào là gọi cho bạn được luôn.

OK. Dưới đây mình sẽ hướng dẫn bạn tạo nút gọi điện thoại cho web theo 2 cách. Đó là dùng code và dùng plugin.

Xem nhanh

  • Code chèn nút gọi điện rung lắc cho website
  • Chèn nút gọi điện cho web qua Google Tag Manager
  • Plugin tạo nút gọi điện thoại rung lắc đẹp cho web
  • NHỮNG BÀI VIẾT ĐƯỢC QUAN TÂM NHẤT:
    • THEO DÕI MEGA STORE TẠI:
    • LIÊN HỆ VỚI CHÚNG TÔI:

Code chèn nút gọi điện rung lắc cho website

Đây là cách thứ nhất, dành cho bạn nào biết về code có thể dùng code HTML và CSS dưới đây để tạo nút gọi điện thoại.

Chèn code sau vào phần footer của web.

P/s: Bạn nhớ sửa lại số điện thoại thành số điện thoại của bạn nhé.

<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:0987654321″ class=”pps-btn-img”>
<img src=”https://nguyenhung.net/wp-content/uploads/2019/05/icon-call-nh.png” alt=”Gọi điện thoại” width=”50″>
</a>
</div>
</div>
<div class=”hotline-bar”>
<a href=”tel:0987654321″>
<span class=”text-hotline”>0987.654.321</span>
</a>
</div>
</div>

Sau đó, chèn đoạn CSS dưới đây vào file style.css trong theme bạn đang dùng.

P/s: Nếu bạn biết về CSS có thể chỉnh sửa lại màu sắc, kích thước cho phù hợp với web của bạn.

.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;
}
}

Chèn nút gọi điện cho web qua Google Tag Manager

Nếu bạn nào đã cài đặt Google Tag Manager cho web rồi thì có thể sử dụng đoạn code dưới đây và chèn vào web thông qua thẻ HTML Tùy Chỉnh.

<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: 160px;
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>
<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:0987654321″ class=”pps-btn-img”>
<img src=”https://nguyenhung.net/wp-content/uploads/2019/05/icon-call-nh.png” alt=”Gọi điện thoại” width=”50″>
</a>
</div>
</div>
<div class=”hotline-bar”>
<a href=”tel:0987654321″>
<span class=”text-hotline”>0987.654.321</span>
</a>
</div>
</div>

Plugin tạo nút gọi điện thoại rung lắc đẹp cho web

Đối với web WordPress, việc tạo nút gọi điện thoại rất đơn giản với sự trợ giúp của plugin. Có nhiều plugin có thể hỗ trợ tạo nút gọi điện nhưng mình thấy thích nhất vẫn là plugin Hotline Phone Ring.

Với plugin này, bạn có thể không biết code vẫn có thể dễ dàng tùy chỉnh màu sắc, kiểu hiển thị cho nút gọi điện thoại.

Sau khi cài plugin xong, bạn sẽ thấy menu HPR Options. Đây là phần thiết lập cho plugin, nó rất đơn giản như sau:

Tạo nút gọi điện rung lắc cho website cực đẹp trên PC và mobile
Tạo nút gọi điện rung lắc cho website cực đẹp trên PC và mobile

Trong đó:

  • Số điện thoại: Nhập số hotline bạn muốn hiện thị trên web đê người dùng gọi cho bạn.
  • Chọn giao diện: Hiện tại có 2 kiểu hiển thị cho bạn lựa chọn. Hãy chọn sau đó ấn lưu xem kiểu nào phù hợp với web nhé.
  • Màu sắc: Chọn màu sắc hiển thị cho nút gọi điện thoại.
  • Ấn thanh chứ số điện thoại: Tích vào nếu bạn muốn nó chỉ hiện thị nút Call rung lắc trên máy tính chứ không hiển thị số điện thoại.

Chỉ vậy thôi là xong rồi đó. Rất đơn giản đúng không nào!

Hãy áp dụng ngay cách tạo nút gọi điện thoại này cho web bán hàng, shop online của bạn ngay để gia tăng lượng khách hàng liên hệ qua hotline nhé. Chúc bạn thành công!

#Tạonútgọiđiệnrunglắc #Tạonútgọiđiệnchowebsite #nútgọiđiệnchowebsite #Tạonútgọiđiện #Tạonútchowebsite #Tạonútgọiđiệncựcđẹp

NHỮNG BÀI VIẾT ĐƯỢC QUAN TÂM NHẤT:

  • XE Ô TÔ MÔ HÌNH BẰNG KIM LOẠI
  • DECAN – TEM –  NHÃN – TRANG TRÍ XE Ô TÔ
  • PHỤ KIỆN DÀNH CHO BÊN NGOÀI XE Ô TÔ
  • LINH PHỤ KIỆN DÀNH CHO BÊN TRONG XE Ô TÔ
  • BAO DA ĐIỆN THOẠI
  • ỐP LƯNG ĐIỆN THOẠI
  • KÍNH CƯỜNG LỰC ĐIỆN THOẠI
  • TỔNG HỢP SẢN PHẨM CÔNG NGHỆ KHÁC

THEO DÕI MEGA STORE TẠI:

  • Blog: https://megastore52.blogspot.com
  • FANPAGE: https://www.facebook.com/MegaStore52

LIÊN HỆ VỚI CHÚNG TÔI:

  • ĐIỆN THOẠI: 096.757.1145
  • ĐIỆN THOẠI: 0972.305.914
  • EMAIL: megastore.vnn@gmail.com

nút gọi điện cho website Tạo nút cho website Tạo nút gọi điện Tạo nút gọi điện cho website Tạo nút gọi điện cực đẹp Tạo nút gọi điện rung lắc
Chia sẻ. Facebook Twitter Pinterest LinkedIn Tumblr Email

BÀI VIẾT LIÊN QUAN

Top 10 công cụ tăng traffic cho website hiệu quả nhất

02/09/2022

Hướng dẫn kiểm tra máy tính có cài được Windows 11 hay không

01/02/2022

Android 12: Lịch Cập Nhật Và Cách Tải Android 12 Chính Thức

12/12/2021

PHẢN HỒI CỦA BẠN Hủy trả lời

HỖ TRỢ:
Gọi mua hàng: 096.757.1145
Gọi bảo hành: 0914.055.540
Gọi kỹ thuật: 0326.286.107
LIÊN KẾT:
  • Đồ da xịn thủ công
  • Shop Mega Store
  • Mega Store qua Facebook
  • Mega Store qua Youtube
  • CHÍNH SÁCH:
  • Điều khoản dịch vụ
  • Chính sách đổi/trả hàng
  • Chính sách vận chuyển
  • Chính sách về quyền riêng tư
  • Facebook Twitter Instagram Pinterest YouTube Flickr
    © 2022 Blog được thiết kế bởi: Mega Store.

    Nhập ở trên và nhấn Enter để tìm kiếm. Nhấn Esc để hủy.

    Sign In or Register

    Welcome Back!

    Login below or Register Now.

    Lost password?

    Register Now!

    Already registered? Login.

    A password will be e-mailed to you.