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

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.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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:

huong dan tao cac nut lien ket mang xa hoi bang html va css 1 jpg

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é,

Bài viết này được đăng tại [free tuts .net]

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.

Danh sách file tải về

Tên file tải về	Pass giải nén
Download Font-awesome	freetuts.net hoặc gameportable.net

Bài trước Bài tiếp

Cùng chuyên mục:

Tạo Trang web E-commerce từ HTML & CSS

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Cách sử dụng thẻ script html ...