5 bình luận · lượt xem

Tiện ích nút gọi điện có hiệu ứng động cho website blogspot



Tiện ích này sử dụng CSS và HTML để tạo ra hiệu ứng cho icon di động động. Thường được sử dụng trên các trang bán hàng để nhằm thu hút khách hàng click vào để gọi điện thoại liên hệ trực tiếp cho người bán.

Nút gọi có hiệu ứng rung lắc để nhầm gia tăng cuộc gọi để tăng khả năng bán hàng từ Website. Code có thể cài đặt cho mọi website từ Wordpress, Blogspot hay các website 2.0, PHP, HTML..vv

Khi sử dụng di động click vào biểu tượng này ứng dụng gọi điện sẽ tự động lấy số điện thoại của người. Trên máy tính (Laptop, PC) thì ứng dụng ở mở phần mềm chat Skype.


Tiện ích tạo icon điện thoại có hiệu ứng động
Tiện ích tạo icon điện thoại có hiệu ứng động
Cách thực hiện
Cài đặt tiện ích icon điện thoại động cho Blogger

1. Vào blogger.com truy cập vào giao diện

Chèn code CSS trên trước thẻ ]]></b:skin>

.alo-ph-img-circle{width:30px;height:30px;top:35px;left:35px;position:absolute;background:rgba(30,30,30,0.1) url(https://1.bp.blogspot.com/-UbTOXZnLovo/V9kU1RLbX4I/AAAAAAAAGYA/4qQQ0CBifcM8IlNe7f-aVL2Ln-wzLcF4wCLcB/s1600/alo.png) no-repeat center center;background-size:contain;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;opacity:.7;-webkit-animation:alo-circle-img-anim 1s infinite ease-in-out;-moz-animation:alo-circle-img-anim 1s infinite ease-in-out;-ms-animation:alo-circle-img-anim 1s infinite ease-in-out;-o-animation:alo-circle-img-anim 1s infinite ease-in-out;animation:alo-circle-img-anim 1s infinite ease-in-out;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%}.alo-phone{position:fixed;visibility:hidden;background-color:transparent;width:100px;height:100px;cursor:pointer;z-index:999;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transition:visibility .5s;-moz-transition:visibility .5s;-o-transition:visibility .5s;transition:visibility .5s;right:0;top:0}.alo-phone.alo-show{visibility:visible}.alo-phone:hover{opacity:1}.alo-ph-circle{width:100px;height:100px;top:0;left:0;position:absolute;background-color:transparent;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid rgba(30,30,30,0.4);border:2px solid #bfebfc ;opacity:.1;-webkit-animation:alo-circle-anim 1.2s infinite ease-in-out;-moz-animation:alo-circle-anim 1.2s infinite ease-in-out;-ms-animation:alo-circle-anim 1.2s infinite ease-in-out;-o-animation:alo-circle-anim 1.2s infinite ease-in-out;animation:alo-circle-anim 1.2s infinite ease-in-out;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%}.alo-phone:hover .alo-ph-circle,.hotline&gt;a:hover .alo-ph-circle{border-color:#00aff2;opacity:.5}.alo-phone.alo-green:hover .alo-ph-circle,.hotline&gt;a:hover .alo-ph-circle{border-color:#04AFEF;border-color:#baf5a7 ;opacity:.5}.alo-phone.alo-green .alo-ph-circle{border-color:#ffbc0a;border-color:#bfebfc ;opacity:.5}.alo-ph-circle-fill{width:60px;height:60px;top:20px;left:20px;position:absolute;background-color:#000;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;opacity:.1;-webkit-animation:alo-circle-fill-anim 2.3s infinite ease-in-out;-moz-animation:alo-circle-fill-anim 2.3s infinite ease-in-out;-ms-animation:alo-circle-fill-anim 2.3s infinite ease-in-out;-o-animation:alo-circle-fill-anim 2.3s infinite ease-in-out;animation:alo-circle-fill-anim 2.3s infinite ease-in-out;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%}.alo-phone:hover .alo-ph-circle-fill,.hotline&gt;a:hover .alo-ph-circle-fill{background-color:rgba(0,175,242,0.5);background-color:#00aff2 ;opacity:.75!important}.alo-phone.alo-green:hover .alo-ph-circle-fill,.hotline&gt;a:hover .alo-ph-circle-fill{background-color:rgba(4,175,239,0.5);background-color:#baf5a7 ;opacity:.75!important}.alo-phone.alo-green .alo-ph-circle-fill{background-color:rgba(255,188,10,0.5);background-color:#ffbc0a ;opacity:.75!important}.alo-phone:hover .alo-ph-img-circle,.hotline&gt;a:hover .alo-ph-img-circle{background-color:#00aff2}.alo-phone.alo-green.alo-hover .alo-ph-img-circle,.alo-phone.alo-green:hover .alo-ph-img-circle,.hotline&gt;a:hover .alo-ph-img-circle{background-color:#04AFEF;background-color:#04AFEF}.alo-phone.alo-green .alo-ph-img-circle{background-color:#ffbc0a;background-color:#ffbc0a }@-moz-keyframes alo-circle-anim{0%{transform:rotate(0) scale(.5) skew(1deg);opacity:.1}30%{transform:rotate(0) scale(.7) skew(1deg);opacity:.5}100%{transform:rotate(0) scale(1) skew(1deg);opacity:.1}}@-webkit-keyframes alo-circle-anim{0%{transform:rotate(0) scale(.5) skew(1deg);opacity:.1}30%{transform:rotate(0) scale(.7) skew(1deg);opacity:.5}100%{transform:rotate(0) scale(1) skew(1deg);opacity:.1}}@-o-keyframes alo-circle-anim{0%{transform:rotate(0) scale(.5) skew(1deg);opacity:.1}30%{transform:rotate(0) scale(.7) skew(1deg);opacity:.5}100%{transform:rotate(0) scale(1) skew(1deg);opacity:.1}}@keyframes alo-circle-anim{0%{transform:rotate(0) scale(.5) skew(1deg);opacity:.1}30%{transform:rotate(0) scale(.7) skew(1deg);opacity:.5}100%{transform:rotate(0) scale(1) skew(1deg);opacity:.1}}@-moz-keyframes alo-circle-fill-anim{0%{transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{transform:rotate(0) scale(1) skew(1deg);opacity:.2}100%{transform:rotate(0) scale(.7) skew(1deg);opacity:.2}}@-webkit-keyframes alo-circle-fill-anim{0%{transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{transform:rotate(0) scale(1) skew(1deg);opacity:.2}100%{transform:rotate(0) scale(.7) skew(1deg);opacity:.2}}@-o-keyframes alo-circle-fill-anim{0%{transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{transform:rotate(0) scale(1) skew(1deg);opacity:.2}100%{transform:rotate(0) scale(.7) skew(1deg);opacity:.2}}@keyframes alo-circle-fill-anim{0%{transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{transform:rotate(0) scale(1) skew(1deg);opacity:.2}100%{transform:rotate(0) scale(.7) skew(1deg);opacity:.2}}@-moz-keyframes alo-circle-img-anim{0%{transform:rotate(0) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0) scale(1) skew(1deg)}100%{transform:rotate(0) scale(1) skew(1deg)}}@-webkit-keyframes alo-circle-img-anim{0%{transform:rotate(0) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0) scale(1) skew(1deg)}100%{transform:rotate(0) scale(1) skew(1deg)}}@-o-keyframes alo-circle-img-anim{0%{transform:rotate(0) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0) scale(1) skew(1deg)}100%{transform:rotate(0) scale(1) skew(1deg)}}@keyframes alo-circle-img-anim{0%{transform:rotate(0) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0) scale(1) skew(1deg)}100%{transform:rotate(0) scale(1) skew(1deg)}}#alo-fixed{visibility:visible;opacity:0;position:fixed;right:-100px;top:100px}#alo-fixed.show{right:10px;visibility:visible;opacity:1}

2. Chèn HTML hiển thị

Chèn trước thể đóng </body>
<a href="tel:0932913631" rel="nofollow" > <div class="alo-phone alo-green alo-show"> <div class="alo-ph-circle"></div> <div class="alo-ph-circle-fill"></div> <div class="alo-ph-img-circle"></div> </div></a>

Thay 0932913631 thành số điện thoại của bạn.

[NÂNG CAO]

1. Chỉ hiện thị icon gọi điện trên Điện thoại (Mobile)

Bạn chỉ việc thêm điều kiện hiển thị trên Mobile là được, lúc này nút gọi chỉ xuất hiện trên Điện thoại (Mobile) hoặc Tablet
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<a href="tel:0932913631" rel="nofollow" > <div class="alo-phone alo-green alo-show"> <div class="alo-ph-circle"></div> <div class="alo-ph-circle-fill"></div> <div class="alo-ph-img-circle"></div> </div></a>
</b:if>

2. Thay đổi vị trí của Nút gọi điện thoại

Thay lại thông số CSS như sau: top:35px;left:35px bằng 1 trong số bên dưới
  1. top:35px;left:35px (Phía trên bên trái: Mặc định)
  2. bottom:35px;left:35px (Phía dưới bên trái)
  3. top:35px;right:35px (Phía trên bên phải)
  4. bottom:35px;right:35px (Phía trên bên trái)
Tìm trên Google:
  • tạo nút gọi trên blogspot
  • tạo nút gọi rung lắc
  • nút gọi điện trên web
  • click số điện thoại để gọi trên website
  • tạo nút call cho blogspot
  • call now button
  • plugin gọi điện thoại wordpress
  • nút gọi điện trên web wordpress
Chúc các bạn thành công!



Có thể bạn thích

5 nhận xét:

NỘI QUY:
  • Mọi bình luận sai điều khoản sử dụng sẽ bị xóa mà không cần báo trước.
  • Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi Admin phản hồi.
  • Khi xuất bản bài viết chắc chắn không tránh khỏi lỗi về chính tả, cú pháp.

Hãy cùng tham gia bình luận về bài viết này nhé!

  1. bác ơi cho em hỏi làm sao để khi click vào cái icon điện thoại thì nó sẽ hiện ra cái khung hiện để nhập số điện thoại giống trên trang coccoc vậy bác, thanks bác :v

    Trả lờiXóa
  2. Tiện ích rất hay.
    Mình muốn biểu tượng điện thoại ở dưới cùng màn hình. Mình tìm sửa nhưng vẫn chưa được. Bạn có thể làm 1 bài cho biểu tượng dưới cùng được không. Cảm ơn bạn.

    Trả lờiXóa
    Trả lời
    1. Bạn phải sửa chỗ này nhé:
      .alo-phone{position:fixed;visibility:hidden;background-color:transparent;width:100px;height:100px;cursor:pointer;z-index:999;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transition:visibility .5s;-moz-transition:visibility .5s;-o-transition:visibility .5s;transition:visibility .5s;right:0;top:0}

      Sửa 'top' thành 'bottom' nhé

      Xóa
  3. k cho nó chuyển động lên xuống dc bác ơi?

    Trả lờiXóa
  4. Chào Pro!
    Mình làm sao trên máy tính bàn, click vào nó vào trang liên hệ, còn trên di động thì vào gọi okie rồi, còn cái máy tình bàn cho nó vào trang liên hệ dc không ah

    Trả lờiXóa