[Share Code] Chèn Nút Liên Hệ Vào Chân Website Flatsome Cực Đẹp 02

5/5 - (1 bình chọn)

Tiếp tục chuổi series code chèn nút liên hệ vào website Flatsome, hôm này Miootech lại tiếp tục hướng dẫn các bạn chèn 1 mẫu liên hệ mới vào chân website cực đẹp có đầy đủ messenger, fanpage, zalo và phone. Cùng thực hiện nhé!

Bước 1: Copy đoạn HTML sau bỏ vào trong thẻ <head>…</head> hoặc <body>…</body>

<section class="mobile_chat hidden-md hidden-lg">
<div class="container">
<div class="row">
<div class="col-xs-3 chat-item">
<a href="tel:1900 2062 " class="chat-item-url">
<div class="chat-item-image">
<img src="//theme.hstatic.net/1000391295/1000499396/14/icon_phone.png?v=406" class="img-responsive" alt="goi-dien">
</div>
<div class="chat-item-text">Gọi điện</div>
</a>
</div>
<div class="col-xs-3 chat-item">
<a href="sms:0854363333" class="chat-item-url">
<div class="chat-item-image">
<img src="//theme.hstatic.net/1000391295/1000499396/14/icon_sms.png?v=406" class="img-responsive" alt="nhan-tin">
</div>
<div class="chat-item-text">Nhắn tin</div>
</a>
</div>
<div class="col-xs-3 chat-item">
<a href="//zalo.me/0854363333" class="chat-item-url">
<div class="chat-item-image">
<img src="//theme.hstatic.net/1000391295/1000499396/14/icon_zalo.png?v=406" class="img-responsive" alt="chat-zalo">
</div>
<div class="chat-item-text">Chat Zalo</div>
</a>
</div>
<div class="col-xs-3 chat-item">
<a href="//www.messenger.com/t///www.facebook.com/vntisgroup/">
<div class="chat-item-image">
<img src="//theme.hstatic.net/1000391295/1000499396/14/icon_fb.png?v=406" class="img-responsive" alt="facebook">
</div>
<div class="chat-item-text">Facebook</div>
</a>
</div>
</div>
</div>
</section>

Lưu ý: Nhớ chỉnh sửa lại số điện thoại và link facebook, zalo của bạn nhé. Nếu muốn dẫn vào messenger thì có thể dùng link: //fb.com/tên rút gọn fanpage của bạn

Bước 2: Thêm CSS vào file style.css hoặc truy cập Tuỳ biến -> Add CSS -> Paste đoạn CSS này vào

.mobile_chat {
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    box-shadow: #ebebeb 0 0 20px;
}
.chat-item {
    padding: 5px 10px;
}
.col-xs-3 {
    width: 25%;
}
.chat-item a {
    display: block;
}
.chat-item .chat-item-image {
    width: 100%;
    float: left;
}
.chat-item .chat-item-image {
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.chat-item .chat-item-image img {
    height: 32px;
}
.chat-item .chat-item-text {
    width: 100%;
    float: left;
}
.chat-item .chat-item-text {
    height: 20px;
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.chat-item .chat-item-text {
    width: 100%;
    float: left;
}
.chat-item .chat-item-text {
    height: 20px;
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
}