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, MinhGiangPC 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!
 |
| Hướng dẫn tạo khung liên hệ đơn giản cho blog/website |
Facebook: Minh Giang PC
Zalo: 0888889530
Phone: 0888889530
Gmail: admin@minhgiangpc.com
Thanh toán: Ngân hàng, thẻ cào siêu rẻ, Momo, ViettelPay, card + 35% 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="//pro.fontawesome.com/releases/v5.2.0/css/all.css"/>
<style>
.minhgiangpc-contacts.minhgiangpc-contacts-info {
border: 2px dashed #17a2b8;
background: #eef9fa;
border-radius: 10px!important;
}
.minhgiangpc-contacts {
color: #222222;
overflow: hidden;
position: relative;
margin: 10px 0!important;
padding: 15px;
line-height: 26px!important;
word-break: break-word;
}
.minhgiangpc-contacts svg {
height: 15px;
margin-right: 10px;
display: flex;
}
.minhgiangpc-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="minhgiangpc-contacts minhgiangpc-contacts-info">
<i class="fab fa-facebook-square"></i><b>Facebook: </b><a href="https://www.facebook.com/minhgiangpc.page" rel="nofollow" target="_blank">Minh Giang PC</a><br />
<i class="fas fa-sms"></i><b>Zalo: </b><a href="https://zalo.me/0888889530" target="_blank">0888889530</a><br />
<i class="fas fa-phone-alt"></i><b>Phone: </b><a href="tel:0888889530" target="_blank">0888889530</a><br />
<i class="fas fa-envelope"></i><b>Gmail: </b><a href="mailto:admin@minhgiangpc.com" target="_blank">admin@minhgiangpc.com</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 + 35% 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 © MinhGiangPC
