How To Add Fletro Pro Footer In Median UI Themes

Welcome to Blogging375 in this article we discuss how to add Fletro pro footer in Median UI Tempate, With simple steps, Read full article and share with your friends to know them.

Fletro Footer

Fletro Tempate is also developed by jago design, The developer of fletro pro added a stylist footer to fletro pro blogger templates

About Footer

The website footer meant to help visitors to navigate to your Privacy, DMCA, Disclaimer, Sitemap etc easily, and This footer has social media links, Your Blog Name And A DMCA batch etc.

Advantages Of Footer

 - Improve the user experience. 

 - Store more helpful pages at the bottom. 

 - Fulfill the users experience. 

 - Important role for SEO. 

 - Copyright information.

Footer is mainly use for copyright information, pages, and for social media links. 

How To Add Footer

Step 1, Adding HTML

Only you need to add html and css first click ctrl+f and search for given code

<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='blogger375.blogspot.com'>Blogging375</a></span></p> <!--[ Back top button ]--> <div class='toTop' onclick='window.scrollTo({top: 0});'><b:include name='arow-up-icon'/></div> </div> </footer>

Delete all this code and add this one given below:

<!--[ Footer section ]--> <footer> <div class="sectionInner"> <!--[ Footer content ]--> <div class="footerContent"> <div class="section" id="footer-widget-1"> <div class="widget HTML" data-version="2" id="HTML001"> <div class="widget-content"> <div class="aboutUs"> <div class="aboutTitle"> <div class="titleText" data-text="Made with coffee by"> <h3>Median</h3> </div> <!--[ Delete comment tag on section bellow and change data-src='#' attribute with your logo url ]--> <!-- <img class='lazy' alt='Jago Desain' data-src='#' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/> --> </div> <p class="aboutDesc">There are many variations of passages of Lorem Ipsum available.</p> </div> </div> </div><div class="widget LinkList" data-version="2" id="LinkList001"> <ul class="aboutLinks"> <li> <a aria-label="Facebook" class="link" href="/"> <svg class="c-1" viewBox="0 0 32 32"><path d="M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5h8a1,1,0,0,0,1-1V20a1,1,0,0,0-1-1H15V17h1a1,1,0,0,0,1-1V12.5A2.5,2.5,0,0,1,19.5,10H22v2H21a2,2,0,0,0-2,2v2a1,1,0,0,0,1,1h1.72l-.5,2H20a1,1,0,0,0-1,1v4a1,1,0,0,0,2,0V21h1a1,1,0,0,0,1-.76l1-4a1,1,0,0,0-.18-.86A1,1,0,0,0,23,15H21V14h2a1,1,0,0,0,1-1V9a1,1,0,0,0-1-1H19.5A4.51,4.51,0,0,0,15,12.5V15H14a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h1v6H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3V24a3,3,0,0,1-3,3H20a1,1,0,0,0,0,2h4a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Z"></path></svg> </a> </li> <li> <a aria-label="Instagram" class="link" href="/"> <svg class="c-1" viewBox="0 0 32 32"><path d="M20.45,13.32a1,1,0,0,0-.57,1.3,4,4,0,1,1-2.31-2.3,1,1,0,1,0,.71-1.87,6,6,0,0,0-6.37,9.85,6,6,0,0,0,8.48,0,6,6,0,0,0,1.36-6.41A1,1,0,0,0,20.45,13.32Z"></path><circle cx="23" cy="9" r="1"></circle><path d="M28,9a5,5,0,0,0-4.9-5h0A77.11,77.11,0,0,0,9,4,5,5,0,0,0,4,8.92,91.91,91.91,0,0,0,4,23a5,5,0,0,0,4.9,5h0c2.36.22,4.73.34,7.1.34s4.71-.11,7.05-.34A5,5,0,0,0,28,23.08,87.09,87.09,0,0,0,28,9ZM26,23a3,3,0,0,1-3,3h-.1A71.73,71.73,0,0,1,9,26a3,3,0,0,1-3-3.08A92.4,92.4,0,0,1,6,9,3,3,0,0,1,9.09,6q3.44-.31,6.9-.32T23,6a3,3,0,0,1,3,3.08A85.13,85.13,0,0,1,26,23Z"></path></svg> </a> </li> <li> <a aria-label="Twitter" class="link" href="/"> <svg class="c-1" viewBox="0 0 32 32"><path d="M28.77,8.11a.87.87,0,0,0-.23-.2A4.69,4.69,0,0,0,29,6.54a1,1,0,0,0-.44-1,1,1,0,0,0-1.1,0,6.42,6.42,0,0,1-2.28.92,6.21,6.21,0,0,0-7.08-1A6.07,6.07,0,0,0,15,12.2a1,1,0,0,0,2-.4A4.08,4.08,0,0,1,19,7.28a4.24,4.24,0,0,1,5.12,1,1,1,0,0,0,.88.28l.25,0a1,1,0,0,0,.34,1.62,1,1,0,0,0-.36.88,13.07,13.07,0,0,1-4.89,11.24A12.75,12.75,0,0,1,7.69,24.61a9.06,9.06,0,0,0,4.54-2.18,1,1,0,0,0,.15-1.09,1,1,0,0,0-.93-.57,4,4,0,0,1-3-1.39,3.63,3.63,0,0,0,1-.35A1,1,0,0,0,10,18a1,1,0,0,0-.76-.84,4.42,4.42,0,0,1-3-2.48c.24,0,.48.05.74.06a1,1,0,0,0,1-.62A1,1,0,0,0,7.67,13C6,11.48,5.59,9.85,5.83,8.7a13.88,13.88,0,0,0,7,4,1,1,0,1,0,.38-2A12.1,12.1,0,0,1,6.39,6.31a1,1,0,0,0-.75-.38,1,1,0,0,0-.78.33,5.34,5.34,0,0,0-.31,6l-.09,0a1,1,0,0,0-.52.81,5.84,5.84,0,0,0,1.95,4.47,1,1,0,0,0-.18,1,6.63,6.63,0,0,0,3.18,3.57A13.89,13.89,0,0,1,4,23a1,1,0,0,0-.5,1.86A16.84,16.84,0,0,0,12,27.35a15.16,15.16,0,0,0,9.6-3.57,15.12,15.12,0,0,0,5.69-12.42,4.62,4.62,0,0,0,1.62-2.25A1,1,0,0,0,28.77,8.11Z"></path></svg> </a> </li> <li> <a aria-label="Youtube" class="link" href="/"> <svg class="c-1" viewBox="0 0 32 32"><path d="M30,12a5.71,5.71,0,0,0-5.31-5.7C18.92,6,13.06,6,7.33,6.28,4.51,6.28,2,9,2,12a43.69,43.69,0,0,0,0,8.72,5.32,5.32,0,0,0,5.28,5.33h0q4.35.24,8.72.24t8.67-.23A5.34,5.34,0,0,0,30,20.8,31.67,31.67,0,0,0,30,12Zm-2,8.63a.49.49,0,0,0,0,.12,3.36,3.36,0,0,1-3.39,3.34,166,166,0,0,1-17.28,0A3.36,3.36,0,0,1,4,20.65a42,42,0,0,1,0-8.47.45.45,0,0,0,0-.11A3.78,3.78,0,0,1,7.38,8.28c2.86-.13,5.74-.19,8.62-.19s5.76.06,8.62.19h.05c1.71,0,3.33,1.84,3.33,3.79a.76.76,0,0,0,0,.15A30.11,30.11,0,0,1,28,20.61Z"></path><path d="M20.79,15.51l-7.14-3.68a1,1,0,1,0-.92,1.78l5.43,2.79-4,2.07V16.4a1,1,0,0,0-2,0v3.72a1,1,0,0,0,1,1,1,1,0,0,0,.46-.11l7.14-3.72a1,1,0,0,0,.54-.89A1,1,0,0,0,20.79,15.51Z"></path></svg> </a> </li> <li> <a aria-label="LinkedIn" class="link" href="/"> <svg class="c-1" viewBox="0 0 32 32"><path d="M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Zm3,21a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3Z"></path><path d="M11,14a1,1,0,0,0-1,1v6a1,1,0,0,0,2,0V15A1,1,0,0,0,11,14Z"></path><path d="M19,13a4,4,0,0,0-4,4v4a1,1,0,0,0,2,0V17a2,2,0,0,1,4,0v4a1,1,0,0,0,2,0V17A4,4,0,0,0,19,13Z"></path><circle cx="11" cy="11" r="1"></circle></svg> </a> </li> <li> <a aria-label="Pinterest" class="link" href="#"> <svg class="c-1" viewBox="0 0 32 32"><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26a12,12,0,0,1-3.81-.63l1.2-4.81A7.93,7.93,0,0,0,16,23a8.36,8.36,0,0,0,1.4-.12,8,8,0,1,0-9.27-6.49,1,1,0,0,0,2-.35,6,6,0,1,1,3.79,4.56L15,16.24A1,1,0,1,0,13,15.76l-2.7,10.81A12,12,0,1,1,16,28Z"></path></svg> </a> </li> <li> <a aria-label="Whatsapp" class="link" href="#"> <svg class="c-1" viewBox="0 0 32 32"><path d="M16,3A13,13,0,0,0,4.53,22.13L3,27.74a1,1,0,0,0,.27,1A1,1,0,0,0,4,29a.84.84,0,0,0,.27,0l5.91-1.65a1,1,0,0,0-.53-1.93L5.42,26.56l1.15-4.3a1,1,0,0,0-.1-.76A11,11,0,1,1,16,27a11.23,11.23,0,0,1-1.84-.15,1,1,0,0,0-1.15.82,1,1,0,0,0,.82,1.15A13,13,0,1,0,16,3Z"></path><path d="M15,11.21l-1.16-1.6a2.06,2.06,0,0,0-1.5-.84,2.08,2.08,0,0,0-1.62.6l-1.2,1.2a2.81,2.81,0,0,0-.8,2.08c0,1.77,1.36,4,4,6.6,3.09,3,5.23,4,6.69,4a2.7,2.7,0,0,0,2-.81l1.2-1.2a2,2,0,0,0-.24-3.11L20.8,17a2.09,2.09,0,0,0-1.83-.3l-1.49.47a.53.53,0,0,1-.26-.09,11.42,11.42,0,0,1-2.35-2.26.31.31,0,0,1,0-.11c.13-.44.35-1.15.5-1.64A2,2,0,0,0,15,11.21Zm1.29,7.63a2.33,2.33,0,0,0,1.75.2l1.54-.46,1.61,1.25L20,21c-.48.47-2.25.33-5.86-3.21-3-2.91-3.41-4.5-3.41-5.18A.89.89,0,0,1,11,12l1.28-1.19,1.18,1.65c-.16.49-.39,1.22-.51,1.65A2.12,2.12,0,0,0,13,15.51,11.24,11.24,0,0,0,16.33,18.84Z"></path></svg> </a> </li> </ul> </div></div> <div class="section" id="footer-widget-2"><div class="widget LinkList" data-version="2" id="LinkList02"> <h3 class="title"> Company </h3> <div class="widget-content"> <ul> <li> <a href="#"> <svg class="line" viewBox="0 0 24 24"><g><path d="M19.75 11.7257L4.75 11.7257"></path> <path d="M13.7002 5.70131L19.7502 11.7253L13.7002 17.7503"></path></g></svg> <span>About</span> </a> </li> <li> <a href="#"> <svg class="line" viewBox="0 0 24 24"><g><path d="M19.75 11.7257L4.75 11.7257"></path> <path d="M13.7002 5.70131L19.7502 11.7253L13.7002 17.7503"></path></g></svg> <span>Blog</span> </a> </li> <li> <a href="#"> <svg class="line" viewBox="0 0 24 24"><g><path d="M19.75 11.7257L4.75 11.7257"></path> <path d="M13.7002 5.70131L19.7502 11.7253L13.7002 17.7503"></path></g></svg> <span>Contact</span> </a> </li> <li> <a href="#"> <svg class="line" viewBox="0 0 24 24"><g><path d="M19.75 11.7257L4.75 11.7257"></path> <path d="M13.7002 5.70131L19.7502 11.7253L13.7002 17.7503"></path></g></svg> <span>Sitemap</span> </a> </li> </ul> </div> </div></div> <div class="section" id="footer-widget-3"><div class="widget LinkList" data-version="2" id="LinkList03"> <h3 class="title"> Services </h3> <div class="widget-content"> <ul> <li> <a href="https://theme.jagodesain.com"> <svg class="line" viewBox="0 0 24 24"><g><path d="M19.75 11.7257L4.75 11.7257"></path> <path d="M13.7002 5.70131L19.7502 11.7253L13.7002 17.7503"></path></g></svg> <span>Tech Support</span> </a> </li> <li> <a href="https://unplug.jagodesain.com"> <svg class="line" viewBox="0 0 24 24"><g><path d="M19.75 11.7257L4.75 11.7257"></path> <path d="M13.7002 5.70131L19.7502 11.7253L13.7002 17.7503"></path></g></svg> <span>Web Design</span> </a> </li> <li> <a href="https://unplug.jagodesain.com"> <svg class="line" viewBox="0 0 24 24"><g><path d="M19.75 11.7257L4.75 11.7257"></path> <path d="M13.7002 5.70131L19.7502 11.7253L13.7002 17.7503"></path></g></svg> <span>Themes</span> </a> </li> <li> <a href="https://unplug.jagodesain.com"> <svg class="line" viewBox="0 0 24 24"><g><path d="M19.75 11.7257L4.75 11.7257"></path> <path d="M13.7002 5.70131L19.7502 11.7253L13.7002 17.7503"></path></g></svg> <span>Tutorial</span> </a> </li> </ul> </div> </div></div> <div class="section" id="footer-widget-4"><div class="widget FollowByEmail" data-version="2" id="FollowByEmail00"> <h3 class="title"> Get updates </h3> <div class="follow-inner"> <label class="follow-text" for="email-input"> <span>Get updates right in your inbox. Join to get notified with all new stuff</span> </label> <form action="https://feedburner.google.com/fb/a/mailverify?uri=jdesain" method="get" target="_blank"> <input autocomplete="on" class="followAddress" id="email-input" name="email" placeholder="e.g. youremail@gmail.com" type="email"/> <input class="followSubmit" id="email-submit" type="submit" value="Subscribe"/> <input name="uri" type="hidden" value="jdesain"/> <input name="loc" type="hidden" value="en_US"/> </form> </div> </div></div> </div> <!--[ Credit ]--> <div class="creditInner"> <p>© <span id="getYear">2021</span> ‧ <a href="https://www.themesgadget.com/">Median</a>. All rights reserved. <span class="creator">Edited by <a href="https://www.themesgadget.com/">DoHindiWeb</a></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><path d="M12.0001 7.914L12.0001 16.086"></path><path d="M8.25217 11.6777L12.0002 7.9137L15.7482 11.6777"></path></svg> </div> </div> </div> </footer>

