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

Nếu chưa có kinh nghiệm về Blogspot đừng lo lắng mình có dịch vụ Cầm Tay Chỉ Việc, hãy gọi hoặc Zalo ngay cho mình: 097.1539.681 để được tư vấn và hỗ trợ nhanh nhất nhé!

Đoạn code tạo Nút gọi điện rung lắc cho blogspot, cách chèn nút gọi điện thoại rung lắc cho website hoặc blogspot đơn giản và đẹp mắt.

Hướng dẫn tạo nút gọi điện rung lắc cho website cực đẹp trên blogger, blogspot chỉ gồm HTML và CSS. Tiện ích nút gọi điện có hiệu ứng động rung lắc cho website blogspot.

Cách cài đặt như sau: Các bạn copy toàn bộ code bên dưới dán trước thẻ đóng </body> và lưu lại là xong.

<style>

  /*<![CDATA[*/

#phonering-alo-phoneIcon{position:fixed;bottom:10%;left:0;width:70px;height:70px;z-index:99999}.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:70px;height:70px;top:0;left:0;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:#00aff2;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:#75eb50;border-color:#baf5a7;opacity:.5}.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle{border-color:#00aff2;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:#75eb50;opacity:.5}.phonering-alo-ph-circle-fill{width:60px;height:60px;top:5px;left:5px;position:absolute;background-color:#000;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(117,235,80,0.5);background-color:#baf5a7 9;opacity:.75!important}.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle-fill{background-color:rgba(0,175,242,0.5);background-color:#a6e3fa 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{z-index:2;width:40px;height:40px;top:15px;left:15px;position:absolute;background:rgba(30,30,30,0.1) url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx8S4sHOy7ybnineNqw7MzSWezh61D6zreR1YpFZiZ_MMHUY2As8Koon-9D2nVmte6VP9NGcwgrA2-cR0f6_P1SZVLi_CnE6HmUM8HgsonCGuWUB28-hvlrXa9wOKav52FjjMlWVwtFQE/h120/icon_phone_ring.png') no-repeat center center;background-size:30px;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:#75eb50;background-color:#75eb50 9}.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-img-circle{background-color:#00aff2}.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:#75eb50}@-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)}}.label-phone{position:absolute;height:40px;top:15px;left:50%;line-height:40px;background:#00aff2;padding-left:45%;padding-right:15px;opacity:0;visibility:hidden;overflow:hidden;z-index:1;font-size:14px;color:#FFF;border-top-right-radius:40px;border-bottom-right-radius:40px;transition:all 500ms ease}a.pps-btn-img{position:relative;display:block}.phonering-alo-phone:hover .label-phone{opacity:1;visibility:visible}

  /*]]>*/

</style>

<div class='phonering-alo-phone phonering-alo-green phonering-alo-show' id='phonering-alo-phoneIcon'>

<div class='phonering-alo-ph-circle'></div>

<div class='phonering-alo-ph-circle-fill'></div>

<a class='pps-btn-img hidden_lg' href='tel:0971539681' title='Liên hệ'>

<div class='phonering-alo-ph-img-circle'>

</div>

<div class='label-phone'>097.1539.681</div>

</a>

<a class='pps-btn-img hidden_mobile btn-call' href='javascript:void(0);' title='Liên hệ'>

<div class='phonering-alo-ph-img-circle'>

</div>

<div class='label-phone'>097.1539.681</div>

</a>

</div>

Bài viết: Nút gọi điện rung lắc cho blogspot được viết bởi admin trang Giaodien.blog

Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.

Để lại nguồn có nghĩa là bạn tôn trọng tác giả.

Động lực để mình chia sẻ nhiều bài viết hay.

Tags: Blog Contact-widget