Cách thêm thông tin cố định ở cuối footer
* Giới Thiệu
– Chào các bạn : giống như mọi khi, giới thiệu đầu ! .Mình là Thông, biệt hiệu thongiphone
– Trang này mình tạo để hướng dẫn các kinh nghiệm mình học được qua mạng, và tổng hợp lại cho mọi người
– Hôm nay mình sẽ chỉ các bạn : Cách thêm thông tin ở cuối footer.
* Thông tin sơ về Cách thêm thông tin cố định ở cuối footer
– Có nhiều bạn muốn mình làm cái hướng dẫn thêm thông tin liên hệ ở footer này nên mình làm cái này gửi tặng các bạn
– Cái này cũng chẳng có gì khó, nếu biết css xíu thì không thành vấn đề.
– Mục đích của nó là để mọi người dễ liên lạc nhau hơn thôi
* code để thêm vào.
+ code html để trên thẻ </body>
<!-- footer lien he --> <div class="sticky-bottom"> <div id="pcSupport" class="wrap"> <ul> <li><a href="tel:01686270225"><span>TƯ VẤN:<strong><font color="yellow"> 01686270225 </font></strong></span></a></li> <li><a href="tel:01669700700"><span> HOTLINE:<strong> 01669.700.700</strong></span></a></li> <li><span id="mnChat" class="help-pop" data-arg="0"> <a href="https://www.facebook.com/Congdongshop.community/" target="_blank"><font color="#FFFFFF">CHAT QUA FACEOOK </font></a></span></li> </ul> </div> <div id="mbSupport" class="wrap display-none"> <div> <a href="tel:01669700700"><span><font color="#ffffff"><i class="icon-phone"></i> <strong>01669.700.700</strong></font></span></a> </div> </div> </div>
+ Code css để trong customize hoặc style của theme
s.sticky-bottom { background:#1e779c none repeat scroll 0 0; bottom:0px; font-size:16px; left:0; position:fixed; right:0; text-align:center; width:100%; z-index:9999999;color:#fff; } .sticky-bottom ul { margin:0; padding:0 } .sticky-bottom ul li { border-right:1px solid #ddf2c1; display:inline-block; width:30% } .sticky-bottom ul li:last-child { border-right:medium none } .sticky-bottom ul li span { color:#fff; cursor:pointer; display:block; padding:10px 0; font-weight: bold; text-transform:uppercase } .sticky-bottom ul li span:hover { color:#fff } #mbSupport { padding:10px 0px;} /* iPads (portrait) ----------- */ @media only screen and (min-width : 768px) and (min-width : 1024px) and (orientation : landscape){ #mbSupport {display:none; padding:20px 0px;} } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px){ #mbSupport {display:none; padding:20px 0px;} } @media(max-width:768px){#pcSupport,#supportExtend { display:none }} .box { border: 1px solid #cdc9c5; padding:10px; } .is-divider { height: 2px; display: block; background-color:#e1e1e1; margin: 1em 0 1em; width: 100%;display:none; } h3.widget-title{ background-color:#20BC5A; padding:10px 8px; font-size:16px; color:#fff; letter-spacing: 0em; margin-bottom:-1px; } #footer h3.widget-title { background-color: transparent; padding:10px 0px;margin-bottom:5px; } .woof_redraw_zone{border:1px solid #cdc9c5;padding:10px 15px;} .woof_list li { list-style: none !important; padding: 0 0 0px 0 !important; } .woof_block_html_items{line-height: 10px;} .menu-products-categories-menu-container{border:1px solid #cdc9c5;padding:10px 10px 10px 18px;} .menu-brand-menu-container{border:1px solid #cdc9c5;padding:10px 15px;}
* Video hướng dẫn Cách thêm thông tin cố định ở cuối footer
*Lời kết
– Các bạn có thắc mắc gì thì liên hệ mình nhé thông qua website: congdongshop.com hoặc congdongblog.com nhé của mình nhé,
– Nhớ like và comment trang của mình nhé, cảm ơn các bạn nhìu !