Median-ui template footer modification

Hhello all, on this occasion I will share how to modify the median-ui template footer as I am currently using.

This tutorial was reviewed by IRFAN SHAH MARWAT via email and Mujib M. who commented through our forum, for those of you who want to regulate the tutorial, you can comment on the forum or send a message via email via the contact page, you can also comment on our YouTube. if possible we will do it in the future.

I got this script first on the theme site , if you visit the theme site, now the footer has changed slightly.

ok, just for those of you users of the median-ui template who want to change the footer, let's see how below.

DEMO

How to Modify the Median-Ui Template Footer

This article has been updated to match the latest version 1.5

please go to blogger select temaand edit htmluse ctrl fand search for css as below.

/* 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}

if you have found it, please delete it, and replace it with the css below.

/* 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}}
}

continue looking for code like below.

<footer class='sectionInner'>            
          <!--[ Credit ]-->
          <div class='creditInner'>
            <p>&#169; <span id='getYear'><script>/*<![CDATA[*/ var d = new Date(); var n = d.getFullYear(); document.getElementById('getYear').innerHTML = n; /*]]>*/</script></span> &#8231; <a expr:href='data:blog.homepageUrl.canonical'><data:blog.title/></a>. All rights reserved. <span class='creator'>Made with &#9829; 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>

if you have found it, please delete it, and replace it with the code below.

<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>Wendy Code <span>Blog</span></div>
</div>
</div>
</div>
</div>
<div class='section'>
<div class='widget LinkList'>
<h3 class='title'>Product</h3>
<ul>
<li>
<a href='https://theme.miusm-tech.com'>
<span>Theme</span>
</a>
</li>
<li>
<a href='https://www.miusm-tech.com/search/label/jasa'>
<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/forum-wendy-code.html'>
<span>Forum</span>
</a>
</li>
<li>
<a href='/p/kontak-kami.html'>
<span>Contact</span>
</a>
</li>
</ul>
</div>
</div>
<div class='section'>
<div class='widget LinkList'>
<h3 class='title'>Usage</h3>
<ul>
<li>
<a href='/p/privacy.html'>
<span>Privacy</span>
</a>
</li>
<li>
<a href='/p/disclaimer.html'>
<span>Disclaimer</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!--[ Credit ]-->
<div class='credit'>
<p>&#169; 2020 ~ <span id='copyrightYear'><script>var d = new Date(); var n = d.getFullYear(); document.getElementById(&#39;copyrightYear&#39;).innerHTML = n;</script></span> &#8231; <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#8231; All Rights Reserved</p>
</div>
</footer>

please adjust the text and the link, if it's done, don't forget to click save and see the results, ok so that 's the way to modify the median-ui template footer, hopefully it's useful and thank you for visiting.