Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

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

Hướng Dẫn Cách Thêm Chân Trang Cho Median UI 1.6, Code footer template, hướng dẫn thêm footer cho blog website, hướng dẫ thêm chân trang cho trang web

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 Cách Thêm Chân Trang Cho Median UI 1.6

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ả.

Copyright © Phạm Văn Linh

Đánh Giá Bài Viết:
No pain, no gain !

5 comments

  1. Blog Name :- Smart Tech Mukesh
    Blog Description :- Learn Something New Everyday. We Have Provide Blogger Tips, Seo Tips, Digital Marketing, Blogger Template Updates, Html, Css, Javascript and More.
    Blog Url :- https://www.smarttechmukesh.com
  2. Great Article on Blog design Css And Html Tutorials and Premium Blogger Themes Free Download

    Blog Name :- GyaniTheme
    Blog Url :- https://www.gyanitheme.online/
  3. BEST BLOGGER THEMES ,SCRIPTS , TUTORIAL AND EARNING TRICKS AND IDEAS ON ONE AND ONLY BLOG:-
    Anand Nawal
  4. Love from: https://www.relub.net/
  5. Warning⚠️⚠️
    I HAVE ADDED YOUR SITE LINK AND REMINDED YOU SOME MONTHS AGO.
    YOU DIDN'T ADDED MY SITE SO I WILL BE REMOVING YOUR LINK.
    IF YOU WANT TO ADD AGAIN THEN FIRSTLY ADD ON YOUR BLOG AND THEN COMMENT ON MY BLOG.
    https://www.anandnawal.com