Footer đẹp cho diễn đàn Xenforo

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,129
Reaction score
7,392
Footer đẹp cho diễn đàn Xenforo

1.png

Đầu tiên download file đính kèm và giải nén ra. Sau đó upload các file trong đó lên host, up vào folder images trên host (nếu trên host chưa có thì tạo folder mới tên images nha).
Tiếp theo vào ACP > Appearance > Template:
Vào template footer và thay thế toàn bộ bằng code sau:
Mã:
<xen:edithint template="footer.css" />
<xen:hook name="footer">
<div class="footer">
<div class="pageWidth">
<div class="pageContent">
<div id="footer" class="footercolumns">
<div id="footer-top">
<div class="footer-top-left">
<div class="block-top"><img alt="Cnm24h.tk" src="styles/soft_responsive_green/xenforo/logo.png" height="60px" style="float: left" />
                                                               <a href="http://bophim.com" title="Xem phim online, phim hd online"><img src="images/Untitled.png" alt="xem phim nhanh, xem phim online" style="float: right" width="280px" /></a>
                                        </div>
<div class="block-bottom"><span>RAO VẶT MIỄN PHÍ</span>
<p>Diễn đàn Rao Vặt - Quảng Cáo miễn phí, nơi đăng tin tìm việc, tìm người, rao bán các loại sản phẩm hiệu quả và nhanh chóng.</p>
</div>
<div class="connect-face">
<p>Follow us</p>
<ul>
<li><a href="http://facebook.com/vnxf.vn"><img alt="Facebook" src="images/facebook-variation.png" title="FaceBook"></a></li>
<li><a href="http://youtube.com/"><img alt="Social" src="images/youtube-variation.png" title="Youtube"></a></li>
<li><a href="http://twitter.com/"><img alt="Twitter" src="images/twitter-variation.png" title="Twitter"></a></li>
<li><a href="https://plus.google.com/"><img alt="Google" src="images/googleplus.png" title="Google"></a></li>
<li><a href="#"><img alt="Social" src="images/pinterest.png" title="Pinterest"></a></li>
<li><a href="forums/-/index.rss"><img alt="Rss Feed" src="images/rss-variation.png" title="Rss Feed"></a></li>
</ul>
</div>
</div>
<div class="fotter-contact">
<h3>Our Links</h3>
<ul>
<li><a href="#" target="_blank">Wapmaster Việt</a></li>
<li><a href="#" target="_blank">Xem Phim Online</a></li>
<li><a href="#" target="_blank">Thủ Thuật PC</a></li>
<li><a href="#" target="_blank">Game Online</a></li>
<li><a href="#" target="_blank">Webmaster Việt</a></li>
<li><a href="#" target="_blank">Host giá rẻ</a></li>
<li><a href="#" target="_blank">Tạp Chí Design</a></li>
</ul>
</div>
</div>
<div class="four columns column">
<h3>Thông tin</h3>
<ul>
<li><a href="#">Thông báo chung</a></li>
<li><a href="#">Thắc mắc, góp ý</a></li>
<li><a href="#">Thị trường mua bán</a></li>
<li><a href="#">Việc làm, Tuyển sinh</a></li>
<li><a href="#">Giải Trí</a></li>
<li><a href="help/">Trợ giúp</a></li>
<li><a href="misc/contact">Liên hệ BQT</a></li>
</ul>
</div>
<div class="three columns column">
<h3>Liên kết bạn bè</h3>
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footerLegal">
<div class="pageWidth">
<div class="pageContent">
<div id="copyright">Diễn đàn sử dụng XenForo™ ©2015 XenForo Ltd.
</div>
<ul id="legal">
<xen:if is="{$canChangeStyle} OR {$canChangeLanguage}">
<li class="choosers">
<xen:if is="{$canChangeLanguage}">
<a href="{xen:link 'misc/language', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase language_chooser}" rel="nofollow">{$visitorLanguage.title}</a>
</xen:if>
</li>
                        <li class="choosers">
