Phản hồi email
Nhập Thông Tin
Giới Tính
Send

Tạo khung liên hệ CSS cho blogger

Phần thông tin liên hệ trên một trang web là khá quan trọng. Vì vậy việc làm đẹp cho phần liên hệ được đánh giá là cần thiết, từ đó sẽ giúp khác hàng của bạn cảm thấy yên tâm và tin tưởng hơn. Hôm nay, ModMobile sẽ hướng dẫn các bạn tạo một khung liên hệ đơn giản mà lại khá nổi bật, cùng đón xem nào!


Facebook: Nguyễn Xuân Dũng
Zalo: 0986.059.161
Phone: 0986.059.161
Gmail: contacts.xuandung123c@gmail.com
Thanh toán: Ngân hàng, thẻ cào siêu rẻ, Momo, ViettelPay, card + 0% phí,...

Các bước thực hiện tạo khung liên hệ

Bước 1: Thêm CSS cho khung liên hệ


<link rel="stylesheet" href="https://pastebin.com/raw/3KLCx4X6"/>
<style>
.modmobile-contacts.modmobile-contacts-info {
border: 2px dashed #17a2b8;
background: #eef9fa;
border-radius: 10px!important;
}
.modmobile-contacts {
color: #222222;
overflow: hidden;
position: relative;
margin: 10px 0!important;
padding: 15px;
line-height: 26px!important;
word-break: break-word;
}
.modmobile-contacts svg {
height: 15px;
margin-right: 10px;
display: flex;
}
.modmobile-contacts i {
margin-right: 10px;
}
</style>

Bước 2: Chỉnh sửa nội dung và chèn code dưới đây vào vị trí cần hiển thị.


<p class="modmobile-contacts modmobile-contacts-info">
<i class="fab fa-facebook-square"></i><b>Facebook: </b><a href="https://www.facebook.com/nguyendunghehehe" rel="nofollow" target="_blank">Lê Anh Đức</a><br />
<i class="fas fa-sms"></i><b>Zalo: </b><a href="https://zalo.me/0986059161" target="_blank">0986.059.161</a><br />
<i class="fas fa-phone-alt"></i><b>Phone: </b><a href="tel:0986059161" target="_blank">0986.059.161</a><br />
<i class="fas fa-envelope"></i><b>Gmail: </b><a href="mailto:[email protected]" target="_blank">[email protected]</a><br />
<i class="fas fa-sack-dollar"></i><b>Thanh toán: </b> Ngân hàng, thẻ cào siêu rẻ, Momo, ViettelPay, card + 0% phí,...
</p>

Bước 3: Lưu lại và tận hưởng thành quả!

Lời kết

Trên đây là bộ code và hướng dẫn tạo khung liên hệ đơn giản cho blog/website. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn một ngày học tập và làm việc thật hiệu quả. Xin chào và hẹn gặp lại!

Copyright © ModMobile


See Also :
ModMobile

Subscribe YouTube ModMobile