Cách thêm Footer (chân trang) cho Template Median UI

Vẫn như ngày nào thì mình xin chia sẻ tip thêm footer cho template Median Ui cực kì đơn giản, dễ hiểu, dễ làm, dễ xài.

Cách thêm Footer (chân trang) cho Template Median UI
Cách thêm Footer (chân trang) cho Template Median UI

Các Bước Thực Hiện

  • Bước 1: Các bạn vào chỉnh sửa HTMl ➤ Các bạn Ctr + F tìm  /* Footer */ 
  • Và các bạn sẽ thấy bên dưới nó là đoạn code này:


	/* 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}

Các bạn copy toàn bộ css này thay vào đoạn code dưới  /* Footer */  (trong css đã có  /* Footer */  các bạn chỉ copy từ  footer{margin-left:var  đến  }   rồi thay nhé)


	/* 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}}
}

  • Bước 2: Các bạn vẫn Ctr + F tìm  <footer class='sectionInner'> 
  • Ở dưới nó sẽ là đoạn HTML như này:


	<footer class='sectionInner'>            
          <!--[ Credit ]-->
          <div class='creditInner'>
            <p>&#169; <span id='getYear'><script>/*<![CDATA[*/ var d = new Date(); var n = d.getFullYear(); document.getElementById('getYear').innerHTML = n; /*]]>*/</script></span> &#8231; <a expr:href='data:blog.homepageUrl.canonical'><data:blog.title/></a>. All rights reserved. <span class='creator'>Made with &#9829; 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>

Khá giống bước 1 thì các bạn chỉ cần thay đoạn code dưới nó bằng đoạn HTML này. 

	<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>&#169; 2020 ~ <span id='copyrightYear'><script>var d = new Date(); var n = d.getFullYear(); document.getElementById(&#39;copyrightYear&#39;).innerHTML = n;</script></span> &#8231; <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#8231; All Rights Reserved</p>
</div>
</footer>

Chú ý:  <footer class='sectionInner'>  các bạn thay luôn bằng HTML bên dưới nhé, không giống hệt bước 1 đâu vì bên dứoi là  <footer class='mainSection footbar'> 

  • Bước 3: Các bạn có thể thêm, xóa các cột hay đổi thông tin phù hợp nhé!

Lời Kết

Bài viết mình tham khảo tại Nguyễn Phong Blog và toàn bộ css và html là của Wendy Code nhé!. Nếu có gì thăc mắc hãy comment bên dưới nhé, đừng quên vote cho mình đóoooo:3 

Bài viết liên quan:

Đánh giá của Bạn về bài viết này?
Star Rating WIDGET PACK