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

LongAnIT 11/03/2018
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="bottom_support" style="z-index:999px;">
<div class="wrap_bottom">
  <div class="hotline_bottom">
          <span class="ico"><img src="https://1.bp.blogspot.com/-2t8Fkz-XcxY/V34e6T2c2zI/AAAAAAAAFTU/TljIpi_TLjs1HttVtsWB-mEsS1fPrAhpwCLcB/s1600/bottom_support_ico_phone.png"/></span>
         <div class="txt">Hotline: <strong>0254 37 87 222</strong> <span>(kỹ thuật)</span> - <strong>0254 37 87 222</strong> <span>(CSKH)</span></div>
        </div>
        <div class="guide_payment">
         <a target="_blank" href="#">
             <span class="ico"><img src="https://4.bp.blogspot.com/-HcT7Kt4C8VA/V34fL1DNrWI/AAAAAAAAFTc/UI3fSHd7TesOTyf94TjnShxvy8quhImLACLcB/s1600/bottom_support_ico_guidepayment.png"/></span>
                <span class="txt">Hướng dẫn thanh toán</span>
            </a>
        </div>
        <div class="advisory_online">
         <a target="_blank" href="#">
             <span class="ico"><img src="https://2.bp.blogspot.com/-C5F14CaOBhc/V34fL7_9p8I/AAAAAAAAFTY/QaXidsUV5xk_GaKaDZY8XW2lHMNT0XUkwCLcB/s1600/bottom_support_ico_advisoryonline.png"/></span>
                <span class="txt">Tư vấn online</span>
            </a>
        </div>
    </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>
.bottom_support{height:45px;width:100%;position:fixed;bottom:0;background:#32a22d;font-family:'Roboto Condensed', sans-serif;color:#fff;line-height:45px;z-index:9999}
.bottom_support a{font-family:'Roboto Condensed', sans-serif;color:#fff;line-height:45px;font-size:18px}
.wrap_bottom{max-width:1380px;margin:0 auto}
.bottom_support .hotline_bottom{background:#32a22d;width:40%;float:left;font-size:16px;margin-left:5%;position:relative}
.bottom_support .hotline_bottom .ico{width:16%;position:absolute;bottom:0}
.bottom_support .hotline_bottom .txt{margin-left:16%}
.bottom_support .hotline_bottom .ico img{max-width:100%}
.bottom_support .hotline_bottom strong{font-weight:bold;font-size:19px}
.bottom_support .hotline_bottom span{font-size:13px}
.bottom_support .guide_payment{background:linear-gradient(-60deg, #177814 90%, #32a22d 50%) no-repeat;width:25%;float:left;position:relative}
.bottom_support .guide_payment .ico{width:20%;position:absolute;bottom:-25%;left:15%}
.bottom_support .guide_payment .ico img{max-width:100%}
.bottom_support .guide_payment .txt{margin-left:35%}
.bottom_support .advisory_online{background:linear-gradient(-60deg, #014f01 90%, #177814 50%) no-repeat;width:30%;float:left;position:relative}
.bottom_support .advisory_online .ico{width:20%;position:absolute;bottom:-10%;left:15%}
.bottom_support .advisory_online .ico img{max-width:100%;float:left;margin-top:-20px}
.bottom_support .advisory_online .txt{margin-left:35%}
@media screen and (max-width:1200px){.bottom_support .hotline_bottom{width:45%}
.bottom_support .hotline_bottom .ico{width:12%}
.bottom_support .hotline_bottom .txt{margin-left:12%}
.bottom_support .guide_payment{width:25%}
.bottom_support .guide_payment .ico{bottom:-15%}
.bottom_support .advisory_online{width:25%}
.bottom_support .advisory_online .ico{bottom:0}
}
@media screen and (max-width:1000px){.bottom_support{height:40px;line-height:40px}
.bottom_support a{font-size:17px;line-height:40px}
.bottom_support .hotline_bottom{margin-left:2%;width:48%}
.bottom_support .guide_payment .ico{bottom:0;left:7%}
.bottom_support .guide_payment .txt{margin-left:27%}
.bottom_support .advisory_online .ico{bottom:10%;left:10%}
.bottom_support .advisory_online .txt{margin-left:30%}
}
@media screen and (max-width:820px){.bottom_support{height:30px;line-height:30px}
.bottom_support a{font-size:15px;line-height:30px}
.bottom_support .hotline_bottom{font-size:15px}
.bottom_support .hotline_bottom strong{font-size:18px}
.bottom_support .hotline_bottom span{font-size:12px}
}
@media screen and (max-width:720px){.bottom_support a,.bottom_support .hotline_bottom{font-size:13px}
.bottom_support .hotline_bottom strong{font-size:15px}
}
@media screen and (max-width:620px){.bottom_support{height:25px;line-height:25px}
.bottom_support a{font-size:11px;line-height:25px}
.bottom_support .hotline_bottom{margin-left:0;width:50%;font-size:11px}
.bottom_support .hotline_bottom strong{font-size:15px}
.bottom_support .hotline_bottom span{font-size:11px}
}
@media screen and (max-width:560px){.bottom_support{height:20px;line-height:20px}
.bottom_support img{display:none}
.bottom_support a{font-size:10px;line-height:20px}
.bottom_support .hotline_bottom,.bottom_support .hotline_bottom span{font-size:10px}
.bottom_support .hotline_bottom strong{font-size:13px}
.bottom_support .hotline_bottom .txt{margin-left:1%}
.bottom_support .guide_payment .txt,.bottom_support .advisory_online .txt{margin-left:15%}}
@media screen and (max-width:440px){.bottom_support .hotline_bottom{width:55%}
.bottom_support .guide_payment{width:27%}
.bottom_support .advisory_online{width:18%}}
@media screen and (max-width:400px){.bottom_support a,.bottom_support .hotline_bottom,.bottom_support .hotline_bottom span{font-size:9px}
.bottom_support .hotline_bottom strong{font-size:12px}}
@media screen and (max-width:340px){.bottom_support a,.bottom_support .hotline_bottom,.bottom_support .hotline_bottom span{font-size:8px}
}
Bước 3: Tiến hành lưu lại và xem kết quả

Không có nhận xét nào:

Đăng nhận xét

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể đặt backlink tại đây Hướng dẫn đặt backlink nofollow tại đây