Hello Everyone, in this post I will share How To Modify Footer In Median UI Template that you are currently using. This Post is only for those who use Median UI Template. it is the only template Median is for the user so let's see how you can create a footer in the Median UI template.
The Median UI template created by Jago Design doesn't have that Great Gooter, But a simple Gooter is provided. But After Reading This Post Completely, You Can Easily Give a Great Look to The Footer.
How To Modify Footer In Median UI Template ?
This Article Have Updated on Median UI v1.5 Latest Version.
/* Footer */
footer{margin-left:var(--nav-width); padding:0 25px; transition:var(--transition-1); font-size:90%} footer .creditInner{display:flex;align-items:baseline;justify-content:space-between; padding:20px 0} footer .creditInner p{margin:0;padding-right:20px;overflow:hidden;white-space:nowrap} footer .creditInner .creator{opacity:0} footer .toTop{display:flex;align-items:center; white-space:nowrap} footer .toTop:before{content:'To top'; opacity:.7} footer .toTop svg{width:20px;height:20px;margin-left:5px}/* Footer */
footer{margin-left:var(--nav-width); padding:0 25px; transition:var(--transition-1); font-size:90%} footer .creditInner{display:flex;align-items:baseline;justify-content:space-between; padding:20px 0} footer .creditInner p{margin:0;padding-right:20px;overflow:hidden;white-space:nowrap} footer .creditInner .creator{opacity:0} footer .toTop{display:flex;align-items:center; white-space:nowrap} footer .toTop:before{content:'To top'; opacity:.7} footer .toTop svg{width:20px;height:20px;margin-left:5px}
footer .widget ul{list-style:none;margin:0;padding:0}
footer .LinkList h3{font-size:16px}
footer{background-color:transparent;padding-top:2rem}
footer .toTop-Wrap{border-bottom:1px solid rgba(0,0,0,.1)}
footer .toTop{display:flex;align-items:center;opacity:.6;padding:20px 0;width:120px}
footer .footerContent{display:flex;flex-wrap:wrap;padding:30px 0 20px}
footer .footerContent > *:first-child{width:40%;margin-right:auto}
footer .footerContent > *{width:15%}
footer .footerContent .title{color:inherit;margin-bottom:12px}
footer .footerContent .widget:not(:last-child){margin-bottom:25px}
footer .LinkList a{display:inline-flex;align-items:center;color:inherit;line-height:26px}
footer .made{padding-right:40px;padding-top:10px}
footer .madeLogo div{font-size:1.1rem;font-weight:700;font-family:Noto Sans;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
footer .madeLogo div span{font-size:11px;font-weight:400;font-family:Noto Sans;opacity:.6}
footer .widget ul{list-style:none;margin:0;padding:0}
@media screen and (max-width:600px){
footer{font-size:12px}
footer .footerContent .title{font-size:13px}
footer .footerContent > *{width:33.333%}
footer .footerContent > *:first-child{display:none}}
}
<footer class='sectionInner'>
<!--[ Credit ]-->
<div class='creditInner'>
<p>© <span id='getYear'><script>/*<![CDATA[*/ var d = new Date(); var n = d.getFullYear(); document.getElementById('getYear').innerHTML = n; /*]]>*/</script></span> ‧ <a expr:href='data:blog.homepageUrl.canonical'><data:blog.title/></a>. All rights reserved. <span class='creator'>Made with ♥ by <a href='https://theme.jagodesain.com'>Jago Desain</a></span></p>
<!--[ Back top button ]-->
<div class='toTop' onclick='window.scrollTo({top: 0});'><b:include name='arow-up-icon'/></div>
</div>
</footer>Step 7 :- Then if You Found This Code Please Remove it And Then Replace it With Below Code.
<footer class='mainSection footbar'>
<!--[ Back top button ]-->
<div class='toTop-Wrap'>
<div class='toTop' onclick='window.scrollTo({top: 0});'>
<svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><polyline points='18 15 12 9 6 15'/></svg>
</div></div>
<!--[ Footer content ]-->
<div class='footerContent'>
<div class='section'>
<div class='widget'>
<div class='made'>
<div class='madeTitle'>Created by</div>
<div class='madeLogo'>
<div>Smart Tech <span>Mukesh</span></div>
</div>
</div>
</div>
</div>
<div class='section'>
<div class='widget LinkList'>
<h3 class='title'>Product</h3>
<ul>
<li>
<a href='https://mukeshtemplate.blogspot.com'>
<span>Theme</span>
</a>
</li>
<li>
<a href='https://www.smarttechmukesh.online'>
<span>Services</span>
</a>
</li>
</ul>
</div>
</div>
<div class='section'>
<div class='widget LinkList'>
<h3 class='title'>Support</h3>
<ul>
<li>
<a href='/p/about-us.html'>
<span>About</span>
</a>
</li>
<li>
<a href='/p/contact-us.html'>
<span>Contact Us</span>
</a>
</li>
</ul>
</div>
</div>
<div class='section'>
<div class='widget LinkList'>
<h3 class='title'>Pages</h3>
<ul>
<li>
<a href='/p/disclaimer.html'>
<span>Disclaimer</span>
</a>
</li>
<li>
<a href='/p/privacy.html'>
<span>Privacy Policy</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!--[ Credit ]-->
<div class='credit'>
<p>© <span id='copyrightYear'><script>var d = new Date(); var n = d.getFullYear(); document.getElementById('copyrightYear').innerHTML = n;</script></span> ‧ <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> ‧ All Rights Reserved</p>
</div>
</footer>Modifiy Footer Preview
Conclusion :-
In this post I have shared with you all How to modify footer in Median UI Template. So how did you like this post and tell me by commenting. If you have any question then you can comment. Thanks for visiting our website.
Refrence :
Smart Tech Carry
Rate This Article
Thanks for reading: How To Modify Footer In Median UI and Plus UI 2.6 Template ?:)
Conclusion
In this article, I have shared How To Modify Footer In Median UI and Plus UI 2.6 Template ?. I hope you have liked it Please do share it with your friends and follow our blog for more.
Join our Telegram Channel to get the lastest posts updates daily. Thank you!