Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

Nút gọi điện rung lắc cho blogger

2 min read
Chia sẻ tiện ích Nút gọi điện rung lắc cho blogger blogspot đẹp, phù hợp với blogspot bán hàng, bất động sản, dịch vụ chăm sóc khách hàng.

Nút gọ điện rung lắc cho blogger

Nút gọi điện rung lắc cho blogger cài đặt dễ dàng, các bạn chỉ cần copy đoạn code bên dưới dán trước thẻ đóng </body> của template blogspot là lưu lại là xong.

<style>
.ew-alo-phone{position:fixed;left:0;bottom:4%;z-index:9999}
.ew-alo-phone .call-text{margin-top:53px;margin-left:53px;padding:0 15px 0 50px;background:#000;border-radius:50px;line-height:40px;font-size:16px}
.ew-alo-phone .call-text a{color:#fff}
.ew-alo-ph-circle{width:100px;height:100px;top:20px;left:20px;position:absolute;background-color:transparent;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid rgba(30,30,30,.4);border:2px solid #48a5d4 9;opacity:.1;-webkit-animation:ew-alo-circle-anim 1.2s infinite ease-in-out;-moz-animation:ew-alo-circle-anim 1.2s infinite ease-in-out;-ms-animation:ew-alo-circle-anim 1.2s infinite ease-in-out;-o-animation:ew-alo-circle-anim 1.2s infinite ease-in-out;animation:ew-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%}
.ew-alo-phone.ew-alo-active .ew-alo-ph-circle{-webkit-animation:ew-alo-circle-anim 1.1s infinite ease-in-out!important;-moz-animation:ew-alo-circle-anim 1.1s infinite ease-in-out!important;-ms-animation:ew-alo-circle-anim 1.1s infinite ease-in-out!important;-o-animation:ew-alo-circle-anim 1.1s infinite ease-in-out!important;animation:ew-alo-circle-anim 1.1s infinite ease-in-out!important}
.ew-alo-phone.ew-alo-static .ew-alo-ph-circle{-webkit-animation:ew-alo-circle-anim 2.2s infinite ease-in-out!important;-moz-animation:ew-alo-circle-anim 2.2s infinite ease-in-out!important;-ms-animation:ew-alo-circle-anim 2.2s infinite ease-in-out!important;-o-animation:ew-alo-circle-anim 2.2s infinite ease-in-out!important;animation:ew-alo-circle-anim 2.2s infinite ease-in-out!important}
.ew-alo-phone.ew-alo-hover .ew-alo-ph-circle,.ew-alo-phone:hover .ew-alo-ph-circle{border-color:#309acf;opacity:.5}
.ew-alo-phone.ew-alo-green.ew-alo-hover .ew-alo-ph-circle,.ew-alo-phone.ew-alo-green:hover .ew-alo-ph-circle{border-color:#fdaa38;border-color:#ffc272 9;opacity:.5}
.ew-alo-phone.ew-alo-green .ew-alo-ph-circle{border-color:#309acf;border-color:#48a5d4 9;opacity:.5}
.ew-alo-phone.ew-alo-gray.ew-alo-hover .ew-alo-ph-circle,.ew-alo-phone.ew-alo-gray:hover .ew-alo-ph-circle{border-color:#ccc;opacity:.5}
.ew-alo-phone.ew-alo-gray .ew-alo-ph-circle{border-color:#fdaa38;opacity:.5}
.ew-alo-ph-circle-fill{width:100px;height:100px;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:ew-alo-circle-fill-anim 2.3s infinite ease-in-out;-moz-animation:ew-alo-circle-fill-anim 2.3s infinite ease-in-out;-ms-animation:ew-alo-circle-fill-anim 2.3s infinite ease-in-out;-o-animation:ew-alo-circle-fill-anim 2.3s infinite ease-in-out;animation:ew-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%}
.ew-alo-phone.ew-alo-active .ew-alo-ph-circle-fill{-webkit-animation:ew-alo-circle-fill-anim 1.7s infinite ease-in-out!important;-moz-animation:ew-alo-circle-fill-anim 1.7s infinite ease-in-out!important;-ms-animation:ew-alo-circle-fill-anim 1.7s infinite ease-in-out!important;-o-animation:ew-alo-circle-fill-anim 1.7s infinite ease-in-out!important;animation:ew-alo-circle-fill-anim 1.7s infinite ease-in-out!important}
.ew-alo-phone.ew-alo-static .ew-alo-ph-circle-fill{-webkit-animation:ew-alo-circle-fill-anim 2.3s infinite ease-in-out!important;-moz-animation:ew-alo-circle-fill-anim 2.3s infinite ease-in-out!important;-ms-animation:ew-alo-circle-fill-anim 2.3s infinite ease-in-out!important;-o-animation:ew-alo-circle-fill-anim 2.3s infinite ease-in-out!important;animation:ew-alo-circle-fill-anim 2.3s infinite ease-in-out!important;opacity:0!important}
.ew-alo-phone.ew-alo-hover .ew-alo-ph-circle-fill,.ew-alo-phone:hover .ew-alo-ph-circle-fill{background-color:rgba(0,175,242,.5);background-color:#309acf 9;opacity:.75!important}
.ew-alo-phone.ew-alo-green.ew-alo-hover .ew-alo-ph-circle-fill,.ew-alo-phone.ew-alo-green:hover .ew-alo-ph-circle-fill{background-color:rgba(117,235,80,.5);background-color:#ffc272 9;opacity:.75!important}
.ew-alo-phone.ew-alo-green .ew-alo-ph-circle-fill{background-color:rgba(0,175,242,.5);background-color:#a6e3fa 9;opacity:.75!important}
.ew-alo-phone.ew-alo-gray.ew-alo-hover .ew-alo-ph-circle-fill,.ew-alo-phone.ew-alo-gray:hover .ew-alo-ph-circle-fill{background-color:rgba(204,204,204,.5);background-color:#ccc 9;opacity:.75!important}
.ew-alo-phone.ew-alo-gray .ew-alo-ph-circle-fill{background-color:rgba(117,235,80,.5);opacity:.75!important}
.ew-alo-ph-img-circle{width:40px;height:40px;top:50px;left:50px;position:absolute;background:rgba(30,30,30,.1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggnzH9csTbtYNpPo6A1zwGHJiCxEBua8y6Ivrv99qdN5hLrUK67mCJAkTKRNSBIPmb_OGBZSum48_C0ASokl3DCmcQE-cKp0TQ4khAzJ_Tm3aO80n7NmuRMABfDrtm41RmvxKeP4xDs5Er/s1600/icon-phone.png) no-repeat center center;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;opacity:1;-webkit-animation:ew-alo-circle-img-anim 1s infinite ease-in-out;-moz-animation:ew-alo-circle-img-anim 1s infinite ease-in-out;-ms-animation:ew-alo-circle-img-anim 1s infinite ease-in-out;-o-animation:ew-alo-circle-img-anim 1s infinite ease-in-out;animation:ew-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%}
.ew-alo-ph-img-circle{background-size:30px 30px}
.ew-alo-phone.ew-alo-active .ew-alo-ph-img-circle{-webkit-animation:ew-alo-circle-img-anim 1s infinite ease-in-out!important;-moz-animation:ew-alo-circle-img-anim 1s infinite ease-in-out!important;-ms-animation:ew-alo-circle-img-anim 1s infinite ease-in-out!important;-o-animation:ew-alo-circle-img-anim 1s infinite ease-in-out!important;animation:ew-alo-circle-img-anim 1s infinite ease-in-out!important}
.ew-alo-phone.ew-alo-static .ew-alo-ph-img-circle{-webkit-animation:ew-alo-circle-img-anim 0s infinite ease-in-out!important;-moz-animation:ew-alo-circle-img-anim 0s infinite ease-in-out!important;-ms-animation:ew-alo-circle-img-anim 0s infinite ease-in-out!important;-o-animation:ew-alo-circle-img-anim 0s infinite ease-in-out!important;animation:ew-alo-circle-img-anim 0s infinite ease-in-out!important}
.ew-alo-phone.ew-alo-hover .ew-alo-ph-img-circle,.ew-alo-phone:hover .ew-alo-ph-img-circle{background-color:#309acf}
.ew-alo-phone.ew-alo-green.ew-alo-hover .ew-alo-ph-img-circle,.ew-alo-phone.ew-alo-green:hover .ew-alo-ph-img-circle{background-color:#fdaa38}
.ew-alo-phone.ew-alo-green .ew-alo-ph-img-circle{background-color:#e90000}
.ew-alo-phone.ew-alo-gray.ew-alo-hover .ew-alo-ph-img-circle,.ew-alo-phone.ew-alo-gray:hover .ew-alo-ph-img-circle{background-color:#ccc}
.ew-alo-phone.ew-alo-gray .ew-alo-ph-img-circle{background-color:#fdaa38}
@-moz-keyframes ew-alo-circle-anim{0%{-moz-transform:rotate(0) scale(.5) skew(1deg);opacity:.1;-moz-opacity:.1;-webkit-opacity:.1;-o-opacity:.1}30%{-moz-transform:rotate(0) scale(.7) skew(1deg);opacity:.5;-moz-opacity:.5;-webkit-opacity:.5;-o-opacity:.5}100%{-moz-transform:rotate(0) scale(1) skew(1deg);opacity:.6;-moz-opacity:.6;-webkit-opacity:.6;-o-opacity:.1}}
@-webkit-keyframes ew-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}}
@-o-keyframes ew-alo-circle-anim{0%{-o-transform:rotate(0) kscale(.5) skew(1deg);-o-opacity:.1}30%{-o-transform:rotate(0) scale(.7) skew(1deg);-o-opacity:.5}100%{-o-transform:rotate(0) scale(1) skew(1deg);-o-opacity:.1}}
@-moz-keyframes ew-alo-circle-fill-anim{0%{-moz-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{-moz-transform:rotate(0) -moz-scale(1) skew(1deg);opacity:.2}100%{-moz-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}}
@-webkit-keyframes ew-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}}
@-o-keyframes ew-alo-circle-fill-anim{0%{-o-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{-o-transform:rotate(0) scale(1) skew(1deg);opacity:.2}100%{-o-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}}
@-moz-keyframes ew-alo-circle-img-anim{0%{transform:rotate(0) scale(1) skew(1deg)}10%{-moz-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-moz-transform:rotate(25deg) scale(1) skew(1deg)}30%{-moz-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-moz-transform:rotate(25deg) scale(1) skew(1deg)}50%{-moz-transform:rotate(0) scale(1) skew(1deg)}100%{-moz-transform:rotate(0) scale(1) skew(1deg)}}
@-webkit-keyframes ew-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)}}
@-o-keyframes ew-alo-circle-img-anim{0%{-o-transform:rotate(0) scale(1) skew(1deg)}10%{-o-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-o-transform:rotate(25deg) scale(1) skew(1deg)}30%{-o-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-o-transform:rotate(25deg) scale(1) skew(1deg)}50%{-o-transform:rotate(0) scale(1) skew(1deg)}100%{-o-transform:rotate(0) scale(1) skew(1deg)}}
@media screen and (max-width:991px){.ew-alo-phone{bottom:22%}}
</style>
<div class='ew-alo-phone ew-alo-green ew-alo-show'>
<p class='hidden-xs hidden-sm call-text'><a href='tel:097 1539 681'>097 1539 681</a></p>
<a data-original-title='Liên hệ với chúng tôi' href='tel:097 1539 681' title=''>
<div class='ew-alo-ph-circle'></div>
<div class='ew-alo-ph-circle-fill'></div>
<div class='ew-alo-ph-img-circle'></div>
</a>
</div>

You may like these posts

  • Chia sẻ tới các bạn đang dùng mẫu template blogspot một Tiện ích Contact cho blogspot đẹp hiện đại, phù hợp cho blgospot bán hàng, tư vấn dịch vụ.Tiện ích Contact cho blogspot…
  • Thêm một Tiện ích liên hệ zalo gọi điện cho trang web hoặc blogspot, tiện ích hiển thị đẹp bao gồm zalo, messenger, gọi điện và maps.Blogspot của bạn đang bán hàng hoặc làm dị…
  • Chia sẻ tiện ích Nút gọi điện rung lắc cho blogger blogspot đẹp, phù hợp với blogspot bán hàng, bất động sản, dịch vụ chăm sóc khách hàng.Nút gọi điện rung lắc cho blogger cài…
  • Chia sẻ mẫu Tiện ích liên hệ Zalo Messenger Gọi điện đẹp, nút Zalo rung lắc phù hợp với nhiều blogspot bán hàng, tư vấn dịch vụ.Tiện ích liên hệ Zalo Messenger hiện thị cố địn…
  • Hướng dẫn tạo Tiện ích liên hệ cho blogspot gồm Gọi điện, Email, Zalo, Facebook, Maps phù hợp cho trang blogspot bán hàng.Hướng dẫn cài đặt: Các bạn copy toàn bộ nội dung…
  • Sau đây mình hướng dẫn các bạn cách thêm tiện ích liên hệ cho blogspot bao gồm nút gọi điện, liên hệ, zalo, facebook. Khi cuộn trang thì tiện ích liên hệ sẽ hiển thị, rất ti…

Post a Comment

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Learn More