Mình sẽ chia sẻ cách tạo nút gọi điện rung lắc khá đẹp cho Website.
Demo nút gọi điện xem ở đây:
(ở bên dưới góc trái nha)
Khi truy cập website bằng điện thoại, click vào nút gọi điện sẽ tự động bật ra app gọi điện, rất tiện lợi ^^
Bước 1. Chèn đoạn link này vào trước thẻ </head>
Bạn có thể lưu đoạn code trong animate.css rồi đưa về Host rồi khai báo link web bạn cũng được nha.
Lưu ý trong file này có 1 link dẫn tới ảnh dienthoai.png, bạn cũng phải tải cái file này đưa lên host (nếu không sẽ bị lỗi không hiển thị đấy
Trường hợp bạn không thích, thì cứ khai báo cái link như trên thôi.
Rồi dán đoạn code trên dưới thẻ </title> là được
Cho vào trước </head> nhé
Bước 2. Đán đoạn code sau vào trước </body>
Với Blogger
Với Wordpress
Vào tìm file Footer.php (tương tự cái trên), rồi dán vào trước </body> như trong hình
Bước 3. Tận hưởng kết quả
Với các bạn không xài Blogger/Wordpress mà không biết chèn ra sao thì cmt bên dưới. Mình sẽ hỗ trợ nhé!
Demo nút gọi điện xem ở đây:
Mã:
https://phuongvudn.blogspot.comKhi truy cập website bằng điện thoại, click vào nút gọi điện sẽ tự động bật ra app gọi điện, rất tiện lợi ^^
Bước 1. Chèn đoạn link này vào trước thẻ </head>
Mã:
<link rel="stylesheet" href="https://imar.vn/assets/lib/animate.css" type="text/css"/>Bạn có thể lưu đoạn code trong animate.css rồi đưa về Host rồi khai báo link web bạn cũng được nha.
Lưu ý trong file này có 1 link dẫn tới ảnh dienthoai.png, bạn cũng phải tải cái file này đưa lên host (nếu không sẽ bị lỗi không hiển thị đấy
Trường hợp bạn không thích, thì cứ khai báo cái link như trên thôi.
Vậy tìm thẻ </head> chỗ nào?
Với Blogger
Chủ đề --> Chỉnh sửa HTMLVới Blogger
Rồi dán đoạn code trên dưới thẻ </title> là được
Với Wordpress
Vào Giao diện --> Sửa --> Tìm file Header.phpCho vào trước </head> nhé
Bước 2. Đán đoạn code sau vào trước </body>
Mã:
<a href="tel:0907859599" mypage="" rel="nofollow" class="mhide">
<div class="thegioiphang-phone">
<div class="animated infinite zoomIn thegioiphang-ph-circle"></div>
<div class="animated infinite pulse thegioiphang-ph-circle-fill"></div>
<div class="animated infinite tada thegioiphang-ph-img-circle"></div>
</div>
</a>Trong đó 0907859... thay bằng số điện thoại của bạn nhé.
Với Blogger
Với Wordpress
Vào tìm file Footer.php (tương tự cái trên), rồi dán vào trước </body> như trong hình
Nếu muốn sửa kích thước
Nút gọi điện này được tạo bởi 3 vòng tròn với các Class là :- Vòng chứa điện thoại (thegioiphang-ph-img-circle)
- Vòng bao ngoài điện thoại (thegioiphang-ph-circle-fill)
- Đường viền chuyển động (thegioiphang-ph-circle).
Mã:
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE ***************/
.thegioiphang-ph-img-circle{width:30px;height:30px;top:43px;left:43px;}
.thegioiphang-ph-circle-fill{width:60px;height:60px;top:28px;left:28px;}
.thegioiphang-ph-circle{width:90px;height:90px;top:12px;left:12px;}
}Bước 3. Tận hưởng kết quả
Với các bạn không xài Blogger/Wordpress mà không biết chèn ra sao thì cmt bên dưới. Mình sẽ hỗ trợ nhé!
Bài được tham khảo một phần từ trang Smartcode.vn
(Quên link gốc rồi, khi nào tìm ra sẽ ghi link nguồn
(Quên link gốc rồi, khi nào tìm ra sẽ ghi link nguồn
Sửa lần cuối: