Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Các sự kiện (Event) trong Javascript 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các cách khai báo biến trong Javascript 
Bắt sự kiện click trong Javascript 
Hàm array map() trong Javascript 
Hàm addEventListener() trong Javascript 
Lệnh if else trong javascript (dùng để rẻ nhánh chương trình) 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng 
Thẻ Table trong HTML (colspan, rowspan, cellpadding và cellspacing) 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.
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:
.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:
<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:
<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é:
.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 |
