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

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é!

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 đặ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/AVvXsEhtCgCHC47jJ_6nQliz5AbBbOtV2xvOz297-fBE3m7b_pRjpFBMDzLoJSI3QyfdT4A8lsMQcPioCOm8XEDuPC0xLBV1t-IBwg3n500PfRah6JDMS1ZnvaH9DbGqAZMklcwo2RpTBc8OIcT4/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>

Bài viết: Nút gọi điện rung lắc cho blogger đượ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