Tổng hợp các nút gọi làm hotline đẹp cho blogspot

Hôm nay Công Nghệ Webblog xin chia sẻ tới các bạn các nút gọi đẹp và chuyên nghiệp làm hotline cho website của các bạn. Dưới đây là cách làm và tổng hợp các nút gọi bạn có thể chọn có hình ảnh demo kèm theo.

Cách tích hợp vào website, template blogspot như sau

Bước 1: Vào phần blogger.com --> chủ đề --> Chỉnh sửa HTML

Nếu template blogspot mua tại congnghewebblog.com tìm key
Các template blogspot khác tìm key </body>

Bước 2: Thêm code bên dưới ngay trên thẻ vừa tìm được.
Bước 3: Thay số điện thoại 0966.22.08.xx và 09662208xx thành số điện thoại của bạn
Bước 4: Lưu lại và xem kết quả vừa làm được.

Code các nút goi tương ứng cho template blogspot

Nút gọi 01: Hiệu ứng nháy đẹp mắt, click vào là gọi trên di động

tong-hop-nut-goi-dep-cho-blogspot-not-goi-01

<style>
.fone{font-size:22px;color:#f00;line-height:40px;font-weight:bold;padding-left:45px;margin:0 0}
.fix_tel{position:fixed;bottom:15px;left:20px;z-index:999}
.fix_tel img{max-width:100%;height:auto}
.fix_tel a{text-decoration:none;display:block}
.tel{background:#eee;width:205px;height:40px;position:relative;overflow:hidden;background-size:40px;border-radius:28px;border:solid 1px #ccc}
.ring-alo-phone{background-color:transparent;cursor:pointer;height:80px;position:absolute;transition:visibility 0.5s ease 0s;visibility:hidden;width:80px;z-index:200000!important}
.ring-alo-phone{background-color:transparent;cursor:pointer;height:80px;position:absolute;transition:visibility 0.5s ease 0s;visibility:hidden;width:80px;z-index:200000!important}
.ring-alo-phone.ring-alo-show{visibility:visible}
.ring-alo-phone.ring-alo-hover,.ring-alo-phone:hover{opacity:1}
.ring-alo-ph-circle{animation:1.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim;background-color:transparent;border:2px solid rgba(30,30,30,0.4);border-radius:100%;height:70px;left:10px;opacity:0.1;position:absolute;top:12px;transform-origin:50% 50% 0;transition:all 0.5s ease 0s;width:70px}
.ring-alo-phone.ring-alo-active .ring-alo-ph-circle{animation:1.1s ease-in-out 0s normal none infinite running ring-alo-circle-anim!important}
.ring-alo-phone.ring-alo-static .ring-alo-ph-circle{animation:2.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim!important}
.ring-alo-phone.ring-alo-hover .ring-alo-ph-circle,.ring-alo-phone:hover .ring-alo-ph-circle{border-color:#f00;opacity:0.5}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-circle,.ring-alo-phone.ring-alo-green:hover .ring-alo-ph-circle{border-color:#baf5a7;opacity:0.5}
.ring-alo-phone.ring-alo-green .ring-alo-ph-circle{border-color:#f00;opacity:0.5}
.ring-alo-ph-circle-fill{animation:2.3s ease-in-out 0s normal none infinite running ring-alo-circle-fill-anim;background-color:#000;border:2px solid transparent;border-radius:100%;height:30px;left:30px;opacity:0.1;position:absolute;top:33px;transform-origin:50% 50% 0;transition:all 0.5s ease 0s;width:30px}
.ring-alo-phone.ring-alo-hover .ring-alo-ph-circle-fill,.ring-alo-phone:hover .ring-alo-ph-circle-fill{background-color:rgba(0,175,242,0.5);opacity:0.75!important}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-circle-fill,.ring-alo-phone.ring-alo-green:hover .ring-alo-ph-circle-fill{background-color:rgba(117,235,80,0.5);opacity:0.75!important}
.ring-alo-phone.ring-alo-green .ring-alo-ph-circle-fill{background-color:rgba(0,175,242,0.5);opacity:0.75!important}
.ring-alo-ph-img-circle{animation:1s ease-in-out 0s normal none infinite running ring-alo-circle-img-anim;border:2px solid transparent;border-radius:100%;height:30px;left:30px;opacity:1;position:absolute;top:33px;transform-origin:50% 50% 0;width:30px}
.ring-alo-phone.ring-alo-hover .ring-alo-ph-img-circle,.ring-alo-phone:hover .ring-alo-ph-img-circle{background-color:#f00}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-img-circle,.ring-alo-phone.ring-alo-green:hover .ring-alo-ph-img-circle{background-color:#75eb50}
.ring-alo-phone.ring-alo-green .ring-alo-ph-img-circle{background-color:#f00}
@keyframes ring-alo-circle-anim{0%{opacity:0.1;transform:rotate(0deg) scale(0.5) skew(1deg)}30%{opacity:0.5;transform:rotate(0deg) scale(0.7) skew(1deg)}100%{opacity:0.6;transform:rotate(0deg) scale(1) skew(1deg)}}
@keyframes ring-alo-circle-img-anim{0%{transform:rotate(0deg) 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(0deg) scale(1) skew(1deg)}100%{transform:rotate(0deg) scale(1) skew(1deg)}}
@keyframes ring-alo-circle-fill-anim{0%{opacity:0.2;transform:rotate(0deg) scale(0.7) skew(1deg)}50%{opacity:0.2;transform:rotate(0deg) scale(1) skew(1deg)}100%{opacity:0.2;transform:rotate(0deg) scale(0.7) skew(1deg)}}
.ring-alo-ph-img-circle a img{padding:1px 0 0 1px;width:30px;position:relative;top:-1px}}
/* End Hotline Fixed */
</style>
<div class="fix_tel">
<div class="ring-alo-phone ring-alo-green ring-alo-show" id="ring-alo-phoneIcon" style="right: 150px; bottom: -12px;">
<div class="ring-alo-ph-circle"></div>
<div class="ring-alo-ph-circle-fill"></div>
<div class="ring-alo-ph-img-circle">
<a href="tel:09662208xx">
<img class="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhmQiFBdNXMRExOlVtoR4NA50JvvkhsJpWxeiB39wnPQ-pGEqi3-q5NZNGBZBjSnW8XgKOGibcnb8ZL9lFF_QLQL9rVlHcQKHmMp3-EljS_v3TtQozYlIiiDom8nL3Cgp66bRy_14WtqE/s1600/phone-ring.png"/>
</a>
</div>
</div>
<div class="tel">
<p class="fone">0966.22.08.xx</p>
</div>
</div>

Nút gọi 02: Nút hotline bên góc bên phải màn hình, click vào là gọi trên di động

tong-hop-nut-goi-dep-cho-blogspot-nut-goi-02

<style>
.hotline .phone{margin:0}
.hotline{background:rgba(236,236,236,0.69);width:auto;margin:0 auto;position:fixed;bottom:0;right:0;border-top-left-radius:10px;border-bottom-left-radius:10px}
.hotline-inner{width:235px;margin:0 auto;font-size:20px;padding:6px 0 5px 40px;color:#261511;font-weight:bold;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiecwYGjDlk9e9vqFxr42pZT9uFnTeCdqYiWlM-1cy5MdXyos-sw_3fMh0Xh2tAF_gEYB7G_qNnNbdcjckIfsJTlFJlXi7dizIunnmCRBoDwXTbmNyfRNvsUYG8kEhDB6FKLRq3E0OlXe0/s1600/icon-phone.png) no-repeat 4px 5px;background-size:32px auto}
.hotline .text{font-size:14px;color:#261511;float:none}
</style>
<div class="hotline">
<div class="hotline-inner">
<span class="text">Hotline: </span><span class="phone">0966.22.08.xx</span>
</div>
</div>

Nút gọi 03: Dạng nút gọi khi rê chuột vào nó hiện số điện thoại ra, click vào là gọi trên di động

tong-hop-nut-goi-dep-cho-blogspot-nut-goi-03

<style>
.hotline-fixed{position:fixed;left:15px;bottom:20px;top:initial!important;list-style:none;background-color:rgba(190,1,1,0.7);border-radius:100%;padding:13px 16px;margin-left:11px;color:#fff;z-index:99999;height:50px;width:50px}
.hotline-fixed .fa.fa-phone{font-size:26px}
.hotline-fixed a{font-size:18px;color:#fff;margin:0;position:relative}
.hotline-fixed a:hover{color:#fff}
.number{position:absolute;top:-10px;transition:all .5s;transform:rotateX(90deg);white-space:nowrap}
.hotline-fixed:hover .number{margin-left:24px;transform:rotateX(0deg);background:#be0101;padding:5px 15px;border-radius:0 10px 10px 0}
</style>
<div class="hotline-fixed">
<a href="tel:09662208xx" class="phone_span">
<i class="fa fa-phone"></i>
<span class="number">09662208xx</span>
</a>
</div>

Nút gọi 04: Dạng nút gọi tĩnh. bên góc trái website, click vào là gọi trên di động

tong-hop-nut-goi-dep-cho-blogspot-nut-goi-04

<style>
.hotline-fixed{position:fixed;left:15px;bottom:10px;top:initial!important;list-style:none;background-color:#fff;padding:5px 12px 2px;z-index:99999;border-radius:20px;border:2px solid #d80027}
.hotline-fixed a{font-size:18px;color:#d80027;font-weight:600}
.phone_span img{margin-top:-9px;vertical-align:middle}.number{color:#060}
</style>
<div class='hotline-fixed'>
<a class='phone_span' href='tel:09662208xx'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSYFvmotxuGrRPJMlnNp7mvSTDUwScbkH3tdRFvuJxOia3YFtDFUPaytMujquCLNXuzhBW7ZGclW5nbkEuKeTI1RCKDlCq6zsyIrRnueoznYQ7IUS8Y9KeFSLihECVpeqjh5D8i6n6uzfZ/s1600/telephone.png'/><span class='number'>09662208xx</span></a>
</div>

Nút gọi 05: nút gọi nhấp nháy, không hiện số điện thoại, click vào là gọi trên di động

tong-hop-nut-goi-dep-cho-blogspot-nut-goi-05

<style>
.phonering-alo-phone{position:fixed;visibility:hidden;background-color:transparent;width:200px;height:200px;cursor:pointer;z-index:200000!important;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);transition:visibility .5s;right:150px;top:30px;right:-40px;top:70px;display:block}
.phonering-alo-phone.phonering-alo-show{visibility:visible}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}
.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}
.phonering-alo-phone.phonering-alo-static{opacity:.6}
.phonering-alo-phone.phonering-alo-hover,.phonering-alo-phone:hover{opacity:1}
.phonering-alo-ph-circle{width:160px;height:160px;top:20px;left:20px;position:absolute;background-color:transparent;border-radius:100%!important;border:2px solid rgba(30,30,30,0.4);border:2px solid #bfebfc 9;opacity:.1;-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%}
.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-circle{-webkit-animation:phonering-alo-circle-anim 1.1s infinite ease-in-out!important;animation:phonering-alo-circle-anim 1.1s infinite ease-in-out!important}
.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-circle{-webkit-animation:phonering-alo-circle-anim 2.2s infinite ease-in-out!important;animation:phonering-alo-circle-anim 2.2s infinite ease-in-out!important}
.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone:hover .phonering-alo-ph-circle{border-color:#339b67;opacity:.5}
.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-circle{border-color:#dd0000;/*border-color:#baf5a7;*/opacity:.5}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle{border-color:#339b67;/*border-color:#bfebfc;*/opacity:.5}
.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-circle{border-color:#ccc;opacity:.5}
.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-circle{border-color:#339b67;opacity:.5}
.phonering-alo-ph-circle-fill{width:100px;height:100px;top:50px;left:50px;position:absolute;background-color:#dd0000;border-radius:100%!important;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%}
.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-circle-fill{-webkit-animation:phonering-alo-circle-fill-anim 1.7s infinite ease-in-out!important;animation:phonering-alo-circle-fill-anim 1.7s infinite ease-in-out!important}
.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-circle-fill{-webkit-animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out!important;animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out!important;opacity:0!important}
.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone:hover .phonering-alo-ph-circle-fill{background-color:rgba(0,175,242,0.5);background-color:#00aff2 9;opacity:.75!important}
.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-circle-fill{background-color:rgba(0,0,0,0.5);background-color:#dd0000 9;opacity:.75!important}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle-fill{background-color:rgba(211,0,25,0.5);background-color:#339b67 9}
.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-circle-fill{background-color:rgba(204,204,204,0.5);background-color:#ccc 9;opacity:.75!important}
.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-circle-fill{background-color:rgba(117,235,80,0.5);opacity:.75!important}
.phonering-alo-ph-img-circle{width:60px;height:60px;top:70px;left:70px;position:absolute;background:rgba(30,30,30,0.1) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAB/ElEQVR42uya7W3CMBCG31QM4A1aNggTlG6QbpBMkHYC1AloJ4BOABuEDcgGtBOETnD9c1ERCH/lwxeaV8oPFGP86Hy+DxMREW5Bd7gRjSDSNGn4/RiAOvm8C0ZCRD5PSkQVXSr1nK/xE3mcWimA1ZV3JYBZCIO4giQANoYxMwYS6+xKY4lT5dJPreWZY+uspqSCKPYN27GJVBDXheVSQe494ksiEWTuMXcu1dld9SARxDX1OAJ4lgjy4zDnFsC076A4adEiRwAZg4hOUSpNoCsBPDGM+HqkNGynYBCuILuWj+dgWysGsNe8nwL4GsrW0m2fxZBq9rW0rNcX5MOQ9eZD8JFahcG5g/iKT671alGAYQggpYWvpEPYWrU/HDTOfeRIX0q2SL3QN4tGhZJukVobQyXYWw7WtLDKDIuM+ZSzscyCE9PCy5IttCvnZNaeiGLNHKuz8ZVh/MXTVu/1xQKmIqLEAuJ0fNo3iG5B51oSkeKnsBi/4bG9gYB/lCytU5G9DryFW+3Gm+JLwU7ehbJrwTjq4DJU8bHcVbEV9dXXqqP6uqO5e2/QZRYJpqu2IUAA4B3tXvx8hgKp05QZW6dJqrLTNkB6vrRURLRwPHqtYgkC3cLWQAcDQGGKH13FER/NATzi786+BPDNjm1dMkfjn2pGkBHkf4D8DgBJDuDHx9BN+gAAAABJRU5ErkJggg==) no-repeat center center;border-radius:100%!important;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%}
.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-img-circle{-webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out!important;animation:phonering-alo-circle-img-anim 1s infinite ease-in-out!important}
.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-img-circle{-webkit-animation:phonering-alo-circle-img-anim 0 infinite ease-in-out!important;animation:phonering-alo-circle-img-anim 0 infinite ease-in-out!important}
.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone:hover .phonering-alo-ph-img-circle{background-color:#00aff2}
.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-img-circle{background-color:#dd0000;background-color:#dd0000 9}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-img-circle{background-color:#339b67;background-color:#339b67 9}
.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-img-circle{background-color:#ccc}
.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-img-circle{background-color:#339b67}
@-webkit-keyframes phonering-alo-circle-anim{0%{-webkit-transform:rotate(0) scale(.5) skew(1deg);-webkit-opacity:.1}30%{-webkit-transform:rotate(0) scale(.7) skew(1deg);-webkit-opacity:.5}100%{-webkit-transform:rotate(0) scale(1) skew(1deg);-webkit-opacity:.1}}
@-webkit-keyframes phonering-alo-circle-fill-anim{0%{-webkit-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{-webkit-transform:rotate(0) scale(1) skew(1deg);opacity:.2}100%{-webkit-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}}
@-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)}}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}
@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}
@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}
@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}
@-webkit-keyframes phonering-alo-circle-anim{0%{-webkit-transform:rotate(0) scale(.5) skew(1deg);transform:rotate(0) scale(.5) skew(1deg);opacity:.1}30%{-webkit-transform:rotate(0) scale(.7) skew(1deg);transform:rotate(0) scale(.7) skew(1deg);opacity:.5}100%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg);opacity:.1}}
@keyframes phonering-alo-circle-anim{0%{-webkit-transform:rotate(0) scale(.5) skew(1deg);transform:rotate(0) scale(.5) skew(1deg);opacity:.1}30%{-webkit-transform:rotate(0) scale(.7) skew(1deg);transform:rotate(0) scale(.7) skew(1deg);opacity:.5}100%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg);opacity:.1}}
@-webkit-keyframes phonering-alo-circle-fill-anim{0%{-webkit-transform:rotate(0) scale(.7) skew(1deg);transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg);opacity:.2}100%{-webkit-transform:rotate(0) scale(.7) skew(1deg);transform:rotate(0) scale(.7) skew(1deg);opacity:.2}}
@keyframes phonering-alo-circle-fill-anim{0%{-webkit-transform:rotate(0) scale(.7) skew(1deg);transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg);opacity:.2}100%{-webkit-transform:rotate(0) scale(.7) skew(1deg);transform:rotate(0) scale(.7) skew(1deg);opacity:.2}}
@-webkit-keyframes phonering-alo-circle-img-anim{0%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg)}10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg);transform:rotate(-25deg) scale(1) skew(1deg)}20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg);transform:rotate(25deg) scale(1) skew(1deg)}30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg);transform:rotate(-25deg) scale(1) skew(1deg)}40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg);transform:rotate(25deg) scale(1) skew(1deg)}50%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg)}100%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg)}}
@keyframes phonering-alo-circle-img-anim{0%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg)}10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg);transform:rotate(-25deg) scale(1) skew(1deg)}20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg);transform:rotate(25deg) scale(1) skew(1deg)}30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg);transform:rotate(-25deg) scale(1) skew(1deg)}40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg);transform:rotate(25deg) scale(1) skew(1deg)}50%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg)}100%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg)}}
</style>
<div class="phonering-alo-phone phonering-alo-green phonering-alo-show hidden-xs visible-sm visible-md visible-lg" id="phonering-alo-phoneIcon" style="left: -40px; top: 75%; display: block;">
<div class="phonering-alo-ph-circle"></div>
<div class="phonering-alo-ph-circle-fill"></div>
<a href="tel:09662208xx"></a>
<div class="phonering-alo-ph-img-circle">
<a href="tel:09662208xx"></a>
<a href="tel:09662208xx" class="pps-btn-img " title="Liên hệ">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsI7_4TcG6Q0vnwEBW6yC3FRDLKA9AE8L4dqwgL1mLwUfjTv95FFwEE3o6P-dznJCYz4z98Yg5fd-4NUstIJHXynKWXO0rdjsMbB2sIZ5qhskxtAei81dJkt_M2PxDS7-TrBCOez6pk3g/s1600/v8TniL3.png" alt="Liên hệ" width="50"/>
</a>
</div
</div>

Trên đây là tổng hợp 5 dạng nút gọi đẹp cho webblog, template blogspot đẹp. Các code đều là dạng css và HTML nên sẽ không ảnh hưởng tới tốc độ load trang của website.