Tạo nút gọi điện rung lắc cho Website

[rs_lyly2009]

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:

https://phuongvudn.blogspot.com

(ở 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>

<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 HTML

Rồi dán đoạn code trên dưới thẻ </title> là được . Nhớ lưu lại nhé.

Với Wordpress​

Vào Giao diện --> Sửa --> Tìm file Header.php

Cho vào trước </head> nhé

Bước 2. Đán đoạn code sau vào trước </body>

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

Để sửa kích thước, màu sắc... của nút gọi điện này trên thiết bị di động, các bạn kéo xuống dưới file anmate.css sẽ thấy:

@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 )​

 

[rs_lyly2009]

Cái viền chạy hơi bị lệch chút (nếu để chạy chậm lại =))) ) nhưng mình nghĩ để nhanh như hiện tại thì chả ai để ý đâu
@zArtemis