Hướng dẫn thêm thanh Social trên header

NDK

MasterSergeant
Tham gia
16/03/2015
Bài viết
830
Được Like
743
Mình xin được hướng dẫn các bạn cách thêm thanh Mạng xã hội trên Header trong diễn đàn Xenforo. Hướng dẫn này mình áp dụng trên style Default.
1.png


Trước tiên, các bạn cần cài đặt font Awesome bằng cách đặt đoạn code sau vào template PAGE_CONTAINER, trước thẻ </head>
PHP:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Sau khi đã cài đặt font Awesome, các bạn tạo một template với tên abc.css ( các bạn có thể đặt tên gì tùy ý, miễn sao hậu tố phải là ".css"). Sau đó, các bạn thêm code sau vào template vừa tạo:

PHP:
.socialicons
{
    float: right;
    margin-top: 10px;
}
.socialicons li
{
    display: inline-block;
}
.socialicons li a
{
    padding: 10px;
    font-size: 24px;
    color: @textCtrlBackground;
}
.socialicons li a:hover
{
    color: @dimmedTextColor;
}
Tùy chỉnh lại màu theo ý thích của bạn. Mình sử dụng mã màu mặc định nhé.
Sau đó, các bạn tìm template ad_header, thêm vào sau cùng đoạn code:

PHP:
<xen:require css="abc.css" />

<div class="socialicons hiddenResponsiveNarrow">
    <ul>
        <li><a href="https://www.facebook.com/webmasterzone"target="_blank"><i class="fa fa-facebook"></i></a></li>
        <li><a href="https://plus.google.com/110505466273700874839/"target="_blank"><i class="fa fa-google"></i></a></li>
        <li><a href="https://twitter.com/share4web"target="_blank"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-youtube-play"target="_blank"></i></a></li>
    </ul>
</div>
Lưu lại và tận hưởng. Chúc các bạn thành công !
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
trước cũng cần cái này :D
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom