Hướng dẫn tạo các nút liên kết mạng xã hội bằng HTML và CSS

Đăng bởi: phungminhduong - Vào ngày: - View: 1198

DEMO

Các mạng xã hội hiện này là không thể thiếu, nó phổ biến đến mức đã có nhiều người gọi nó là vấn nạn nghiện mạng xã hội. Chính vì vậy mà việc tích hợp các nút liên kết đến các mạng xã hội cho website ngày càng trở nên phổ biến.

Nói về lợi ích của việc tạo các liên kết này thì có rất nhiều, mình sẽ chỉ liệt kê một số lợi ích chính thôi:

  • Giúp website tương tác tốt hơn với người dùng.
  • Giúp bạn quảng cáo websie trên các mạng xã hội phổ biến.
  • Tạo sự chuyên nghiệp cho website.

Các bạn hãy xem ví dụ dưới đây:

Ok ! lan man thế là đủ rồi, giờ mình sẽ tiến hành xây dựng các nút liên kết này nhé,

1. Xây dựng giao diện website

Vẫn như thường lệ thì đầu tiên vẫn là xây dựng giao diện cho website, chúng ta sẽ tạo một thẻ div chứa các liên kết:

Code 
<div id="link">
    <a href="#" class="fa fa-facebook"></ạ>
    <a class="fa fa-youtube"></à>
    <a href="#" class="fa fa-twitter"></ạ>
    <a href="#" class="fa fa-google"></à>
</div>

Các bạn tạm chấp nhận đặt tên class giống với mình nhé, lí do mình sẽ giải thích ở phần sau.

Vậy là xong bước tạo các liên kết, nếu các bạn chạy file index.html mà không thấy có gì thay đổi thì đừng lo lắng vì thẻ a vẫn chưa hiển thị lên đâu. Ta tiến hành bước tiếp theo để hiển thị nó lên nhé.

2. Sử dụng CSS để định dạng các liên kết

Đầu tiên các bạn gắn đoạn code sau vào trong thẻ head:

Code 
<link rel="stylesheet" href="./Font-Awesomecss/css/font-awesome.min.css">

Link này chúng ta sẽ kéo file font-awesome.min.css để sử dụng, link tải Font Awesome mình sẽ để ở dưới, các bạn tải về mà giải nén vào thư mục Font-Awesomecss cùng cấp với file index.html nhé. Nếu các bạn còn chưa biết thì Font Awesome là bộ font hình biểu tượng (icon) dạng vector được sử dụng rộng rãi cho các ứng dụng web, có rất nhiều lập trình viên sử dụng nó để tạo các icon cho trang web.

Chúng ta sẽ sử dụng Font Awesome để tạo các icon cho các liên kết chính vì vậy nên mình đã lưu ý các bạn không được đổi tên class của các thẻ a.

Ok sau khi đã nhúng Font Awesome thì ta tiếp tục định dang cho các liên kết, các bạn copy đoạn mã sau vào bên trong thẻ style nhé:

Code RUN 
.fa {
    padding: 20px;
    font-size: 30px;
    width: 20px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
    background: #3B5998;
    color: white;
}

.fa-twitter {
    background: #55ACEE;
    color: white;
}

.fa-google {
    background: #dd4b39;
    color: white;
}

.fa-youtube {
    background: #bb0000;
    color: white;
}

Nó rất đơn giản nên mình cũng không cần giải thích nhiều nữa giờ các bạn chạy lại file index.html để xem kết quả.

3. Lời kết

Vậy là mình đã cùng các bạn xây dựng xong các nút liên kết mạng xã hội bằng HTML và CSS, tuy nhiên đây chỉ là cơ bản thôi và mỗi người sẽ có những tùy biến riêng để phù hợp với website của mình. Nếu có thắc mắc gì các bạn có thể để lại trong phần bình luận. Hẹn các lại các bạn trong các bài viết tiếp theo trên freetuts.net.

-------------------#####-------------------

DOWNLOAD FONT-AWESOME

-------------------#####-------------------

Nguồn: freetuts.net