Code liên hệ trượt dưới chân trang đẹp cho blogger

Code liên hệ trượt dưới chân trang đẹp cho blogger

Đoạn code này lấy bên aecland.vn rất thích hợp dùng cho các website bán hàng hoặc làm dịch vụ nên sử dụng để giúp cho khách hàng của mình liên hệ dễ dàng hơn.

Có thể giúp gia tăng tỉ lệ gọi điện đặt hàng, thích hợp với các web đang triển khai các chiến dịch chạy bán hàng, kinh doanh online, bất động sản...

Tiện ích liên hệ trượt dưới chân trang web chia làm 3 phần gồm:

Thông tin hotline
Thông tin thanh toán
Chát, Tư vấn online

Bước 1:  Chèn đoạn code HTML trên thẻ đóng </body>

 <div class='site-support'>
<div class='site-content'>
<a href='#'><div class='item toogle-support-item'>
<i aria-hidden='true' class='fa fa-map-marker'/>
<span> AEC Land Bình Châu</span>
</div></a>
<a href='tel:0967 11 33 66'><div class='item toogle-support-item'>
<i aria-hidden='true' class='fa fa-phone'/>
<span>Hotline: <strong>0967 11 33 66</strong></span>
</div></a>
<a href='http://www.aecland.vn/p/lien-he.html' target='_blank'>
<div class='item chat toogle-support-item'>
<div class='download-fill'/>
<i aria-hidden='true' class='fa fa-download'/>
<span><blink>TẢI MẶT BẰNG - BẢNG GIÁ - CHÍNH SÁCH</blink></span>
</div></a>
<div class='contact-fill'/>
<a href='tel:0967 11 33 66 '><div class='item hidden-phone'>
<i aria-hidden='true' class='fa fa-phone'/>
</div></a>
</div>
</div>

Bước 2: Chèn CSS để làm đẹp. Code này chuẩn Responsive nên bạn hoàn toàn có thể yên tâm, hiển thị tốt cho đầy đủ các thiết bị khác nhau. Khi Reponsive nó sẽ hiển thị icon phone rất tiện lợi
Chèn code css sau, trên thẻ đóng ]]></b:skin>

@keyframes quick-alo-circle-fill-anim {
0% {
    transform: rotate(0) scale(.7) skew(1deg);
    opacity: .2;
}
50% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: .2;
}
100% {
    transform: rotate(0) scale(.7) skew(1deg);
    opacity: .2;
}
}
@keyframes quick-alo-circle-img-anim {
0% {
    transform: rotate(0) scale(1) skew(1deg);
}

10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
}
20% {
    transform: rotate(25deg) scale(1) skew(1deg);
}
30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
}
40% {
    transform: rotate(25deg) scale(1) skew(1deg);
}
50% {
    transform: rotate(0) scale(1) skew(1deg);
}
100% {
    transform: rotate(0) scale(1) skew(1deg);
}
}
@media screen and (min-width: 993px) {
  .site-support {
    background: #444;
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: 16px;
    z-index: 1001;
  }
  .site-support .item {
    float: left;
    margin-right: 30px;
    padding: 5px 0;
  }
  .site-support .item.chat {
    background: #663333;
    padding: 5px 20px;
    float: right;
    margin-right: 0;
    position: relative;
  }
.site-support .item.chat:hover {
   background: #00B328;
}
.site-support .item.chat .fa{
    -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%;
    border-radius: 100%;
    padding: 5px 6px;
    font-size: 30px;
    position: absolute;
    left: -20px;
    top: -20px;
    background: #CD843B;
}
  .site-support .item.toogle-support {
    display: none;
  }
  .site-support a {
    color: #fff;
  }
  .site-support .fa {
    color: #633;
    padding: 5px 10px;
    background: #ffcc33;
    border-radius: 100%;
    line-height: 20px;
    width: 30px;
    height: 30px;
  }
.site-content {
    max-width: 1170px;
    margin: 0 auto;
}
.hidden-phone{display:none}
.download-fill {
    width: 80px;
    height: 80px;
    top: -40px;
    left: -40px;
    position: absolute;
    background-color: #CD843B;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 2px solid transparent;
    opacity: .75;
    -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%;
}
}
@media screen and (max-width: 992px) {
.hidden-phone{display:block}
.contact-fill {
    width: 80px;
    height: 80px;
    top: -10px;
    left: -20px;
    position: absolute;
    background-color: #0B5B1D;
    -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%;
}
  .site-support {
    position: fixed;
    left: 20%;
    transform: translateX(-50%);
    bottom: 10px;
    z-index: 1001;
  }
  .site-support .item {
    margin: 10px 0;
    height: 40px;
    line-height: 40px;
    text-align: right;
    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%;
    -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;
  }
  .site-support .item span {
    color: #fff;
    background: #000;
    padding: 5px 10px;
    margin-right: 10px;
    position: relative;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
  }
  .site-support .item span:after {
    position: absolute;
    right: -6px;
    content: &#39;&#39;;
    top: 8px;
    width: 0px;
    height: 0px;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-left: 6px solid #000;
  }
  .site-support .item.toogle-support-item {
    display: none;
    margin-right: 8px;
  }
.site-support .item.toogle-support{display:block}
  .site-support .item.toogle-support .fa {
    width: 56px;
    height: 56px;
    line-height: 56px;
    font-size: 30px;
  }
  .site-support .fa {
    color: #fff;
    float: right;
    font-size: 25px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #2196F3;
    text-align: center;
    border-radius: 50%;
  }
}

Bước 3: Tiến hành lưu lại và xem kết quả