Footer đẹp cho xenforo giống với Diễn Đàn VIETINCOME Việt Nam

Để có được một footer đẹp thì quá đơn giản. Hôm nay mình giới thiệu vá share các bạn footer từ diễn đàn vietincome Việt Nam. Diễn đàn về kiếm tiền online, các thủ thuật SEO, các mã nguồn mở và tin tức công nghệ

Demo:

Cách làm:
Đầ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">
                                                               <a href="http://vietincome.com/" title="Kiếm tiền online"><img src="images/logo.png" alt="Kiếm tiền online" style="float: center" width="280px" /></a>
                                        </div>
<div class="block-bottom"><span>DIỄN ĐÀN VIETINCOME VIỆT NAM</span>
<p>Diễn đàn chia sẻ, trao đổi các hình thức kiếm tiền online,Thủ thuật SEO và Các mã nguồn mở, Cập nhật tin tức công nghệ.</p>
<p>Liên hệ đặt quảng cáo</p>
</div>
<div class="connect-face">
<p>Follow us</p>
<ul>
<li><a href="https://www.facebook.com/groups/906352539449620/"><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="http://ketoanonline.com.vn/" target="_blank">Kế Toán Online</a></li>
<li><a href="http://thietkewebmoi.com/" target="_blank">Thiết Kế Website</a></li>
<li><a href="http://thumua24h.vn/" target="_blank">Thu Mua 24h</a></li>
<li><a href="http://nauanphuchau.com/" target="_blank">Chuyên Tổ Chức Tiệc</a></li>
<li><a href="#" target="_blank">Text Link</a></li>
<li><a href="#" target="_blank">Text Link</a></li>
<li><a href="#" target="_blank">Text Link</a></li>
</ul>
</div>
</div>
<div class="four columns column">
<h3>Liên Kết</h3>
<ul>
<li><a target='_blank' href='http://southparadisetravel.com' title='Travel Viet Nam |

Paradise Tour Ha Long | Tour Ha Noi | Tour Hue | son doong caves|

Vietnam'>Travel VietNam - Vietnam tourism</a></li>
<li><a target='_blank' href='http://nhatbaothudo.com/' title='nhatbaophobuon'>chung cư 219 Trung Kính</a></li>
<li><a href="#">Contact Usn</a></li>
<li><a href="#">Contact Usn</a></li>
<li><a href="#">Contact Usn</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>Đối Tác</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 class="three columns column">
<h3>Liên Hệ Đặt Quảng Cáo</h3>
<ul>
<li><i class="fa fa-home"></i> Thu Duc, Ho Chi Minh City, Viet Nam</li>
<p>&nbsp;</p>
<li><i class="fa fa-phone"></i> +30-2106019311</li>
<p>&nbsp;</p>
<li><i class="fa fa-envelope-o"></i> hotroketoanonlinevn@gmail.com</li>
<p>&nbsp;</p>
<li><i class="fa fa-globe"></i> www.ketoanonline.com.vn</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>

Link bên trong các bạn thay đổi link website của các bạn nhé
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.

Tweet