-->
Cách thêm Footer (chân trang) cho Template Median UI
4 minute read
Cách thêm Footer cho Median UI
Hi xin chào các bạn, hôm nay mình sẽ hướng dẫn cho các bạn cách thêm Footer (chân trang) cho mẫu Template Median UI. Mà mình vừa tham khảo qua cách làm của blog Wendy Code.
 |
| Hình minh họa |
Mời các bạn theo dõi bài viết nhé!
Các bước thêm Footer
Bước 1: Vào Blogger ➤ Chỉnh sửa HTML, các bạn Ctrl + F và tìm đoạn css như dưới.
/* Footer */
footer{margin-left:var(--nav-width); padding:0 25px; transition:var(--transition-1); font-size:90%} footer .creditInner{display:flex;align-items:baseline;justify-content:space-between; padding:20px 0} footer .creditInner p{margin:0;padding-right:20px;overflow:hidden;white-space:nowrap} footer .creditInner .creator{opacity:0} footer .toTop{display:flex;align-items:center; white-space:nowrap} footer .toTop:before{content:'To top'; opacity:.7} footer .toTop svg{width:20px;height:20px;margin-left:5px}/* Footer */
footer{margin-left:var(--nav-width); padding:0 25px; transition:var(--transition-1); font-size:90%} footer .creditInner{display:flex;align-items:baseline;justify-content:space-between; padding:20px 0} footer .creditInner p{margin:0;padding-right:20px;overflow:hidden;white-space:nowrap} footer .creditInner .creator{opacity:0} footer .toTop{display:flex;align-items:center; white-space:nowrap} footer .toTop:before{content:'To top'; opacity:.7} footer .toTop svg{width:20px;height:20px;margin-left:5px}
footer .widget ul{list-style:none;margin:0;padding:0}
footer .LinkList h3{font-size:16px}
footer{background-color:transparent;padding-top:2rem}
footer .toTop-Wrap{border-bottom:1px solid rgba(0,0,0,.1)}
footer .toTop{display:flex;align-items:center;opacity:.6;padding:20px 0;width:120px}
footer .footerContent{display:flex;flex-wrap:wrap;padding:30px 0 20px}
footer .footerContent > *:first-child{width:40%;margin-right:auto}
footer .footerContent > *{width:15%}
footer .footerContent .title{color:inherit;margin-bottom:12px}
footer .footerContent .widget:not(:last-child){margin-bottom:25px}
footer .LinkList a{display:inline-flex;align-items:center;color:inherit;line-height:26px}
footer .made{padding-right:40px;padding-top:10px}
footer .madeLogo div{font-size:1.1rem;font-weight:700;font-family:Noto Sans;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
footer .madeLogo div span{font-size:11px;font-weight:400;font-family:Noto Sans;opacity:.6}
footer .widget ul{list-style:none;margin:0;padding:0}
@media screen and (max-width:600px){
footer{font-size:12px}
footer .footerContent .title{font-size:13px}
footer .footerContent > *{width:33.333%}
footer .footerContent > *:first-child{display:none}}
}
<footer class='sectionInner'>
<!--[ Credit ]-->
<div class='creditInner'>
<p>© <span id='getYear'><script>/*<![CDATA[*/ var d = new Date(); var n = d.getFullYear(); document.getElementById('getYear').innerHTML = n; /*]]>*/</script></span> ‧ <a expr:href='data:blog.homepageUrl.canonical'><data:blog.title/></a>. All rights reserved. <span class='creator'>Made with ♥ by <a href='https://theme.jagodesain.com'>Jago Desain</a></span></p>
<!--[ Back top button ]-->
<div class='toTop' onclick='window.scrollTo({top: 0});'><b:include name='arow-up-icon'/></div>
</div>
</footer><footer class='mainSection footbar'>
<!--[ Back top button ]-->
<div class='toTop-Wrap'>
<div class='toTop' onclick='window.scrollTo({top: 0});'>
<svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><polyline points='18 15 12 9 6 15'/></svg>
</div></div>
<!--[ Footer content ]-->
<div class='footerContent'>
<div class='section'>
<div class='widget'>
<div class='made'>
<div class='madeTitle'>Created by</div>
<div class='madeLogo'>
<div>Wendy Code <span>Blog</span></div>
</div>
</div>
</div>
</div>
<div class='section'>
<div class='widget LinkList'>
<h3 class='title'>Product</h3>
<ul>
<li>
<a href='https://theme.choipanwendy.com'>
<span>Theme</span>
</a>
</li>
<li>
<a href='https://www.choipanwendy.com/search/label/jasa'>
<span>Services</span>
</a>
</li>
</ul>
</div>
</div>
<div class='section'>
<div class='widget LinkList'>
<h3 class='title'>Support</h3>
<ul>
<li>
<a href='/p/forum-wendy-code.html'>
<span>Forum</span>
</a>
</li>
<li>
<a href='/p/kontak-kami.html'>
<span>Contact</span>
</a>
</li>
</ul>
</div>
</div>
<div class='section'>
<div class='widget LinkList'>
<h3 class='title'>Usage</h3>
<ul>
<li>
<a href='/p/privacy.html'>
<span>Privacy</span>
</a>
</li>
<li>
<a href='/p/disclaimer.html'>
<span>Disclaimer</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!--[ Credit ]-->
<div class='credit'>
<p>© 2020 ~ <span id='copyrightYear'><script>var d = new Date(); var n = d.getFullYear(); document.getElementById('copyrightYear').innerHTML = n;</script></span> ‧ <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> ‧ All Rights Reserved</p>
</div>
</footer>Lời Kết
Trên đây là toàn bộ cách thêm Footer, và toàn bộ code là nguồn từ Wendy Code nhé. Nếu có vấn đề về khiếu nại hay bản quyền xin hãy comment xuống dưới hoặc liên hệ lên Fanpage. Chúc các bạn ngày làm việc hiệu quả!
10 nhận xét