Hello guys, Welcome again to my blog. As u all know that Median Ui is an awesome blogger template but you guyz have noticed something that Median Ui don't have any catchy footer implemented, so here I have made a guide to add a responsive footer for Median UI 1.6. I will guide you to add footer for 1.6 version and keep it in mind that this tutorial is only for 1.6 version, if you want to use it for other versions or in any other template, you have to edit a little more CSS.
What is a website Footer?
The Footer, as it's name suggests, is that the final piece of content situated at the lowest or bottom of every page of your blog or website.
The purpose of the footer is to signal to the visitors that they're at the end of the webpage and to supply links or shortcuts to different areas of your website. The footer is that the space that several users expect to search out the ‘fine print’ - legal info like ‘terms and conditions’, ‘privacy policies’, 'DMCA', 'Contact information' etc.
As usual the footer can embrace short cuts to key website or webpage content, to save lots of the user from having to scroll back up the page to wherever the quality menus are placed. Common short cuts are:
- Customer service
- Satisfaction guaranteed
- Terms and conditions
- Privacy policy
- Contact us.
- About us
- Powered By
How to Modify the Median-Ui Template Footer
To do this, it is not difficult, Just Add & Replace the HTML and CSS and you're done, you just need to follow the 2 steps that I guide below:
Demo:- If you want to see the demo of this Footer, Just Scroll to the bottom of this webpage and see that footer
Step 1: Add CSS First
Tips :- Before beginning this tutorial backup your blogger theme to avoid any errors and issues.
- First Go To Blogger.Com.
- Open your blogger dashboard.
- Next, Click on the "Theme" Section and Click Edit Html. Option
- After that, Use Ctrl + F Key and find the below code in your template
- If you have found it please delete it, and replace it with the given CSS code below.
/* 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}
/* Responsive Footer by Techandfunzone.eu.org*/
#LinkList002{position:fixed;left:0;right:0;bottom:0;width:calc(var(--nav-width) - var(--nav-border));background-color:var(--nav-bg);padding:20px 20px 30px 25px;transition:var(--transition-1)}#LinkList002 ul{justify-content:flex-start}#LinkList002 li:first-child{margin-left:0}#LinkList002 label{display:none;align-items:center;opacity:0;visibility:hidden}.widget .title{display:flex;align-items:center;justify-content:space-between;margin:0 0 40px;font-size:15px;font-weight:700;font-family:var(--font-body);position:relative;color:inherit}.widget .title:after{content:'';display:block;width:18px;position:absolute;bottom:-10px;border-bottom:1px solid var(--dark-textAlt)}.widget .title.search{font-weight:400;font-size:14px;display:block}.widget .title svg{height:18px;width:18px;fill:var(--dark-textAlt)}.widget .title svg.line{fill:none;stroke:var(--dark-textAlt)}#LinkList002 label:hover svg{fill:var(--link-color)}#LinkList002 label:hover svg.line{fill:none;stroke:var(--link-color)}.Blog~.HTML{display:none}@media screen and (max-width:480px){footer .footerContent>*,footer .footerContent>:first-child,footer .footerContent>:last-child{width:50%}}@media screen and (max-width:480px){footer .creditInner{font-size:12px}footer .footerContent>*,footer .footerContent>:first-child,footer .footerContent>:last-child{width:100%!important}footer .footerContent>:nth-child(1){order:3}footer .footerContent>:nth-child(2){order:1}footer .footerContent>:nth-child(3){order:2}footer .footerContent>:nth-child(4){order:4}footer .toTop:before{content:''}}h1{-webkit-touch-callout:text;-webkit-user-select:text;-khtml-user-select:text;-ms-user-select:text;-moz-user-select:text}.Label{font-size:90%}.Label ul{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}.Label li{width:calc(50% - 10px);margin-bottom:15px}.Label li:nth-child(2n+1){margin-right:20px}.Label li>*{display:flex;align-items:center;color:inherit}.Label li>* svg{flex-shrink:0;width:18px;height:18px;margin-left:5px}.Label li>a:hover svg{fill:var(--link-color)}.Label li>a:hover svg.line{fill:none;stroke:var(--link-color)}.Label li:nth-child(2n+1).labelShow{margin:0}footer{padding:40px 0 2rem;background-color:var(--nav-bg);color:var(--foot-text);font-size:95%;line-height:1.8em;margin-left:var(--nav-width)}footer .widget{margin-bottom:35px}footer .widget ul{list-style:none;margin:0;padding:0}footer .footerContent{display:flex;flex-wrap:wrap}footer .footerContent>:first-child{width:25%;margin-right:auto}footer .footerContent>:last-child{width:30%;margin-left:auto}footer .footerContent>*{width:18%}footer .footerContent .title{color:inherit;margin-bottom:12px}footer .footerContent .title:after{display:none}footer .LinkList a{display:inline-flex;align-items:center;color:inherit;line-height:24px}footer .LinkList a svg.line{width:15px;height:15px;stroke:var(--foot-icon);margin-right:15px}footer .aboutUs{margin-right:25px}footer .aboutUs .titleText:before{content:attr(data-text);font-size:13px;opacity:.6;display:block;margin-bottom:5px}footer .aboutUs .aboutDesc{margin:20px 0 0;line-height:1.5em}footer .aboutLinks{display:flex;align-items:flex-start}footer .aboutLinks li:not(:last-child){margin-right:5px}footer .LinkList .aboutLinks a svg.line{width:20px;height:22px;margin-right:0;stroke:var(--icon-altColor);stroke-width:1.5}footer .LinkList .aboutLinks a{display:flex}footer .creditInner{display:flex;justify-content:space-between}footer .creditInner p{margin:0;padding-right:20px;padding-bottom:30px;overflow:hidden;white-space:nowrap}footer .creditInner .creator{opacity:0}footer .toTop{display:flex;align-items:center;opacity:.6;white-space:nowrap}footer .toTop:before{content:''}footer .toTop svg{stroke:var(--foot-icon);margin-left:5px; margin-bottom:40px;margin-right:20px;}.button{display:inline-flex;align-items:center;margin:12px 12px 12px 0;padding:10px 15px;outline:0;border:0;border-radius:2px;line-height:20px;color:#fefefe;background-color:var(--link-bg);font-size:13px;font-family:var(--font-body);white-space:nowrap;overflow:hidden;max-width:100%}@-webkit-keyframes slidein{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}@keyframes slidein{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}@-webkit-keyframes nudge{0%{transform:translateX(0)}30%{transform:translateX(-5px)}50%{transform:translateX(5px)}70%{transform:translateX(-2px)}100%{transform:translateX(0)}}@keyframes nudge{0%{transform:translateX(0)}30%{transform:translateX(-5px)}50%{transform:translateX(5px)}70%{transform:translateX(-2px)}100%{transform:translateX(0)}}@keyframes tonext{75%{left:0}95%{left:100%}98%{left:100%}99%{left:0}}@keyframes tostart{75%{left:0}95%{left:-300%}98%{left:-300%}99%{left:0}}@keyframes snap{96%{scroll-snap-align:center}97%{scroll-snap-align:none}99%{scroll-snap-align:none}100%{scroll-snap-align:center}}@media screen and (max-width:1280px){.sectionInner{padding-left:30px;padding-right:30px}}@media screen and (min-width:768px){::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.45)}::-webkit-scrollbar-thumb:active{background-color:rgba(0,0,0,.45)}}@media screen and (max-width:896px){.sectionInner{padding-left:20px;padding-right:20px}#LinkList002{width:85%;max-width:480px;margin-left:-100%;border-radius:0 0 15px 0}#LinkList002{padding-left:20px;padding-right:20px}footer{margin-left:0}footer{padding-bottom:50px}}@media screen and (max-width:640px){.sectionInner{padding-left:20px;padding-right:20px}}@media screen and (max-width:480px){footer{font-size:12px}footer .toTop:before{content:''}}
footer{border-radius:40px 40px 0 0;padding:40px 0 2rem;background-color: #C0C0C0;color: #000000;font-size:95%;line-height:1.8em}
footer .widget{margin-bottom:25px; margin-left:15px;}
.darkMode footer{padding:40px 0 2rem;background-color:solid #666;}
.darkMode footer{background-color:rgba(255,255,255,.01)}
footer .widget ul{list-style:none;margin:0;padding:0}
footer .footerContent{display:flex;flex-wrap:wrap}
footer .footerContent > *:first-child{width:25%;margin-right:auto}
footer .footerContent > *:last-child{width:30%;margin-left:auto}
footer .footerContent > *{width:18%}
footer .footerContent .title{color:inherit;margin-bottom:12px}
footer .footerContent .title:after{display:none}
footer .LinkList a{display:inline-flex;align-items:center;color:inherit;line-height:24px}
footer .LinkList a svg.line{width:15px;height:15px;stroke:var(--foot-icon);margin-right:15px}
footer .aboutUs{margin-right:25px}
footer .aboutUs .titleText:before{content:attr(data-text);font-size:13px; opacity:.6;display:block;margin-bottom:5px}
footer .aboutUs .aboutDesc{margin:20px 0 0;line-height:1.5em}
footer .aboutLinks{display:flex;align-items:flex-start}
footer .aboutLinks li:not(:last-child){margin-right:5px}
footer .LinkList .aboutLinks a svg.line{width:20px;height:22px;margin-right:0;stroke:var(--icon-altColor);stroke-width:1.5}
.darkMode footer .LinkList .aboutLinks a svg.line{stroke:var(--dark-text)}
footer .LinkList .aboutLinks a{display:flex}
footer .creditInner{display:flex;justify-content:space-between}
footer .creditInner p{margin-bottom:10px; margin-left:15px;padding-right:20px;overflow:hidden;white-space:nowrap}
footer .creditInner .creator{opacity:0}
footer .toTop{display:flex;align-items:center;opacity:.6;white-space:nowrap}
footer .toTop:before{content:''}
footer .toTop svg{stroke:var(--foot-icon);margin-left:5px}
/* Bottom Bar Animation */
.animeTWD,.animeBlurTWD{position:fixed;width:100%;bottom:0;left:0;right:0;height:3px;z-index:23;background:linear-gradient(-45deg, #4086F4, #31A952, #FBBE01, #EB4132,#4086F4, #31A952, #FBBE01, #EB4132);background-size:200%;-webkit-animation:animeBar 5s linear infinite;animation:animeBar 5s linear infinite}.animeBlurTWD{height:10px;z-index:22;filter:blur(10px);opacity:.7}@-webkit-keyframes animeBar{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes animeBar{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
Code Reference
Lite-Ui
Step 2: Add HTML
- Now Again continue looking for the HTML code as below.
- If you have found it please delete it, and replace it with the given New HTML code below.
- 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 topic of How to Make Responsive Footer For Median UI 1.6 Theme.
<!--[ Footer section ]-->
<footer>
<!--[ Credit ]-->
<b:section class='cdtIn' id='credit-widget' maxwidgets='2' showaddelement='false'>
<b:widget id='HTML88' locked='true' title='Credit' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'/>
</b:widget-settings>
<b:includable id='main'>
<div class='footCdt'>
<span class='credit'>
<b:if cond='data:content == ""'>
© <span id='getYear'><script>/*<![CDATA[*/ var d = new Date(); var n = d.getFullYear(); document.getElementById('getYear').innerHTML = n; /*]]>*/</script></span> ‧ <bdi><a expr:href='data:blog.homepageUrl.canonical'><data:blog.title/></a></bdi>. All rights reserved. <span class='creator'>Distributed by <a href='https://techandfunzone.eu.org'>techandfunzone.eu.org</a></span>.
<b:else/>
<data:content/>
</b:if>
</span>
<span class='creator'>Distributed by <a href='https://techandfunzone.eu.org'>techandfunzone.eu.org</a></span>
</div>
</b:includable>
</b:widget>
<b:widget id='TextList88' locked='true' title='Back to top' type='TextList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='shownum'>1</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='item-1'>Top Sticky</b:widget-setting>
<b:widget-setting name='item-0'>Top</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<b:loop index='t' values='data:items' var='item'>
<b:if cond='data:t <= 0'>
<b:if cond='data:item == "Top"'>
<!--[ Back top button ]-->
<b:tag class='toTop tTop' expr:data-text='data:item' expr:name='data:view.url != data:view.url params { amp: "1" } ? "div" : "a"'>
<b:attr cond='data:view.url != data:view.url params { amp: "1" }' name='onclick' value='window.scrollTo({top: 0});'/>
<b:attr cond='data:view.url == data:view.url params { amp: "1" }' name='href' value='#mainCont'/>
<b:include name='arow-up-icon'/>
</b:tag>
<b:elseif cond='data:item == "Top Sticky"'/>
<!--[ Back top button fixed/sticky ]-->
<b:tag class='toTopF tTop' expr:data-text='data:item' expr:name='data:view.url != data:view.url params { amp: "1" } ? "div" : "a"'>
<b:attr cond='data:view.url != data:view.url params { amp: "1" }' name='onclick' value='window.scrollTo({top: 0});'/>
<b:attr cond='data:view.url == data:view.url params { amp: "1" }' name='href' value='#mainCont'/>
<b:include name='arow-up-icon'/>
</b:tag>
</b:if>
</b:if>
</b:loop>
</b:includable>
</b:widget>
</b:section>
</footer>
<!--[ Footer section ]-->
<footer>
<div class='mainSection footbar'>
<!--[ Footer content ]-->
<div class='footerContent'>
<b:section id='footer-widget-1' maxwidgets='2' showaddelement='true'>
<b:widget id='HTML009' locked='true' title='About Us' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'><div class='aboutUs'>
<div class='aboutTitle'>
<div class='titleText' data-text='Made With ♥ By'>
<h3>Tech & Fun Zone</h3>
</div>
<!--[ Delete comment tag on section bellow and change data-src='#' attribute with your logo url ]-->
<!-- <img class='lazy' alt='Lite UI' data-src='#' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/> -->
</div>
<p style='font-size: 13.3px!important;'>All posts are protected by <b>DMCA</b>.<br/>Reproduction in any form is strictly prohibited!</p>
<div class='made-support'>
<a class='dmca-badge' href='//www.dmca.com/Protection/Status.aspx?ID=145b4f9e-86f4-4f3d-a337-01eeb2bd7f4f' title='DMCA.com Protection Status'> <img align='left' alt='DMCA.com Protection Status' src='https://images.dmca.com/Badges/dmca_protected_6_120.png?ID=145b4f9e-86f4-4f3d-a337-01eeb2bd7f4f'/></a> <script src='https://images.dmca.com/Badges/DMCABadgeHelper.min.js'> </script>
</div>
</div></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section id='footer-widget-2' maxwidgets='2' showaddelement='true'>
<b:widget id='LinkList02' locked='true' title='Quick Links' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='link-3'>/p/terms-conditions.html</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='text-1'>About Us</b:widget-setting>
<b:widget-setting name='link-1'>/p/about-us.html</b:widget-setting>
<b:widget-setting name='text-0'>Contact Us</b:widget-setting>
<b:widget-setting name='link-2'>/p/privacy-policy.html</b:widget-setting>
<b:widget-setting name='text-3'><![CDATA[Terms & Conditions]]></b:widget-setting>
<b:widget-setting name='link-0'>/p/contact-us.html</b:widget-setting>
<b:widget-setting name='text-2'>Privacy Policy</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='widget-title'/>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li>
<a expr:href='data:link.target'>
<svg class='line' viewBox='0 0 24 24'><g><path d='M19.75 11.7257L4.75 11.7257'/>
<path d='M13.7002 5.70131L19.7502 11.7253L13.7002 17.7503'/></g></svg>
<span><data:link.name/></span>
</a>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section id='footer-widget-3' maxwidgets='2' showaddelement='true'>
<b:widget id='LinkList03' locked='true' title='Free Tools' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='link-3'>https://www.techandfunzone.eu.org/p/download-timer.html?go=https://www.techandfunzone.eu.org/p/privacy-policy-generator.html</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='text-1'>HTML Parser</b:widget-setting>
<b:widget-setting name='link-1'>https://www.techandfunzone.eu.org/p/download-timer.html?go=https://www.techandfunzone.eu.org/p/html-parser-free-online-tool-get-link.html</b:widget-setting>
<b:widget-setting name='text-0'>Word Counter</b:widget-setting>
<b:widget-setting name='link-2'>https://www.techandfunzone.eu.org/p/download-timer.html?go=https://www.techandfunzone.eu.org/p/image-to-webp-converter.html</b:widget-setting>
<b:widget-setting name='text-3'>Privacy Policy Generator</b:widget-setting>
<b:widget-setting name='link-0'>https://www.techandfunzone.eu.org/p/download-timer.html?go=https://www.techandfunzone.eu.org/p/word-counter.html</b:widget-setting>
<b:widget-setting name='text-2'>Image to WebP</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='widget-title'/>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li>
<a expr:href='data:link.target'>
<svg class='line' viewBox='0 0 24 24'><g><path d='M19.75 11.7257L4.75 11.7257'/>
<path d='M13.7002 5.70131L19.7502 11.7253L13.7002 17.7503'/></g></svg>
<span><data:link.name/></span>
</a>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section id='footer-widget-4' maxwidgets='2' showaddelement='true'>
<b:widget id='LinkList04' locked='true' title='Powered By' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='link-3'>https://mega.nz/</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='text-1'>Blogger </b:widget-setting>
<b:widget-setting name='link-1'>https://blogger.com</b:widget-setting>
<b:widget-setting name='text-0'>Cloudflare</b:widget-setting>
<b:widget-setting name='link-2'>https://github.com/</b:widget-setting>
<b:widget-setting name='text-3'>Mega</b:widget-setting>
<b:widget-setting name='link-0'>https://cloudflare.com/</b:widget-setting>
<b:widget-setting name='text-2'>GitHub</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='widget-title'/>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li>
<a expr:href='data:link.target'>
<svg class='line' viewBox='0 0 24 24'><g><path d='M19.75 11.7257L4.75 11.7257'/>
<path d='M13.7002 5.70131L19.7502 11.7253L13.7002 17.7503'/></g></svg>
<span><data:link.name/></span>
</a>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
<!--[ Credit ]-->
<div align='center' class='creditInner'>
<p class='credit-content' style='font-size:15px'><span style='color:#d60000'><strong>Copyright ©  </strong></span><span id='copyrightYear'><strong><script>/*<![CDATA[*/ var d = new Date(); var n = d.getFullYear(); document.getElementById('copyrightYear').innerHTML = n; /*]]>*/</script></strong></span><strong> | 🆃🅴🅲🅷 & 🅵🆄🅽 🆉🅾🅽🅴</strong><svg color='#3b5998' style='width:16px;height:25px' title='Verified Author' viewBox='0 0 24 24'>
<title id='Verified'>Verified Author</title>
<path d='M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z' fill='#3b5998' title='Verified Author'/>
</svg><span style='color:#d60000'><strong> | All Rights Reserved</strong></span></p>
<!--[ Back top button ]-->
<div class='toTop' onclick='window.scrollTo({top: 0});'><svg class='line' viewBox='0 0 24 24'><path d='M16.3341 2.75H7.66512C4.64512 2.75 2.75012 4.889 2.75012 7.916V16.084C2.75012 19.111 4.63512 21.25 7.66512 21.25H16.3341C19.3641 21.25 21.2501 19.111 21.2501 16.084V7.916C21.2501 4.889 19.3641 2.75 16.3341 2.75Z'/><path d='M12.0001 7.914L12.0001 16.086'/><path d='M8.25217 11.6777L12.0002 7.9137L15.7482 11.6777'/></svg>
</div>
</div>
<!--[ Bottom Bar Animation ]-->
<div class='animeTWD'>
<div class='animeBlurTWD'>
</div>
</div>
</footer>
Conclusion
So here I have shared with you how to make footer for Median UI 1.6 template like on my blog.If you want any more information like this article. Please follow our Tech & Fun Zone Telegram Channel for updates.
Hopefully, the Above tutorial has completely helped you to learn how to make footer for Median UI 1.6 template. If you have got any issue in understanding this tutorial. Then in fact you can leave a comment below and I will answer or Contact us. Wishing you a productive day of work and study.
© Tech & Fun Zone