How to Add Custom Footer in Median UI v1.6

Hello everyone, in this post i will share that how to design custom footer in Median UI Template. We have been asked for this tutorial by many Median UI users. That’s why I am sharing this post.

Usually, a fairly simple footer is provided by default in the Median UI blogger template. Which many users do not like at all. That’s why we are sharing a tutorial on designing a custom footer. If you haven’t downloaded Median UI v1.6 yet, the link is given below, you can download this template.

This tutorial is only for Median UI v1.6 user. Please follow all the steps mentioned in the post and read this post till the end.

How to Add Custom Footer in Median UI v1.6 :-

Step 1 :- First Login To Your Blogger Account.
Step 2 :- Then Click on Theme Menu.
Step 3 :- After that Click on Edit Html.
Step 4 :- Then find The Below Given Css Code.
/* Footer */ footer{font-size:97%;line-height:1.8em; padding:30px 0; border-top:var(--fotL) solid var(--contentL); color:var(--fotT); background:var(--fotB)} .cdtIn{display:flex;align-items:baseline;justify-content:space-between; position:relative;width:calc(100% + 20px);left:-10px;right:-10px} .cdtIn >*{margin:0 10px} .cdtIn .HTML{overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .footCdt{display:inline-flex} .footCdt .creator{opacity:0} .tTop svg{width:20px;height:20px;stroke:var(--fotT)} .toTop{display:flex;align-items:center; white-space:nowrap} .toTop::before{content:attr(data-text); opacity:.7;margin:0 5px} .toTopF{display:flex;align-items:center;justify-content:center;width:45px;height:45px;border-radius:50%;background:var(--linkB);position:fixed;bottom:20px;right:20px} .toTopF svg{stroke:#fffdfc;stroke-width:2}
Step 5 :- Then Replace it with Below Css Code.
/* Footer */ footer{font-size:97%;line-height:1.8em; padding:30px 0; border-top:var(--fotL) solid var(--contentL); color:var(--fotT); background:var(--fotB)} .cdtIn{display:flex;align-items:baseline;justify-content:space-between; position:relative;width:calc(100% + 20px);left:-10px;right:-10px} .cdtIn >*{margin:0 10px} .cdtIn .HTML{overflow:hidden;text-overflow:ellipsis;width:91%} .footCdt{display:inline-flex;flex-direction:column;width:100%} .footCdt .creator{opacity:0} .tTop svg{width:20px;height:20px;stroke:var(--fotT)} .toTop{display:flex;align-items:center; white-space:nowrap} .toTop::before{content:attr(data-text); opacity:.7;margin:0 5px} .toTopF{display:flex;align-items:center;justify-content:center;width:45px;height:45px;border-radius:50%;background:var(--linkB);position:fixed;bottom:20px;right:20px} .toTopF svg{stroke:#fffdfc;stroke-width:2}
Step 6 :- Then Put the Following Css Code Above /*]]>*/</style>.
/* Custom Footer Css By Www.SmartTechMukesh.Com */
.footerContent{display:flex;margin-bottom:10px;}
.stmFooter-1{width:40%;margin-right:10px;}
.stmFooter-1 p{opacity:.8;font-size:12px;}
.stmFooter-1 .createBy{opacity:.8;}
.stmFooter-1 .footerName{font-size:23px;font-weight:700;}
.stmFooter-1 .footerName span{font-size:15px;font-weight:400;opacity:0.8;}
.stmFooter-1 .dmcaSample{font-size:9px;color:rgba(254,254,254,.6);border-radius:3px;overflow:hidden;line-height:30px;}
.stmFooter-1 .dmcaSample:before{content:'DMCA';padding:6px 10px;background-color:#2a2a2a;border-radius:4px 0 0 4px;}
.stmFooter-1 .dmcaSample:after{content:'Protected';color:#202442;padding:6px 10px;background-color:var(--linkC);border-radius:0 4px 4px 0;}
.stmFooter-1 .dmcaSample:hover{opacity:0.8;}
.stmFooter-2{width:60%;display:flex;}
.stmFooter-2 > *{width:33.333%;}
.stmFooter-2 ul{list-style:none;padding:0;}
.stmFooter-2 li{margin-bottom:10px;border-radius:3px;}
.stmFooter-2 li a{color:inherit;}
.stmFooter-2 li a:hover{color:var(--linkC);}
.drK .stmFooter-1 .dmcaSample:after{background:var(--darkU);}
.drK .stmFooter-2 li a{color:inherit;}
.drK .stmFooter-2 li a:hover{color:var(--darkU);}
@media screen and (max-width:640px){.footerContent{flex-direction:column;}.stmFooter-1{width:100%;margin-bottom:10px;margin-right:0;}.stmFooter-2{width:100%;}.cdtIn{flex-direction:column;align-items:flex-end;}}
Step 7 :- Then Put the Below Html Code Just Below the <div class='footCdt'>.
<div class='footerContent'>
  <div class='stmFooter-1'>
 <div class='createBy'><i class='far fa-edit'/> Created 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 class='dmca-badge' href='#' target='_blank' title='DMCA.com Protection Status'><span class='dmcaSample'/></a>  
  </div>
  <div class='stmFooter-2'>
    <div class='colMt-1'>
      <h3 class='title'>Partner</h3>
      <ul>
        <li><a href='#' target='blank'><i class='fal fa-angle-double-right'/> Link 1</a></li>
        <li><a href='#' target='blank'><i class='fal fa-angle-double-right'/> Link 2</a></li>
        <li><a href='#' target='blank'><i class='fal fa-angle-double-right'/> Link 3</a></li>
      </ul>
    </div>
    <div class='colMt-2'>
      <h3 class='title'>Contact</h3>
      <ul>
        <li><a href='#' target='blank'><i class='fal fa-angle-double-right'/> Link 1</a></li>
        <li><a href='#' target='blank'><i class='fal fa-angle-double-right'/> Link 2</a></li>
        <li><a href='#' target='blank'><i class='fal fa-angle-double-right'/> Link 3</a></li>
      </ul>
    </div>
    <div class='colMt-3'>
      <h3 class='title'>Powered</h3>
      <ul>
        <li><a href='#' target='blank'><i class='fal fa-angle-double-right'/> Link 1</a></li>
        <li><a href='#' target='blank'><i class='fal fa-angle-double-right'/> Link 2</a></li>
        <li><a href='#' target='blank'><i class='fal fa-angle-double-right'/> Link 3</a></li>
      </ul>
    </div>
  </div>
</div>
Step 8 :- Then put the Following JavaScript Code Above the </body>.
<script>
//<![CDATA[
function loadCSS(e,t,s){"use strict";var a=window.document.createElement("link"),t=t||window.document.getElementsByTagName("script")[0];a.rel="stylesheet",a.href=e,a.media="only x",t.parentNode.insertBefore(a,t),setTimeout(function(){a.media=s||"all"})}loadCSS("https://pro.fontawesome.com/releases/v5.10.0/css/all.css"),loadCSS("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css");
//]]>
</script>
Step 9 :- Finally, Don’t Forget To Click on Save and See The Result.

Preview Of Median UI v1.6 Custom Footer :-

I have checked the design of the footer using all this code. After that we have created this image preview. We could not give its web preview so we have given its image preview to show you all.

How to Add Custom Footer in Median UI v1.6
Source : www.smarttechmukesh.com

Conclusion :-

We have shared for Median UI blogger template user how to create custom footer in template and all the code used in it. I hope this way to create custom footer in Median UI blogger template can be very useful for you and your blog. Thank you for visiting our website.

Refrence :
Www.SmartTechMukesh.Com

Shares:

14 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *