CHIA SẺ CODE TẠO NÚT GỌI NGAY HIỂN THỊ SỐ ĐIỆN THOẠI RUNG LẮC STYLE 2 CHO WEBSITE/BLOGSPOT

Bài viết trước đây mình đã chia sẻ cùng các bạn một kiểu nút gọi ngay dạng rung lắc cho website hay blogspot (Bạn có thể xem tại đây) và hôm nay mình xin chia sẻ thêm một kiểu nút gọi ngay có kèm theo số điện thoại để người truy cập có thể thấy được, kiểu này cũng dạng nút rung lắc đẹp mắt mà bạn có thể sử dụng cho website hay blogspot của mình. Và ở đây mình sẽ hướng dẫn bạn chèn vào trong Blogspot với vài thao tác đơn giản.

Đầu tiên bạn hãy dán đoạn code CSS bên dưới vào trước thẻ ]]></b:skin>

@media screen and (max-width:680px){.call-now-button{display:flex!important;background:transparent }call-now-button .call-text{display:none }}.quick-call-button{display:none }.call-now-button{display:none;z-index:9999;clear:both;margin:0 auto;position:fixed;border-radius:50px }.call-now-button div{display:flex }.call-now-button div p{color:#fff;display:table;padding:10px;border-radius:21px;height:34px;line-height:14px;font-size:14px;margin:8px 5px 8px 50px;text-transform:uppercase;font-weight:normal;text-align:center;box-sizing:content-box;text-decoration:none!important;box-sizing:border-box }.quick-alo-ph-circle.active{width:130px;height:130px;top:-40px;left:-40px;position:absolute;background-color:transparent;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid rgba(30,30,30,.4);opacity:1;-webkit-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;-moz-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;-ms-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;-o-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;animation:quick-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% }.quick-alo-ph-circle-fill.active{width:80px;height:80px;top:-15px;left:-15px;position:absolute;background-color:#000;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;opacity:1;-webkit-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;-moz-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;-ms-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;-o-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;animation:quick-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% }.quick-alo-ph-img-circle.shake{width:50px;height:50px;top:0;left:0;position:absolute;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;opacity:1;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicvQR_WyGLxAZF4ZFPmutWMa5ZtxO-BWTL0UtDXKfND20sclDUft7bMrBy00kSwybCFiyuLJ5YC25KypEee86DgVcELfoDWJcDg28LCc7K6K-eOtqVkvX8UHEoiVQzZ7LcSfoXdCJpfWg0/s1600/quick-call-button.png) no-repeat center center;-webkit-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;-moz-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;-ms-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;-o-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;animation:quick-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% }.quick-alo-phone-img-circle.shake{width:50px;height:50px;top:0;left:0;position:absolute;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;opacity:1;-webkit-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;-moz-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;-ms-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;-o-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;animation:quick-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% }.quick-alo-ph-img-circle.notshake{width:50px;height:50px;top:0;left:0;position:absolute;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;opacity:1;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50% }.quick-alo-phone-img-circle.notshake{width:50px;height:50px;top:0;left:0;position:absolute;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;opacity:1;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50% }@media screen and (max-width: 8600px) {.call-now-button {display: flex !important;background: #03db39;}.quick-call-button {display: block !important;}}.call-now-button {top: 90%;}.call-now-button {left: 3%;}.call-now-button {background: #03db39;}.call-now-button div a .quick-alo-ph-img-circle, .call-now-button div a .quick-alo-phone-img-circle {background-color: #f00;}.call-now-button .call-text {font-weight:500;font-family:'oswald';color: #fff;}@-moz-keyframes quick-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 quick-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 quick-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 quick-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 quick-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 quick-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 quick-alo-circle-img-anim{10%{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 quick-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 quick-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) }}

Tiếp theo bạn chèn code HTML bên dưới vào sau thẻ <body>

<div class='quick-call-button'></div>
<div class='call-now-button'>
<div><p class='call-text'> Hotline: 0917 756 426</p>
<a href='tel:0917756426' title='Gọi ngay' >
<div class='quick-alo-ph-circle active'></div>
<div class='quick-alo-ph-circle-fill active'></div>
<div class='quick-alo-ph-img-circle shake'></div>
</a>
</div>
</div>

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

Cuối cùng Lưu lại là xong

Chúc bạn thành công!

Admin: Lê Quốc Dũng

Chào mừng bạn đã đến với Blog của tôi. Website chia sẻ Thủ Thuật - Phần Mềm - Ảnh Đẹp - PSD tổng hợp, ... được cập nhật liên tục. Mong được mọi người quan tâm.