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

NDK · 03/09/2015

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.

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 !