Step 2, Adding CSS

To add CSS you need to search the given code

/*]]>*/</style> <b:defaultmarkups>

Paste the given CSS just above it

/* Main */ .mainInner{border-bottom: 1px solid var(--content-border);border-bottom-left-radius: 15px;} .blogContent .mainbar > *:not(:last-child){border-bottom:none;} /* Widget FollowByEmail */ .FollowByEmail form{display:flex;max-width:320px;margin-top:20px} .FollowByEmail input[type=email]{margin:0 10px 0 0} .FollowByEmail input[type=submit]{margin:1px 0;flex-shrink:0} /* Footer */ footer{padding:40px 0 0rem;background-color:var(--foot-bg);color:var(--foot-text);font-size:95%;line-height:1.8em;border-top-left-radius: 15px;} footer .widget{margin-bottom:35px} footer .widget ul{list-style:none;margin:0;padding:0} footer .footerContent{display:flex;flex-wrap:wrap;padding: 0 25px;} 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;font-size:15px;} 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:#262d3d;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{padding:28px 25px} footer .creditInner{display:flex;justify-content:space-between;} 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;opacity:.6;white-space:nowrap} footer .toTop:before{content:'To top'} footer .toTop svg{stroke:#262d3d;margin-left:5px;width:22px;height:22px;} @media screen and (max-width:896px){ footer {padding: 40px 0 3rem;} } @media screen and (max-width:640px){ footer .footerContent > *:first-child, footer .footerContent > *:last-child, footer .footerContent > *{width:50%} } @media screen and (max-width:480px){ footer .creditInner{font-size:12px} footer .footerContent > *:first-child, footer .footerContent > *:last-child, footer .footerContent > *{width:100%} 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:'Top'} } /* Widget Input */ .widget input[type=text], .widget input[type=email], .widget textarea{display:block;width:100%;border:1px solid rgba(0,0,0,.05);outline:0;padding:15px 15px;margin-bottom:15px} .widget input[type=text]:focus, .widget input[type=email]:focus, .widget textarea:focus{border-color:var(--body-color)} .widget input[type=button], .widget input[type=submit]{display:inline-flex;align-items:center;margin:0 0 15px;padding:10px 20px;outline:0;border:0;border-radius:2px;color:#fefefe;background-color:#204ecf;font-size:14px;font-family:var(--font-body);white-space:nowrap;overflow:hidden;max-width:100%} .widget input[type=button]:hover, .widget input[type=submit]:hover{opacity:.7} /* Dark More */ .darkMode h1, .darkMode h2, .darkMode h3, .darkMode h4, .darkMode h5, .darkMode h6, .darkMode header a, .darkMode .scrollMenu a, .darkMode footer, .darkMode article .postHeader, .darkMode article.post .postInfo{color:inherit} .darkMode .headerSearch, .darkMode .scrollMenu, .darkMode .Blog .postAuthors, .darkMode .Blog .commentsContent li li .commentInner, .darkMode footer, .darkMode .Blog .commentAvatar{background-color:var(--dark-bgSec)} .darkMode .widget input[type=text], .darkMode .widget input[type=email], .darkMode .widget textarea, .darkMode .Profile .team .profileMore span {background-color: var(--dark-bgAlt);} .darkMode .Blog .shareInner li > * svg.line, .darkMode .Label li > * svg.line, .darkMode footer .LinkList a svg.line{stroke:var(--dark-textAlt)} .darkMode .mainInner {border-bottom: 1px solid rgba(255,255,255,.1);}

save your theme, Done!

Final Words

your custom fletro footer added to Median UI, If you facing any error or difficulty, let me know in comments.