So hello Blogger's I hope you are doing great. So today we going to add custom footer in median ui v1.6.
As always many bloggers want to edit the footer and searching for the ideas that how they can edit the footer.
So this article is for you. It will guide you in the process How to Add the Custom Footer in Median Ui v1.6 theme.
There are three steps extended to fours steps you have to do so kindly follow till last for adding footer on Median Ui 1.6
Let's start the process.
Adding Custom Footer In Median Ui 1.6
Before proceeding backup your template for any kind of error and easy restoration.
STEP 1
Adding CSS
- Login to your blogger dashboard.
- Now to go theme section and click on edit HTML.
- Now search for
</style>tag. - Copy the below given CSS and paste it just before the
</style>tag.
/* --- Footer CSS --- */
.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;}
}STEP 2
Adding HTML
- Now after above steps.
- Search for the code
<div class='footCdt'>code. - Now copy the below code and paste it just below
<div class='footCdt'>code.
<div class='footerContent'>
<div class='footerCol-1'>
<div class='createBy'><i class='far fa-edit'/> 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 class='dmca-badge' href='link-dmca' target='_blank' title='DMCA.com Protection Status'>
<span class='dmcaSample'/></a>
<script src='https://images.dmca.com/Badges/DMCABadgeHelper.min.js'/>
</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'/> Partner 1</a></li>
<li><a href='link-partner-2' target='blank'><i class='fal fa-angle-double-right'/> Partner 2</a></li>
<li><a href='link-partner-3' target='blank'><i class='fal fa-angle-double-right'/> 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'/> Contact 1</a></li>
<li><a href='link-contact-2' target='blank'><i class='fal fa-angle-double-right'/> Contact 2</a></li>
<li><a href='link-contact-3' target='blank'><i class='fal fa-angle-double-right'/> 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'/> Powered 1</a></li>
<li><a href='link-powered-2' target='blank'><i class='fal fa-angle-double-right'/> Powered 2</a></li>
<li><a href='link-powered-3' target='blank'><i class='fal fa-angle-double-right'/> Powered 3</a></li>
</ul>
</div>
</div>
</div>STEP 3
Adding Javascript
- Now after above steps.
- Search for
</body>tag. - Now copy the below given JavaScript just above the
</body>tag.
<script type='text/javascript'>
//<![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>After doing all three steps. Please check if the footer is added or not. If the footer is not working then please proceed for Step 4.
Note:- After Step 3 complete please check the footer and if it's added then leave the last Step 4.
STEP 4
Change Footer CSS
- Login to your Blogger dashboard.
- Go to theme section and then click on edit HTML.
- After search for
/* Footer */code. - You will find the below given CSS code of footer there.
/* 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}Now copy and replace the below given CSS code and delete the previous /* Footer */ 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}After following all this steps. I hope you have successfully installed the footer in Median Ui v1.6 so please like our blog. If you got any error please conatct us.
Conclusion
So today we have discussed about how to add custom footer in Median Ui v1.6 . If you have any query kindly comment below and do like and follow our blog for more content of like this.
Reference:
https://www.phamvanlinh.xyz