Hello Everyone, Today in This Tutorial I will show you How To Add Stylish Footer in Median UI 1.5 Blogger Theme. There is no Stylish Footer In Default Median UI Blogger Theme But if you want to add a stylish Footer in Median Ui Theme then This post is very Helpful for you.
This tutorial was requested by Pushu Via our Telegram Group. who commented through our forum, for those of you who want to regulate the tutorial, you can comment on the website or send a message via email via the contact page, you can also comment on our Telegram Channel. if possible we will do it in the future.
Preview Of Footer :-
If you want to Modify the footer of median UI 1.5 Blogger Theme, Then please read this article carefully so that there is no error when you want to apply it to your blog or website. So Let's get started.
How to Modify the Median-Ui Template Footer
/* Footer */
footer{margin-left:var(--nav-width); padding:0 25px; -webkit-transition:var(--transition-1);transition:var(--transition-1); font-size:90%}
/* Footer */
footer{margin-left:var(--nav-width);padding:0 25px;transition:var(--transition-1);font-size:90%}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;border-top:1px solid #eee}footer .footerContent>:first-child{width:40%;margin-right:auto}footer .footerContent>*{width:20%}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 .LinkList a svg.line{width:15px;height:15px;color:inherit;margin-right:8px;opacity:.6}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}}@-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 (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){#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:480px){footer{font-size:12px}footer .toTop:before{content:'Top'}}::selection{background:rgba(84,174,255,.4)}.dmca-sample{font-size:9px;color:rgba(254,254,254,.6);border-radius:3px;overflow:hidden}.dmca-sample:before{content:'DMCA';padding:5px 10px;background-color:#2a2a2a;border-radius:3px 0 0 3px}.dmca-sample:after{content:'Protected';color:#202442;padding:5px 10px;background-color:#c5c5c5;border-radius:0 3px 3px 0}@-webkit-keyframes code-pro-rung-lac{0%{-webkit-transform:rotate(0) scale(1) skew(1deg)}10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}50%{-webkit-transform:rotate(0) scale(1) skew(1deg)}100%{-webkit-transform:rotate(0) scale(1) skew(1deg)}}.code{border-radius:6px!important}
<footer class='mainSection footbar'>
<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>
<div class='footerContent'>
<div class='col-md-4'>
<div class='footer section' id='footer1' name='footer-1'><div class='widget HTML' data-version='2' id='HTML6'>
<div class='widget-content'>
<div class='widget'>
<div class='made'>
<div class='madeTitle'>Created by</div>
<div class='madeLogo'>
<div style='font-family:'Poppins',sans-serif;'>TechyJeeshan<span> .xyz</span></div>
</div>
</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='https://www.insurancefinances.com/' title='DMCA.com Protection Status'>
<span class='dmca-sample'/></a>
</div>
</div>
</div>
</div></div>
</div>
<div class='col-md-4'>
<div class='footer section' id='footer2' name='footer-2'><div class='widget HTML' data-version='2' id='HTML7'>
<div class='widget-content'>
<div class='widget LinkList'>
<h3 class='title'>Friends</h3>
<ul>
<li>
<a href='https://www.insurancefinances.com/' target='_blank' title='Techyjeeshan'>
<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 style='font-size: 13.3px!important;'>Techyjeeshan</span>
</a>
</li>
<li>
<a href='https://www.mrhasan.online/' target='_blank' title='Mrhasan'>
<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 style='font-size: 13.3px!important;'>Mrhasan</span>
</a>
</li>
<li>
<a href='https://www.gyanitheme.online/' target='_blank' title='Gyanitheme'>
<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 style='font-size: 13.3px!important;'>Gyanitheme</span>
</a>
</li>
<li>
<a href='https://www.theforyou.online' target='_blank' title='theforyou'>
<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 style='font-size: 13.3px!important;'>Theforyou</span>
</a>
</li>
</ul>
</div>
</div>
</div></div>
</div>
<div class='col-md-4'>
<div class='footer section' id='footer3' name='footer-3'><div class='widget HTML' data-version='2' id='HTML8'>
<div class='widget-content'>
<div class='widget LinkList'>
<h3 class='title'>Contact</h3>
<ul>
<li>
<a href='https://t.me/gyanitheme' rel='nofollow' target='_blank' title='Twitter'>
<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 style='font-size: 13.3px!important;'>Twitter</span>
</a>
</li>
<li>
<a href='https://www.insurancefinances.com/' rel='nofollow' target='_blank' title='Instagram'>
<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 style='font-size: 13.3px!important;'>Instagram</span>
</a>
</li>
<li>
<a href='https://www.insurancefinances.com/' rel='nofollow' target='_blank' title='Youtube'>
<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 style='font-size: 13.3px!important;'>Youtube</span>
</a>
</li>
<li>
<a href='/p/contact.html' target='_blank' title='Contact'>
<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 style='font-size: 13.3px!important;'>Contact</span>
</a>
</li>
</ul>
</div>
</div>
</div></div>
</div>
<div class='col-md-4'>
<div class='footer section' id='footer4' name='footer-4'><div class='widget HTML' data-version='2' id='HTML9'>
<div class='widget-content'>
<div class='widget LinkList'>
<h3 class='title'>Powered</h3>
<ul>
<li>
<a href='https://www.cloudflare.com' rel='nofollow' target='_blank'>
<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 style='font-size: 13.3px!important;'>Cloudflare</span>
</a>
</li>
<li>
<a href='https://www.blogger.com' rel='nofollow' target='_blank'>
<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 style='font-size: 13.3px!important;'>Blogger</span>
</a>
</li>
<li>
<a href='https://github.com' rel='nofollow' target='_blank'>
<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 style='font-size: 13.3px!important;'>Github</span>
</a>
</li>
<li>
<a href='https://analytics.google.com' rel='nofollow' target='_blank'>
<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 style='font-size: 13.3px!important;'>Analytics</span>
</a>
</li>
</ul>
</div>
</div>
</div></div>
</div>
</div>
<div class='credit'>
<p style='font-size:13.3px;'>© <span id='copyrightYear'><script>var d = new Date(); var n = d.getFullYear(); document.getElementById('copyrightYear').innerHTML = n;</script></span> ‧ <a href='https://www.insurancefinances.com/'>Techy Jeeshan</a> ‧ All Rights Reserved</p>
</div>
</footer>
Note :- Please Adjust Text And link As Your Choice.
Conclusion
Well That's great tutorial on How To Add Stylish Footer in Median UI 1.5 Blogger Theme or Footer Modification in Median Ui 1.5. Hopefully its Useful for All Visitors.
Source code:
https://fletro.jagodesain.com/
Post a Comment
Post a Comment