share footer giống vxf.vn

Lê Thanh Giảng · 09/03/2015

Bài này hướng dẫn tạo footer giống vxf.vn.
Đầu tiên các bạn vào template footer thay toàn bộ code thành:

Giống thế này :

vào và thay trong footer toàn bộ thành

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="Rao vặt miễn phí" src="http://muare5s.com/styles/default/xenforo/muare5s.jpg" height="60px" style="float: left" />
                                                               <a href="http://movie.buidoi.vn" title="Xem phim online, phim hd online"><img src="http://img407.imageshack.us/img407/4163/buidoinet15052013.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/buidoifc"><img alt="Facebook" src="http://muare5s.com/data/images/face.png" title="FaceBook"></a></li>
<li><a href="http://youtube.com/user/synam135"><img alt="Social" src="http://muare5s.com/data/images/youtube.png" title="Youtube"></a></li>
<li><a href="http://twitter.com/buidoinet"><img alt="Twitter" src="http://muare5s.com/data/images/twitter.png" title="Twitter"></a></li>
<li><a href="https://plus.google.com/103596386203292835277"><img alt="Google" src="http://muare5s.com/data/images/google.png" title="Google"></a></li>
<li><a href="#"><img alt="Social" src="http://muare5s.com/data/images/pinterest.png" title="Pinterest"></a></li>
<li><a href="forums/-/index.rss"><img alt="Rss Feed" src="http://muare5s.com/data/images/rss.png" title="Rss Feed"></a></li>
</ul>
</div>
</div>
<div class="fotter-contact">
<h3>Our Links</h3>
<ul>
<li><a href="http://buidoi.net/" target="_blank">Wapmaster Việt</a></li>
<li><a href="http://movie.buidoi.vn/" target="_blank">Xem Phim Online</a></li>
<li><a href="http://tutviet.com" 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="http://hosting.lesynam.info" target="_blank">Host giá rẻ</a></li>
<li><a href="http://cntt4u.com" 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="http://muare5s.com/forums/2/">Thông báo chung</a></li>
<li><a href="http://muare5s.com/forums/3/">Thắc mắc, góp ý</a></li>
<li><a href="http://muare5s.com/categories/5/">Thị trường mua bán</a></li>
<li><a href="http://muare5s.com/categories/34/">Việc làm, Tuyển sinh</a></li>
<li><a href="http://muare5s.com/categories/45/">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™ ©2011 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>

Tiếp tục vào footer.css thay toàn bộ thành

Mã:

#footer {
    clear: both;
    min-height: 100px;
    padding: 20px 0 25px;
}
.footer {
    background: #1d1e22 url(http://muare5s.com/data/images/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;
        }

lưu lại là ok nhé
nhớ thank mình nha

Chủ đề tương tự	Diễn đàn	Trả lời	Ngày đăng
Help Chuyển nút share từ dưới lên cuối bài viết đầu tiên của topic	Template Modifications	14	31/05/2018
Help Sửa Lỗi Hiện hienj ảnh khi share lên fb ạ	Template Modifications	5	20/11/2016
Other Share footer FIFAVN.ORG Full Responsive	Template Modifications	10	10/05/2016
Other Moving Share Buttons From Bottom to Top of Thread - Di chuyển nút Share từ Bottom đến Top của Thread	Template Modifications	0	20/04/2016
Add AddThis button to "Share This Page" section - Thêm nút AddThis vào phần "Share This Page"	Template Modifications	0	30/03/2016

XenForo 1	XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

share footer giống vxf.vn

Lê Thanh Giảng

Khách VNXF

Chủ đề tương tự

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

Dịch vụ XenForo của VNXF

Xử lý sự cố (Troubleshooting)

Texlink

Nhà Tài Trợ

Thông tin chung

LIÊN KẾT

LIÊN KẾT

LIÊN KẾT