Jindo_Katori
FirstSergeant
- Tham gia
- 01/03/2015
- Bài viết
- 1,462
- Được Like
- 1,205
Chia sẽ FOOTER như TuyHoaPlus.com
Nói thật mình cũng không biết làm sao cho nó responsive ổn định kích thước trên đt nên trên đt mình cho nó ẩn hết luôn
Cái này là hình như bác @nttruong, @THB hay 1 bác nào đó trên vnxf chỉ mình hồi đó chỉ mình hay sao đó
Copy paste gửi bác @vinhtq trọn bộ code của mình
Footer
Footer.css
Còn bác này chắc mới vào diễn đàn nên không biết minh không phải dân IT
Facebook của bác @gaulata đây: https://www.facebook.com/TuyHoaPlus/
Nói thật mình cũng không biết làm sao cho nó responsive ổn định kích thước trên đt nên trên đt mình cho nó ẩn hết luôn
Cái này là hình như bác @nttruong, @THB hay 1 bác nào đó trên vnxf chỉ mình hồi đó chỉ mình hay sao đó
Copy paste gửi bác @vinhtq trọn bộ code của mình
Footer
Mã:
<xen:edithint template="footer.css" />
<xen:hook name="footer">
<div class="footer">
<div class="pageWidth">
<div class="pageContent">
<div class="footercolumns" id="footer">
<div class="blockFooter footer-top-left">
<div class="boxInner">
<div class="block-top"><a target="_blank" href="http://tuyhoaplus.com"><img width="100%" height="35" src="http://tuyhoacity.vn/skin/frontend/tuyhoa/tuyhoa/images/logo.png" alt="Diễn Đàn, Forum, Website, Hot girl, Tuy Hòa, Phú Yên, Mua Bán, Điện Thoại, Máy Tính, Laptop, Tìm Việc, Tuyển Dụng, Giá Rẻ" class="footerLogo"></a></div>
<div class="non_mobi">
<div class="block-bottom">
<br>Cộng đồng Tuy Hòa Phú Yên được thành lập nhân kỷ niệm 40 năm ngày giải phóng Phú Yên. Tuyhoaplus.com là diễn đàn phi lợi nhuận với mục đích giao lưu, học hỏi, chia sẻ và kết nối Học sinh, Sinh viên & người dân đang sinh sống và làm việc tại Phú Yên
<br>Chúng tôi sẽ không chịu trách nhiệm với các thông tin do thành viên đưa lên trừ thông tin nội bộ.
<br>Phiên bản thử nghiệm, đang tiến hành xin cấp giấy phép thiết lập MXH.
</div></div></div></div>
<div class="non_mobi">
<div class="blockFooter two columns column">
<div class="boxInner">
<h3>TIÊU ĐIỂM</h3>
<div class="boxContent">
<ul class="itemsList hasIcon">
<li><span class="green">TOP</span><a target="_blank" href="http://tuyhoaplus.com/categories/trung-tam-thuong-mai.14/" width="100%"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Trung Tâm Thương Mại</a></li>
<li><span class="blue">TOP</span><a target="_blank" href="http://tuyhoaplus.com/categories/trung-tam-giai-tri.6/" width="100%"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Trung Tâm Giải Trí</a></li>
<li><span class="yellow">TOP</span><a target="_blank" href="http://tuyhoaplus.com/forums/tuy-hoa-selfie.12/" width="100%"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Hot Boy & Hot Girl</a></li>
<li><span class="skyblue">TOP</span><a target="_blank" href="http://tuyhoaplus.com/forums/du-lich-am-thuc-dia-diem-vui-choi-an-uong.31/" width="100%"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Du Lịch & Ẩm Thực</a></li>
<li><span class="orange">TOP</span><a target="_blank" href="http://tuyhoaplus.com/forums/tuyen-dung-nhan-su-tim-kiem-viec-lam.26/" width="100%"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Tuyển Dụng & Việc Làm</a></li>
<li><span class="">TOP</span><a target="_blank" href="http://tuyhoaplus.com/categories/trung-tam-thuong-mai.14/"><i class="fa fa-angle-right" width="100%"></i><i class="fa fa-angle-right fa-lg"></i>Mua Bán & Rao Vặt</a></li>
<li><span class="green">TOP</span><a target="_blank" href="http://tuyhoaplus.com/categories/trung-tam-phat-trien-cong-dong.25/" width="100%"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Ý Tưởng Kinh Doanh</a></li>
</ul></div></div></div>
<div class="non_mobi">
<div class="blockFooter three columns column">
<div class="boxInner">
<h3>ĐỐI TÁC</h3>
<div class="boxContent">
<ul class="itemsList hasIcon">
<li><span class="green">HOT</span><a rel="dofollow" target="_blank" href="http://vtplus.xyz" title="http://vtplus.xyz"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Diễn Đàn Vũng Tàu</a></li>
<li><span class="blue">HOT</span><a target="_blank" href="/"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Liên hệ đặt quảng cáo</a></li>
<li><span class="yellow">HOT</span><a target="_blank" href="/"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Liên hệ đặt quảng cáo</a></li>
<li><span class="skyblue">HOT</span><a target="_blank" href="/"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Liên hệ đặt quảng cáo</a></li>
<li><span class="orange">HOT</span><a target="_blank" href="/"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Liên hệ đặt quảng cáo</a></li>
<li><span class="">HOT</span><a target="_blank" href="/"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Liên hệ đặt quảng cáo</a></li>
<li><span class="green">HOT</span><a target="_blank" href="/"><i class="fa fa-angle-right"></i><i class="fa fa-angle-right fa-lg"></i>Liên hệ đặt quảng cáo</a></li>
</ul></div></div></div></div>
<div class="non_mobi">
<div class="blockFooter four columns column">
<div class="boxInner">
<h3>TUY HÒA PLUS</h3>
<div class="boxContent">
<ul class="itemsList">
<li><span class="green">THP</span><a target="_blank" href="/">Liên hệ</a></li>
<li><span class="blue">THP</span><a target="_blank" href="/">Liên hệ</a></li>
<li><span class="yellow">THP</span><a target="_blank" href="/">Liên hệ</a></li>
<li><span class="skyblue">THP</span><a target="_blank" href="/">Liên hệ</a></li>
<li><span class="orange">THP</span><a target="_blank" href="/">Liên hệ</a></li>
<li><span class="">THP</span><a target="_blank" href="/">Liên hệ</a></li>
<li><span class="green">THP</span><a target="_blank" href="/">Liên hệ</a></li>
</ul> </div></div></div></div></div></div></div></div>
<div class="footerLegal">
<div class="pageWidth">
<div class="pageContent">
<div id="copyright">Diễn đàn sử dụng bản quyền thuộc về Tuy Hòa Plus™ ©2015 Design by PLUS Ltd.
</div>
<ul id="legal">
<li class="choosers">
<xen:if is="{$canChangeLanguage}">
<dd><a href="{xen:link 'misc/language', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase language_chooser}" rel="nofollow">{$visitorLanguage.title}</a></dd>
</xen:if></li>
<li class="choosers"></li>
<li><a href="misc/style" class="OverlayTrigger Tooltip" data-offsety="-11">Đổi giao diện</a></li>
<li class="choosers"></li>
<li><a href="help/terms">Quy định và Nội quy</a></li>
<li><a href="{$requestPaths.requestUri}#navigation" class="topLink">{xen:phrase go_to_top}</a></li></ul>
<xen:if is="{$debugMode}">
<xen:if hascontent="true">
<dl class="pairsInline debugInfo" title="{$controllerName}->{$controllerAction}{xen:if $viewName, ' ({$viewName})'}">
<xen:contentcheck>
<xen:if is="{$page_time}"><dt>{xen:phrase timing}:</dt> <dd><a href="{$debug_url}" rel="nofollow">{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>
<xen:if is="!{$visitor.user_id}">
<div id='stickymsg'>
<p class='bbc_center'>Diễn Đàn Miễn Phí TUYHOAPLUS.COM - Chia Sẽ & Kết Nối Cộng Đồng Tuy Hòa Phú Yên</p>
<p class='bbc_center'></p>
<p class='bbc_center'>Diễn đàn TuyHoaPlus.com ra đời kỷ niệm 40 năm giải phóng Phú Yên. Bạn chỉ cần chọn <a target=_blank href='http://tuyhoaplus.com/login'>[ĐĂNG NHẬP]</a> nhanh dễ dàng bằng tài khoản Facebook, Gmail hoặc Twitter để có thể sử dụng Website ngay từ bây giờ.</p>
<p class='bbc_right'>Aministrator</p>
</div>
</xen:if>Footer.css
Mã:
#footer {
clear: both;
min-height: 50px;
padding: 20px 0 25px;
}
.footer {
background: none repeat scroll 0 0 #176093;
border: 1px solid #65a5d1;
clear: both;
}
.footercolumns {
display: inline;
margin-left: 0;
margin-right: 0;
}
.footer-top-left .block-top {
margin-bottom: 10px;
}
.footer-top-left .block-bottom {
float: left;
margin-bottom: 0px;
margin-right: 0px;
padding-bottom: 0px;
}
.footer-top-left .block-bottom span {
color: #fff;
display: block;
font-size: 12px;
margin-bottom: 5px;
text-transform: uppercase;
}
.footer-top-left .block-bottom p {
font-size: 12px;
margin-bottom: 0;
padding: 0;
}
.footer-top-left .connect-face {
clear: both;
}
.footer-top-left .connect-face p {
color: #176093;
float: left;
font-size: 14px;
font-style: normal;
font-weight: 400;
text-transform: uppercase;
}
.connect-face ul li {
display: inline;
float: left;
padding-left: 10px;
}
.fotter-contact {
min-height: 174px;
}
.footer h3 {
background: none repeat scroll 0 0 #032A46;
border-bottom: 1px solid #65a5d1;
border-radius: 3px 3px 0 0;
color: rgb(255, 255, 255);
font-family: "Roboto",sans-serif;
font-size: 14px;
font-weight: 500;
padding: 10px;
text-transform: uppercase;}
.footer .boxInner
{padding: 10px;}
.footer .two span
{display: inline-block;
margin-right: 10px;
text-align: center;
width: 30px;}
.footer .two .blue {color: #1175a7;}
.footer .two .yellow {color: #eb8400;}
.footer .two .skyblue {color: #0ea7c6;}
.footer .two .orange {color: #dd3b0d;}
.footer .two .green {color: #5ea618;}
.footer .three span
{display: inline-block;
margin-right: 10px;
text-align: center;
width: 30px;}
.footer .three .blue {color: #1175a7;}
.footer .three .yellow {color: #eb8400;}
.footer .three .skyblue {color: #0ea7c6;}
.footer .three .orange {color: #dd3b0d;}
.footer .three .green {color: #5ea618;}
.footer .four span
{display: inline-block;
margin-right: 10px;
text-align: center;
width: 30px;}
.footer .four .blue {color: #1175a7;}
.footer .four .yellow {color: #eb8400;}
.footer .four .skyblue {color: #0ea7c6;}
.footer .four .orange {color: #dd3b0d;}
.footer .four .green {color: #5ea618;}
.footer .boxContent {
background: none repeat scroll 0 0 #2b485c;
border: 1px solid #65a5d1;
border-radius: 0 0 3px 3px;
padding: 0 10px;
}
.footer .boxContent ul.itemsList li {
border-top: 1px solid #10131c;
padding: 5px 0;
position: relative;
}
.footer .boxContent ul.itemsList li:first-child {
border-top: 0 none;
}
.fotter-contact p {
font-size: 12px;
margin-bottom: 0;
padding-bottom: 5px;}
.fotter-contact a {
display: inline-block;
font-size: 14px;
text-decoration: none;
}
#footer .four.columns.column {
min-height: 174px;
}
#footer .column a {
font-size: 14px;
text-decoration: none;
}
#footer .column a:hover {
color: #bbb;
}
#footer .three.columns.column {
min-height: 174px;
}
.footer .pageContent {
color: #a5cae4;
font-size: 14px;
overflow: hidden;
padding: 20px;
}
.footer a, .footer a:visited {
color: #176093;
}
.footer a:hover, .footer a:active {
color: rgb(200, 200, 200);
text-decoration: none;
}
.footer .choosers {
float: left;
overflow: hidden;
padding-left: 5px;
}
.footer .choosers dt {
display: none;
}
.footer .choosers dd {
float: left;
}
.footerLinks {
float: right;
overflow: hidden;
padding-right: 5px;
}
.footerLinks li {
float: left;
}
.footerLinks a.globalFeed {
background: url("http://vxf.vn/styles/vxf/xenforo/xenforo-ui-sprite.png") no-repeat scroll -112px -16px rgba(0, 0, 0, 0);
display: block;
height: 14px;
margin: 5px;
padding: 0;
text-indent: -9999px;
white-space: nowrap;
width: 14px;
}
.footerLegal
{background: none repeat scroll 0 0 #032A46;
border-bottom: 1px solid #65a5d1;}
.footerLegal .pageContent {
font-size: 14px;
overflow: hidden;
padding: 30px 0;
text-align: center;
}
.footerLegal .pageContent a:link
{color: rgb(56, 68, 91);}
#copyright
{float: left;
color: #a5cae4}
#legal {
float: right;
}
#legal li {
display: inline-block;
margin-left: 10px;
}
.tweets .follow {
background: url("http://vxf.vn/styles/vxf/extra/tweets-logo-01.png") no-repeat scroll left center rgba(0, 0, 0, 0);
float: right;
padding-left: 18px;
text-transform: none;
}
.var-narrow .timeline-header {
background: none repeat scroll 0 0 #10131c !important;
border-bottom: 1px solid #176093 !important;
border-radius: 3px 3px 0 0 !important;
color: #68738c !important;
font-family: "Roboto",sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
padding: 10px !important;
text-transform: uppercase !important;
}
.descImage {
float: left;
margin-right: 10px;
}
.boxFooter {
border: 5px solid #10131c;
color: #4f5c77;
padding: 5px 10px 7px;
}
@media (max-width: 800px) {
}
@media (max-width: 610px) {
.pageWidth {
margin: 0 !important;
min-width: 0 !important;
width: auto !important;
}
#copyright, #legal {
float: none;
}
}
@media (max-width: 480px) {
#copyright, #legal {
float: none !important;
}
#termsRule, #toTop {
display: none !important;
}
}
#footer .footerLogo {
height: auto;
max-width: 100%;
width: auto;
}
#footer .boxContent ul.itemsList.hasIcon li a .fa-lg {
margin-right: 5px;
}
.footer .blockFooter {
float: left;
width: 25%;
}Còn bác này chắc mới vào diễn đàn nên không biết minh không phải dân IT
Facebook của bác @gaulata đây: https://www.facebook.com/TuyHoaPlus/
Bài viết liên quan
Bài viết mới
