How to Add Footer for Median UI 1.6 - invesroc

 

Hey guys, the other day I read a comment from a friend on my blog that wanted me to make a guide to add footer for Median UI 1.6. So today, I will guide you to add footer for 1.6 version and note that only for 1.6 version, if you want to use it for other versions, you have to edit a little CSS.

Instruct:

To do this is not difficult, you just need to follow the 2 steps I guide below: add HTML and add CSS.

Step 1: Add HTML

• First, open the template and find the credits section of the template. In this 1.6 template , please find the following tag <span class='credit'>
• Then copy the entire HTML below and paste it before that span tag.
• Edit the information to your liking, that's the end of step 1.

Step 2: Add CSS

• Copy the entire CSS below.
• Find the CSS part of the template then paste all the CSS in there .

My HTML and CSS are below!

CSS Code

.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;}

}

HTML Code

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

        

Epilogue

So here I have shared with you how to make a footer for the Median UI 1.6 template like on my blog. If you have any questions about the article as well as the code above or about other things on the blog, you can leave a comment below and I will answer. Wishing you a productive day of work and study.

CopyRight@ Invesroc

Twice through the article

Click the button below to continue:
Download
Possibly some country IPs are blocked, please use a VPN to continue downloading