Hướng Dẫn Cách Thêm Chân Trang Cho Median UI 1.6

Hế lô các bạn, hôm trước mình có đọc được bình luận của một bạn trên blog của mình muốn mình làm hướng dẫn thêm footer cho bản Median UI 1.6. Thì ngày hôm nay, mình sẽ hướng dẫn các bạn thêm chân trang cho bản 1.6 và lưu ý chỉ cho bản 1.6 thôi nha nếu muốn dùng cho các bản khác thì các bạn phải edit thêm một chút CSS

Hướng Dẫn:

Để làm được điều này thì không hề khó, các bạn chỉ cần làm theo 2 bước mình hướng dẫn dưới đây là: thêm HTML và thêm CSS là xong

Bước 1: Thêm HTML

Đầu tiên, mở template và tìm đến phần credit của template. Ở bản template 1.6 này các bạn hãy tìm thẻ sau <span class='credit'>
Sau đó copy toàn bộ đoạn HTML bên dưới vàn dán vào trước thẻ span đó.
Sửa lại các thông tin theo ý của bạn, vậy là xong bước 1.

Bước 2: Thêm CSS

Copy toàn bộ đoạn CSS bên dưới đây
Tìm phần CSS của template sau đó dán toàn bộ CSS vào sau đó.

HTML và CSS mình để ở bên dưới này nha!


<div class="footerContent">
  <div class="footerCol-1">
    <div class="createBy"><i class="far fa-edit"></i> Create By</div>
    <h3 class="footerName">
      Yourname
      <span> .domain</span>
    </h3>
    <p>
      All posts are protected by <b>DMCA</b>.<br/>
      Reproduction in any form is strictly prohibited!
    </p>
    <a href="link-dmca" title="DMCA.com Protection Status" class="dmca-badge" target="_blank">
    <span class="dmcaSample"></span></a>  
    <script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js"></script>
  </div>
  <div class="footerCol-2">
    <div class="colSm-1">
      <h3 class="title">Partner</h3>
      <ul>
        <li><a href="link-partner-1" target="blank"><i class="fal fa-angle-double-right"></i> Partner 1</a></li>
        <li><a href="link-partner-2" target="blank"><i class="fal fa-angle-double-right"></i> Partner 2</a></li>
        <li><a href="link-partner-3" target="blank"><i class="fal fa-angle-double-right"></i> Partner 3</a></li>
      </ul>
    </div>
    <div class="colSm-2">
      <h3 class="title">Contact</h3>
      <ul>
        <li><a href="link-contact-1" target="blank"><i class="fal fa-angle-double-right"></i> Contact 1</a></li>
        <li><a href="link-contact-2" target="blank"><i class="fal fa-angle-double-right"></i> Contact 2</a></li>
        <li><a href="link-contact-3" target="blank"><i class="fal fa-angle-double-right"></i> Contact 3</a></li>
      </ul>
    </div>
    <div class="colSm-3">
      <h3 class="title">Powered</h3>
      <ul>
        <li><a href="link-powered-1" target="blank"><i class="fal fa-angle-double-right"></i> Powered 1</a></li>
        <li><a href="link-powered-2" target="blank"><i class="fal fa-angle-double-right"></i> Powered 2</a></li>
        <li><a href="link-powered-3" target="blank"><i class="fal fa-angle-double-right"></i> Powered 3</a></li>
      </ul>
    </div>
  </div>
</div>

.cdtIn .HTML{overflow:hidden;text-overflow:ellipsis;width:91%} 
.footCdt{display:inline-flex;flex-direction:column;width:100%}
.footerContent{display:flex;margin-bottom:10px}
.footerCol-1{width:40%;margin-right:10px}
.footerCol-1 p {opacity:.8;font-size:12px}
.footerCol-1 .createBy{opacity:.8}
.footerCol-1 .footerName{font-size:23px;font-weight:700} 
.footerCol-1 .footerName span{font-size:15px;font-weight:400;opacity:0.8}
.footerCol-1 .dmcaSample{font-size:9px;color:rgba(254,254,254,.6);border-radius:3px;overflow:hidden;line-height: 30px} 
.footerCol-1 .dmcaSample:before{content:'DMCA';padding:6px 10px;background-color:#2a2a2a;border-radius:4px 0 0 4px} 
.footerCol-1 .dmcaSample:after{content:'Protected';color:#202442;padding:6px 10px;background-color:var(--linkC);border-radius:0 4px 4px 0} 
.footerCol-1 .dmcaSample:hover{opacity:0.8}
.footerCol-2{width:60%;display:flex}
.footerCol-2 > *{width: 33.333%}
.footerCol-2 ul{list-style:none;padding:0}
.footerCol-2 li{margin-bottom:10px;border-radius:3px}
.footerCol-2 li a{color:inherit}
.footerCol-2 li a:hover{color:var(--linkC)}

.drK .footerCol-1 .dmcaSample:after{background:var(--darkU)}
.drK .footerCol-2 li a{color:inherit}
.drK .footerCol-2 li a:hover{color:var(--darkU)}

@media screen and (max-width:640px){
  .footerContent{flex-direction: column}
  .footerCol-1{width:100%; margin-bottom:10px; margin-right:0}
  .footerCol-2{width:100%}
  .cdtIn{flex-direction:column;align-items:flex-end;}
}

Lời Kết

Vậy là trên đây mình đã chia sẻ cho các bạn cách làm footer cho template Median UI 1.6 giống như trên blog của mình. Nếu có bất kì thắc mắc nào về bài viết cũng như code ở bên trên hoặc về những thứ khác trên blog các bạn có thể để lại comment ở bên dưới mình sẽ giải đáp. Chúc các bạn một ngày làm việc và học tập hiệu quả.