Thứ Sáu, Tháng Mười Một 27, 2020
Trang chủ WordPress Code thêm icon liên hệ vào footer mobile và desktop

Code thêm icon liên hệ vào footer mobile và desktop

Code HTML thêm icon liên hệ vào footer mobile

Chép code dưới vào footer.php nhé!

<!--lien he di dong-->
<div class="thong-tin-lien-he">
  <ul>
    <li><a href="tel:0976039031"><img src="https://i.imgur.com/wpERGe9.png"><br><span>Gọi điện</span></a></li>
    <li><a href="sms:0976039031"><img src="https://i.imgur.com/SPpbQPI.png"><br><span>Nhắn tin</span></a></li>
    <li><a href="https://zalo.me/0976039031"><img src="https://i.imgur.com/nj27rq1.png"><br><span>Chát zalo</span></a></li>
    <li><a href="https://m.me/fbfp"><img src="https://i.imgur.com/LsB9Rsv.png"><br><span>Facebook</span></a></li>
  </ul>
</div>

CSS

Các bạn lưu ở file style.css còn dùng theme wordpress các bạn có thể thêm css này vào custome css bổ sung , thường mỗi theme sẽ có cho bạn lưu lại,

/*liên hệ di động */
.thong-tin-lien-he ul li a img {
    height: 6vw;
    width: auto;
}
.thong-tin-lien-he{
    background: #fff;
    display: none;
    width: 100%;
    padding: 1.8vw;
    bottom: 0;
    left: 0;
    position: fixed;
    z-index: 99999999;
    height: auto;
    border-top: 1px solid #cbcbcb;
}
.thong-tin-lien-he ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: table;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
.thong-tin-lien-he ul li {
    text-align: center;
    display: table-cell;
    vertical-align: top;
}
.thong-tin-lien-he  ul li a {
    display: inline-block;
    width: 100%;
    outline: none;
    color: #000;
    text-decoration: none;
}
@media screen and (max-width:480px){
.thong-tin-lien-he{
    display:block;
}
}
/*end*/

các bạn lưu ý nhé.

  • css chổ @media screen and max width đó là responsive code di động , nếu bạn muốn hiện trên thiết bị khác thì các bạn xem bài hướng dẫn này nhé xem thử @media đó là cái gì sau đó bạn thêm code nhỏ trong @media đó nhét vào là đc
    Link:
  • wordpress sẽ có thư viện sẵn của di động (responsive) nên không nói, nếu bạn nào code thuần hay trên mảng khác thì nhớ thêm thư viện di động (responsive) vào nhé!

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no” />

vì @media chạy được phải có thư viện của nó mới hoạt động.

From liên hệ cơ bản desktop

<div class="call_to_action">
    <a href="https://m.me/fbfp" class="face_mess" title="chat facebook"><i class="fa fa-facebook" style="margin-right: 5px;"></i> Chat facebook</a>
    <a href="https://zalo.me/0976039031" class="face_mess" title="chat zalo với chúng tôi"><i class="fa fa-commenting-o" style= "margin-right: 5px;"></i> Chat zalo</a>
</div>

CSS

.call_to_action {
    position: fixed;
    right: 10px;
    bottom: 20px;
    width: 173px;
    z-index:1;
}
a.face_mess {
    background: #0F7FC1;
    color: #fff;
    display: block;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 12px;
    margin: 0 0 5px 0;
}

Vậy là xong bài hướng dẫn làm code thêm liên hệ footer icon đẹp mobi và desktop.

Nguồn: Sưu tầm internet

 

 

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

Most Popular

Hiệu Ứng Âm Thanh – Sound Effects

Sound Effects Pack 1   Sound Effects Pack 2   Sound Effects Pack 3

List nhạc nền không dính bản quyền #2

Nhạc nền miễn phí không bị bản quyền cho bà con làm youtube, dựng phim.. Nhạc xàm xàm   Buồn, Dịu dàng   Kịch tính   Đồng Quê   Nhạc hoà tấu nước...

Cứu vợ bị bắt cóc, người chồng đâm chết người

Nhóm người đi ôtô từ Bà Rịa - Vũng Tàu đến Vĩnh Long bắt cóc một phụ nữ và bị phát hiện. Nhóm này...

List nhạc nền không dính bản quyền #1

List nhạc nền không dính bản quyền cho các bạn chuyên làm videos youtube.. phim pho này nọ 😀 List nhạc nền không dính bản...

Recent Comments