How to Add Custom Footer in Median UI v1.6 Blogger Template ?
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 TechySamir */
.footerContent{display:flex;margin-bottom:10px;}
.techysamirFooter-1{width:40%;margin-right:10px;}
.techysamirFooter-1 p{opacity:.8;font-size:12px;}
.techysamirFooter-1 .createBy{opacity:.8;}
.techysamirFooter-1 .footerName{font-size:23px;font-weight:700;}
.techysamirFooter-1 .footerName span{font-size:15px;font-weight:400;opacity:0.8;}
.techysamirFooter-1 .dmcaSample{font-size:9px;color:rgba(254,254,254,.6);border-radius:3px;overflow:hidden;line-height:30px;}
.techysamirFooter-1 .dmcaSample:before{content:'DMCA';padding:6px 10px;background-color:#2a2a2a;border-radius:4px 0 0 4px;}
.techysamirFooter-1 .dmcaSample:after{content:'Protected';color:#202442;padding:6px 10px;background-color:var(--linkC);border-radius:0 4px 4px 0;}
.techysamirFooter-1 .dmcaSample:hover{opacity:0.8;}
.techysamirFooter-2{width:60%;display:flex;}
.techysamirFooter-2 > *{width:33.333%;}
.techysamirFooter-2 ul{list-style:none;padding:0;}
.techysamirFooter-2 li{margin-bottom:10px;border-radius:3px;}
.techysamirFooter-2 li a{color:inherit;}
.techysamirFooter-2 li a:hover{color:var(--linkC);}
.drK .techysamirFooter-1 .dmcaSample:after{background:var(--darkU);}
.drK .techysamirFooter-2 li a{color:inherit;}
.drK .techysamirFooter-2 li a:hover{color:var(--darkU);}
@media screen and (max-width:640px){.footerContent{flex-direction:column;}.techysamirFooter-1{width:100%;margin-bottom:10px;margin-right:0;}.techysamirFooter-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='techysamirFooter-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='techysamirFooter-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 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>
Step 9 :- Finally, Don't Forget To Click on Save and See The Result.
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.
Source :
www.techly420.co