<xen:if is="{$canChangeStyle}">
<a href="{xen:link 'misc/style', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase style_chooser}" rel="nofollow">{$visitorStyle.title}</a>
</xen:if>
</li>
</xen:if>
<li><a href="help/terms">Quy định và Nội quy</a></li>
</ul>
<xen:if is="{$debugMode}">
<xen:if hascontent="true">
<dl class="pairsInline" title="{$controllerName}-&gt;{$controllerAction}{xen:if $viewName, ' ({$viewName})'}">
<xen:contentcheck>
<xen:if is="{$page_time}"><dt>{xen:phrase timing}:</dt> <dd><a href="{$debug_url}">{xen:phrase x_seconds, 'time={xen:number $page_time, 4}'}</a></dd></xen:if>
<xen:if is="{$memory_usage}"><dt>{xen:phrase memory}:</dt> <dd>{xen:phrase x_mb, 'size={xen:number {xen:calc "{$memory_usage} / 1024 / 1024"}, 3}'}</dd></xen:if>
<xen:if is="{$db_queries}"><dt>{xen:phrase db_queries}:</dt> <dd>{xen:number {$db_queries}}</dd></xen:if>
</xen:contentcheck>
</dl>
</xen:if>
</xen:if>
<span class="helper"></span>
</div>
</div>
</div>
</xen:hook>
Vào template footer.css thay thế toàn bộ bằng code sau:
Mã:
#footer {
    clear: both;
    min-height: 100px;
    padding: 20px 0 25px;
}
.footer {
    background: #1d1e22 url(http://upanh.cnm24h.tk/images/2015/07/15/footer-bg.png) repeat-x top center;
    clear: both;
    margin-top: 10px;
}
.footercolumns {
    display: inline;
    margin-left: 0;
    margin-right: 0;
}
.footer-top-left {
    float: left;
    width: 440px;
    margin-top: 18px;
    padding-left: 10px;
}
.footer-top-left .block-top {
    padding-bottom: 8px;
}
.footer-top-left .block-bottom {
    float: left;
    margin-right: 15px;
    border-bottom: 1px dotted #c8c8c8;
    padding-bottom: 10px;
    margin-bottom: 8px;
}
.footer-top-left .block-bottom span {
    color: #fff;
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 9px;
}
.footer-top-left .block-bottom p {
    color: #646464;
    font-size: 12px;
    margin-bottom: 0px;
}
.footer-top-left .connect-face p {
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
    font-style: normal;
    float: left;
    margin-top: 9px;
}
.connect-face ul li {
    float: left;
    padding-left: 10px;
    display: inline;
}
.fotter-contact {
    float: left;
    width: 120px;
    min-height: 174px;
    border-left: 1px dotted #c8c8c8;
    margin-top: 20px;
    padding-left: 21px;
    padding-right: 16px;
}
#footer h3 {
    color: #fff;
    font-family: 'MyriadProRegular';
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 400;
    padding-bottom: 11px;
}
.fotter-contact p {
    color: #646464;
    font-size: 12px;
    padding-bottom: 5px;
    margin-bottom: 0px;
}
.fotter-contact a {
    font-size: 11px;
    color: #0daaac;
    text-decoration: none;
    padding-bottom: 8px;
    display: inline-block;
}
#footer .four.columns.column {
    float: left;
    width: 135px;
    min-height: 174px;
    border-left: 1px dotted #c8c8c8;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 15px;
}
#footer .column ul li {
}
#footer .column a {
    color: #646464;
    font-size: 12px;
    text-decoration: none;
}
#footer .three.columns.column {
    float: left;
    width: 165px;
    min-height: 174px;
    border-left: 1px dotted #c8c8c8;
    margin-top: 20px;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 15px;
}
.footer .pageContent
{
    font-size: 11px;
color: #a5cae4;
overflow: hidden;
zoom: 1;
}
    .footer a,
    .footer a:visited
    {
        color: #a5cae4;
padding: 5px;
display: block;
    }
        .footer a:hover,
        .footer a:active
        {
            color: #d7edfc;
        }
    .footer .choosers
    {
        padding-left: 5px;
float: left;
overflow: hidden;
zoom: 1;
    }
        .footer .choosers dt
        {
            display: none;
        }
        .footer .choosers dd
        {
            float: left;
  
        }
    .footerLinks
    {
        padding-right: 5px;
float: right;
overflow: hidden;
zoom: 1;
    }
        .footerLinks li
        {
            float: left;
  
        }
            .footerLinks a.globalFeed
            {
                width: 14px;
                height: 14px;
                display: block;
                text-indent: -9999px;
                white-space: nowrap;
                background: url('styles/default/xenforo/xenforo-ui-sprite.png') no-repeat -112px -16px;
                padding: 0;
                margin: 5px;
            }
.footerLegal {
background: #1d1e22;
}
.footerLegal .pageContent
{
    font-size: 12px;
    overflow: hidden; zoom: 1;
    padding: 10px 0 10px;
    text-align: center;
}
.footerLegal .pageContent a:link {
color: #d7edfc;
}
    #copyright
    {
        color: rgb(100,100,100);
        float: left;
    }
    #legal
    {
        float: right;
    }
        #legal li
        {
            float: left;
  
            margin-left: 10px;
        }
Chúc các bạn thành công.


PVS - Vnxf.vn
 

Đính kèm

kieudai91

Thượng Đế
Tham gia
14/12/2015
Bài viết
22
Reaction score
14
Hi bác chủ top, sao mình làm giống như bạn mà nó lại không ra giống hình ảnh demo nhỉ, nó toàn bị lỗi icom mạng xã hội thôi.
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,129
Reaction score
7,392
do bạn chưa upload file đính kèm lên host :)
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,129
Reaction score
7,392
do bạn làm sai thôi chứ cái này mình test rồi mà @@
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,129
Reaction score
7,392
trong code có khá nhiều link, bạn xem rồi thay lại thử xem
 

antinphat

Thượng Đế
Tham gia
17/05/2019
Bài viết
89
Reaction score
15
xenforo 2 không có footer thì làm sao các bác ?
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,129
Reaction score
7,392
Footer trên Xen 2 ở trong template Page_container nhé, nó nằm trong cặp thẻ <footer>...</footer>
 

vudinhkhang2

Thượng Đế
Tham gia
25/01/2019
Bài viết
102
Reaction score
15
Footer trên Xen 2 ở trong template Page_container nhé, nó nằm trong cặp thẻ <footer>...</footer>
nếu muốn làm footer như trên thì cần thay đoạn nào thành đoạn nào hả bác?
 

phuongtrang87

Thượng Đế
Tham gia
11/08/2019
Bài viết
3
Reaction score
0
Của mình đưa code lên sau đó lưu lại thì lỗi data là sao nhỉ. Bình thường thì không sao mà!
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,129
Reaction score
7,392
Xen2 không có template footer.css nha bạn.
 

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

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Bình (THB)

Skype chat, instant message

Mr. Tuấn
0988 488 096

Skype chat, instant message

Mr. Bình
0981 06 08 08
kinhdoanh@vnxf.vn

Top Bottom