Mạng xã hội ngày càng phát triển, nó là một phần không thể thiếu được của bất kì một trang web nào dù lớn hay bé. Nó mang đến cho trang của bạn một lượng truy cập vô cùng lớn. Đồng thời nó cũng thể hiện sự chuyên nghiệp cho trang web của bạn.
Nhưng ngặt nỗi, mặc định wordpress hay theme của bạn hầu như không hỗ trợ thêm nút mạng xã hội, nếu bạn muốn thêm thì cần phải dùng plugin của một bên thứ ba. Mà ngay từ buổi học đầu tiên, các bạn được biết là càng sử dụng ít plugin càng tốt, và chỉ dùng những plugin thực sự cần thiết thôi. Nắm bắt được điều này, hôm nay Chia sẻ WP sẽ hướng dẫn bạn thêm nút mạng xã hội mà không cần phải dùng bất kì một plugin nào.
Để làm được điều này, trước tiên bạn phải cài font awesome trước đã. Nếu bạn nào chưa cài thì tham khảo ngay bài này nhé:
Thêm font Awesome cho Genesis FrameworkSau đó các bạn tạo một text widget và thêm đoạn code vào:
<div class="social-icons" align="center"><ul><li class="social-facebook"><a href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a></li><li class="social-twitter"><a href="https://twitter.com/#"><i class="fa fa-twitter"></i></a></li><li class="social-google"><a href="https://plus.google.com/#"><i class="fa fa-google-plus"></i></a></li><li class="social-linkedin"><a href="https://www.linkedin.com/#"><i class="fa fa-linkedin"></i></a></li><li class="social-youtube"><a href="https://www.youtube.com/#"><i class="fa fa-youtube-play"></i></a></li></ul></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="social-icons" align="center">
<ul>
<li class="social-facebook">
<a href="https://www.facebook.com/"><i class="fa fa-facebook"></i>
</a>
</li>
<li class="social-twitter">
<a href="https://twitter.com/#"><i class="fa fa-twitter"></i>
</a>
</li>
<li class="social-google">
<a href="https://plus.google.com/#"><i class="fa fa-google-plus"></i>
</a>
</li>
<li class="social-linkedin">
<a href="https://www.linkedin.com/#"><i class="fa fa-linkedin"></i>
</a>
</li>
<li class="social-youtube">
<a href="https://www.youtube.com/#"><i class="fa fa-youtube-play"></i>
</a>
</li>
</ul>
</div>
Ở đây mình để 5 icon là Facebook, Twitter, Google Plus, Linkedin và Youtube, các bạn có thể thêm hoặc bớt tùy theo nhu cầu của mình. Nhớ là thay đổi đường link tới trang mạng xã hội của bạn nữa nhé.
Giờ các nút mạng xã hội đã hiển thị trên trang của bạn rồi đó, nhưng nó chưa được đẹp phải không nào? Để chỉnh được layout của nó, các bạn thêm một đoạn code vào file style.css, có thể tham khảo đoạn code sau:
.social-icons {margin: 0 auto;display: table;}.social-icons ul li {list-style-type: none;list-style-image: none;margin: 0 6px 12px;float: left;}.social-icons ul li a,.social-icons ul li a:hover {color: #fff;width: 45px;padding: 10px;display:inline-block;text-align: center;}.social-icons ul li.social-facebook a {background: #3a579a;}.social-icons ul li.social-twitter a {background: #00abf0;}.social-icons ul li.social-google a {background: #df4a32;}.social-icons ul li.social-linkedin a {background: #127bb6;}.social-icons ul li.social-youtube a {background: #a8240f;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.social-icons {
margin: 0 auto;
display: table;
}
.social-icons ul li {
list-style-type: none;
list-style-image: none;
margin: 0 6px 12px;
float: left;
}
.social-icons ul li a,
.social-icons ul li a:hover {
color: #fff;
width: 45px;
padding: 10px;
display:inline-block;
text-align: center;
}
.social-icons ul li.social-facebook a {
background: #3a579a;
}
.social-icons ul li.social-twitter a {
background: #00abf0;
}
.social-icons ul li.social-google a {
background: #df4a32;
}
.social-icons ul li.social-linkedin a {
background: #127bb6;
}
.social-icons ul li.social-youtube a {
background: #a8240f;
}
Thế thôi, các bạn F5 xem đã được chưa nào. Quá đơn giản phải không, giờ đây bạn không cần cài bất kì plugin nào mà vẫn có cho mình các nút mạng xã hội tuyệt đẹp.
Nếu có bất kì câu hỏi nào, đừng ngần ngại cho mình biết ở phần bình luận nhé. Chúc các bạn may mắn.
Nguồn: Việt Hùng admin https://chiasewp.com/ 
Bình Luận