Cara Modifikasi Footer Template Median UI

Cara Modifikasi Footer Template Median UI - Hay sobat semuanya, wah gak kerasa ya sebentar lagi Ramadhan akan berakhir. Sudah sejauh mana amalan yang sudah kita perbuat? Oh ya kalau dilihat udah lama gak share tutorial blog, udah hampir sebulan nih sob. Pada kesempatan kali ini Saya akan membagikan tutorial mengenai cara modifikasi footer template median ui untuk tampulan footer nya sobat bisa melihat footer pada blog ini. Tutorial ini saya dapatkan dari salah satu blogger yang sangat menginspirasi saya yaitu blog Wendy Code. Jadi bagi sobat yang ingin berkunjung ke blog bang wendy silahkan ya. Tanpa panjang lebar lagi mari kita simak tutorialnya.

Disclaimer : Tutorial ini hanya berlaku untuk template Median UI karya Jagodesain.com jadi untuk template blog lainnya bisa menyesuaikan.

Cara Modifikasi Footer Template Median UI

1. Buka Blogger => Tema/Template => Edit HTML.

2.. Silahkan sobat cari kode CSS dibawah ini, dengan cara CTRL + F.

/* Footer */
.footbar{position:relative;margin-top:0;padding-top:30px;padding-bottom:30px;color:inherit;font-size:88%;}
.footbar .credit p{margin:20px 0 0;overflow:hidden;white-space:nowrap}
.footbar .credit a:hover{text-decoration:underline}
.footbar .credit .creator{opacity:0}

3. Jika sudah temu silahkan sobat ganti kode diatas dengan kode CSS dibawah ini.

/* Footer */
.footbar{position:relative;margin-top:0;padding-top:30px;padding-bottom:30px;color:inherit;font-family:Nunito Sans;font-size:88%}
.footbar .credit p{margin:20px 0 0;overflow:hidden;white-space:nowrap}
.footbar .credit a:hover{text-decoration:underline}
.footbar .credit .creator{opacity:0}
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 .toTop:after{content:'Back to top'}footer .toTop svg{stroke:#161617;margin-right:10px}
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:Nunito Sans;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
footer .madeLogo div span{font-size:11px;font-weight:400;font-family:Nunito Sans;opacity:.6}
footer .widget ul{list-style:none;margin:0;padding:0}

@media screen and (max-width:480px){.footbar{padding-bottom:30px}}
@media screen and (max-width:800px){
footer{font-size:12px}
footer .footerContent .title{font-size:13px}
footer .footerContent > *{width:33.333%}
footer .footerContent > *:first-child{display:none}}

4. Kemudian cari juga kode dibawah ini.

<footer class='mainSection footbar'>
            <div class='mainArea'>
              <div class='credit'>
                <p class='credit-content'>&#169; <span id='getYear'><script>/*<![CDATA[*/ var d = new Date(); var n = d.getFullYear(); document.getElementById('getYear').innerHTML = n; /*]]>*/</script></span> &#8231; <data:blog.title/>. All rights reserved. <span class='creator'>Made with &#9829; by <a href='https://theme.jagodesain.com'>Jago Desain</a></span></p>
              </div>
            </div>
          </footer>

5. Lalu sobat bisa ganti dengan kode dibawah ini.

<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>PayuBaco <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://template.payubaco.my.id/'>
<span>Template</span>
</a>
</li>
<li>
<a href='https://lirik.payubaco.my.id/'>
<span>Lirik Lagu</span>
</a>
</li>
</ul>
</div>
</div>
<div class='section'>
<div class='widget LinkList'>
<h3 class='title'>Support</h3>
<ul>
<li>
<a href='/p/partnership.html'>
<span>Partnership</span>
</a>
</li>
<li>
<a href='/p/penulis-tamu.html'>
<span>Penulis Tamu</span>
</a>
</li>
</ul>
</div>
</div>
<div class='section'>
<div class='widget LinkList'>
<h3 class='title'>Usage</h3>
<ul>
<li>
<a href='/p/privacy-policy.html'>
<span>Privacy</span>
</a>
</li>
<li>
<a href='/p/disclaimer-for-suprianto-sa-if-you.html'>
<span>Disclaimer</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!--[ Credit ]-->
<div class='credit'>
<p class='credit-content'>&#169; <span id='getYear'><script>/*<![CDATA[*/ var d = new Date(); var n = d.getFullYear(); document.getElementById('getYear').innerHTML = n; /*]]>*/</script></span> &#8231; <data:blog.title/>. All rights reserved. <span class='creator'>Made with &#9829; by <a href='https://theme.jagodesain.com'>Jago Desain</a></span></p>
</div>
</footer>

Silahkan sobat ganti link dan tulisan yang ingin sobat ganti.

Nah sob mudah bukan, silahkan sobat simak tutorial diatas dengan seksama dan berurutan supaya bisa berfungsi dengan baik di template blog sobat. Itulah tutorial cara modifikasi footer template median ui kita pada kali ini, jangan lupa untuk bantu share artikel yang saya bagikan di blog ini. Jika ada hal yang sobat bingungkan bisa sobat tanyakan di kolom komentar ya sob. Oh ya bagi sobat yang berminat untuk menerbitkan artikelnya di blog ini bisa kunjungi halaman Penulis Tamu. Oke sekian dulu tutorialnya sampai jumpa ditutorial selanjutnya, Mari Baca bersama PayuBaco.