الصفحة الرئيسية
blogger

Hướng dẫn tạo khung liên hệ đơn giản cho blog/website

tạo khung liên hệ cho blog, code khung liên hệ đẹp, tạo form liên hệ đẹp, khung liên hệ đẹp cho website, tạo trang liên hệ đẹp, template liên hệ đẹp

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, Code Pro 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
Hướng dẫn tạo khung liên hệ đơn giản cho blog/website

Facebook: Lê Anh Đức
Zalo: 0386.897.757
Phone: 0386.897.757
Gmail: [email protected]
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="//cdn.leanhduc.pro.vn/font-awesome/pro-5.15.3/css/all.css"/>
<style>
  .codepro-contacts.codepro-contacts-info {
    border: 2px dashed #17a2b8;
    background: #eef9fa;
    border-radius: 10px!important;
  }
  .codepro-contacts {
    color: #222222;
    overflow: hidden;
    position: relative;
    margin: 10px 0!important;
    padding: 15px;
    line-height: 26px!important;
    word-break: break-word;
  }
  .codepro-contacts svg {
    height: 15px;
    margin-right: 10px;
    display: flex;
  }
  .codepro-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="codepro-contacts codepro-contacts-info">
  <i class="fab fa-facebook-square"></i><b>Facebook: </b><a href="https://www.facebook.com/leanhduc.pro.vn/" rel="nofollow" target="_blank">Lê Anh Đức</a><br />
  <i class="fas fa-sms"></i><b>Zalo: </b><a href="https://zalo.me/0386897757" target="_blank">0386.897.757</a><br />
  <i class="fas fa-phone-alt"></i><b>Phone: </b><a href="tel:0386897757" target="_blank">0386.897.757</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 + 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 © Code Pro

Sống hết mình !