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

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

1 min read
Hướng dẫn các bạn tạo Nút gọn điện rung lắc cho blogspot đơn giản dễ làm, phù hợp cho blogspot bán hàng, tư vấn dịch vụ, chốt đơn.

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


Cách cài đặt đơn giản là bạn chỉ cần copy toàn bộ code dán trước thẻ </body> và lưu lại là xong.

<style>
.hotline-phone-ring-wrap{position:fixed;bottom:0;left:0;z-index:999999}
.hotline-phone-ring{position:relative;visibility:visible;background-color:transparent;width:110px;height:110px;cursor:pointer;z-index:11;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);transition:visibility .5s;left:0;bottom:0;display:block}
.hotline-phone-ring-circle{width:85px;height:85px;top:10px;left:10px;position:absolute;background-color:transparent;border-radius:100%;border:2px solid #e60808;-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%;opacity:0.5}
.hotline-phone-ring-circle-fill{width:55px;height:55px;top:25px;left:25px;position:absolute;background-color:rgba(230,8,8,0.7);border-radius:100%;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%}
.hotline-phone-ring-img-circle{background-color:#e60808;width:33px;height:33px;top:37px;left:37px;position:absolute;background-size:20px;border-radius:100%;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%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;align-items:center;justify-content:center}
.hotline-phone-ring-img-circle .pps-btn-img{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}
.hotline-phone-ring-img-circle .pps-btn-img img{width:20px;height:20px}
.hotline-bar{position:absolute;background:rgba(230,8,8,0.75);height:40px;width:180px;line-height:40px;border-radius:3px;padding:0 10px;background-size:100%;cursor:pointer;transition:all 0.8s;-webkit-transition:all 0.8s;z-index:9;box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.1);border-radius:50px!important;left:33px;bottom:37px}
.hotline-bar > a{color:#fff;text-decoration:none;font-size:15px;font-weight:bold;text-indent:50px;display:block;letter-spacing:1px;line-height:40px;font-family:Arial}
.hotline-bar > a:hover,.hotline-bar > a:active{color:#fff}
@-webkit-keyframes phonering-alo-circle-anim{0%{-webkit-transform:rotate(0) scale(0.5) skew(1deg);-webkit-opacity:0.1}30%{-webkit-transform:rotate(0) scale(0.7) skew(1deg);-webkit-opacity:0.5}100%{-webkit-transform:rotate(0) scale(1) skew(1deg);-webkit-opacity:0.1}}
@-webkit-keyframes phonering-alo-circle-fill-anim{0%{-webkit-transform:rotate(0) scale(0.7) skew(1deg);opacity:0.6}50%{-webkit-transform:rotate(0) scale(1) skew(1deg);opacity:0.6}100%{-webkit-transform:rotate(0) scale(0.7) skew(1deg);opacity:0.6}}
@-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)}}
@media (max-width:768px){.hotline-bar{display:none}}
</style>
<div class='hotline-phone-ring-wrap'>
  <div class='hotline-phone-ring'>
    <div class='hotline-phone-ring-circle'></div>
    <div class='hotline-phone-ring-circle-fill'></div>
    <div class='hotline-phone-ring-img-circle'>
      <a class='pps-btn-img' href='tel:0971539681' rel='noreferrer'>
        <img alt='Gọi điện thoại' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9R-HfxvDBXCr77m06T_iwpIfRyyGnYLW9x_a4uUsfugzKxS_lwhiKKzPx9WAZpw3M4SQx5-OvdFaxFInmiG34oAdQVauJp9I9g46UcQcjwRtkC7P_FLqj2E6NVVfYnKuAT1nN3Y5p5DY1/s1600/icon-call-nh.png' width='50' />
      </a>
    </div>
  </div>
  <div class='hotline-bar'>
    <a href='tel:0971539681' rel='noreferrer'>
      <span class='text-hotline'>097 1539 681</span>
    </a>
  </div>
</div>

You may like these posts

  • Chia sẻ code Tiện ích Zalo gọi điện cho blogspot đẹp phù hợp với blogspot bán hàng, blogspot làm dịch vụ tư vấn hoặc các website khác tương tự.Các bạn chỉ cần copy toàn bộ đoạ…
  • Hướng dẫn các bạn tạo Nút gọn điện rung lắc cho blogspot đơn giản dễ làm, phù hợp cho blogspot bán hàng, tư vấn dịch vụ, chốt đơn.Cách cài đặt đơn giản là bạn chỉ cần copy toà…
  • Chia sẻ tới các bạn Bộ Social liên hệ cho blogspot đẹp phù hợp với template blogspot bán hàng, dịch vụ, tư vấn sản phẩm.Bộ tiện ích liên hệ đẹp cho blogspot gồm: Zalo, Messeng…
  • Hướng dẫn các bạn cài đặt Tiện ích liên hệ Facebook Zalo Gọi điện rung lắc nằm cố định bên phải trang web hoặc blogspot, phù hợp cho các template blogspot bán hàng.Cách cài đặ…
  • Chia sẻ tiện ích Thanh liên hệ cho blogspot nằm bên phải của blogspot phù hợp với mẫu template blogspot bán hàng, giúp khách hàng liên hệ một cách dễ dàng.Cách cài đặt là các …
  • 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…

Post a Comment

Cookies Consent

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

Learn More