Notification texts go here. Contact Us Buy Now!
$10.00
10
$000

Get your blog ready With details you won't find anywhere.

blogger widgets | How To Add Footer For Median UI Template

abdalrahman
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
how-to-add-footer-for-median-ui-template





Hello everyone today I will share a tutorial on how to add footer for Median UI template. You guys do 
it with me.

Steps To Modify Footer Template Median UI


Step 1

 You go to blogger to edit HTML, press Ctrl F and find 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}


Once you find it, please 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}}
}


Step 2

You continue to press Ctrl F to find the code as 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>


Once you find it, replace it with the css 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.choipanwendy.com'>
<span>Theme</span>
</a>
</li>
<li>
<a href='https://www.choipanwendy.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>

Epilogue


So I shared how to add footer for Template Media UI extremely simple, right? If you have any questions or complaints about copyright, please comment below to let me know. Hope you have a very productive day.
Read Also

Getting Info...

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.