Hello 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.
<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>
Bước 2: Thêm CSS
- Copy toàn bộ đoạn CSS bên dưới đây
- Tìm phần tử sau đây /*]]>*/</style> trong CSS của template sau đó dán toàn bộ CSS sau đây vào trước phần tử đó.
.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;}
}