Tạo nút liên hệ đẹp giống F88.vn trong Theme Flatsome

Bài viết này , muatheme.com sẽ hướng dẫn bạn tạo nút liên hệ đẹp giống như trang F88.vn trên desktop lẫn mobile để khách truy cập web dễ dàng liên hệ với bạn

Rất đơn giản bạn chỉ cần dán đoạn code dưới đây vào phần “FOOTER SCRIPTS” trong menu Flatsome -> Advanced -> Globals Settings vào lưu lại.
Trường hợp bạn dùng Theme khác thì bạn chèn code vào file footer.php hoặc sử dụng Plugin Insert Headers and Footers.

<a class="social-icon social-icon--facebook" href="http://m.me/muathemewp" target="_blank"> 
<img src="https://i.imgur.com/mA1rk2k.png">
</a>
<a class="social-icon social-icon--zalo" href="https://zalo.me/0888090898" target="_blank">
 <img src="https://i.imgur.com/goFwQjy.png"> 
</a>

<div class="social-icon-mobile"> <div> <a href="tel:0888090898"> <img src="https://i.imgur.com/8FjVJc4.png"> <p>Gọi ngay</p> </a> </div> 

<div> <a href="http://m.me/muathemewp" target="_blank"> <img src="https://i.imgur.com/jz04IhJ.png"> <p>Facebook Chat</p> </a> </div>

 <div> <a href="https://zalo.me/0888090898" target="_blank"> <img src="https://i.imgur.com/pd3AaCg.png"> <p>Zalo Chat</p> </a> </div> </div>


<style type="text/css">
.social-icon{z-index:1000}.social-icon img{width:50px}
.social-icon--zalo{position:fixed;right:15px;bottom:15px;display:block}
.social-icon--facebook{position:fixed;bottom:75px;right:15px;display:block}
.social-icon-mobile{display:none}
.social-icon-mobile img{width:25px}
.social-icon-mobile div{flex:1;display:flex;align-items:center;justify-content:center}.social-icon-mobile p{margin:0;margin-top:5px;font-size:10px;color:#fff}.social-icon-mobile a{display:flex;flex-direction:column;align-items:center;justify-content:center}.form-register{width:100%;max-width:100%;padding:0}@media (max-width:768px){.social-icon--facebook,.social-icon--zalo{display:none}.social-icon-mobile{display:flex;background-color:#00a3ff;height:60px;position:fixed;bottom:0;width:100%;z-index:1000}}
</style>

Bạn nhớ thay thông tin hotline, zalo, Link chat messenger thành của bạn. Kiểm tra và tận hướng kết quả nhé. Chúc các bạn thành công !

Theo dõi
Thông báo của

0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận
0
Rất thích suy nghĩ của bạn, hãy bình luận.x