bergabung di grup telegram kami

modifikasi footer template median-ui

modifikasi footer template median-ui
modifikasi footer template median-ui

Hallo semua pada kesempatan kali ini saya akan membagikan cara modifikasi footer template median-ui seperti yang saya pakai saat ini.

tutorial ini di reguest oleh Md Junaid Hassan via email dan Mujib M. yang berkomentar melalui forum kami, buat kalian yang ingin reguest tutorial bisa berkomentar di forum atau mengirim pesan via email melalui halaman kontak, bisa juga berkomentar di youtube kami. jika memungkinkan akan kami buatkan di masa mendatang.

modifikasi footer template median-ui
reguest oleh Md Junaid Hassan
modifikasi footer template median-ui
reguest oleh Mujib M.

script ini saya dapatkan dulu pada situs jago theme, jika kalian kunjungi situs jago theme sekarang footernya sudah sedikit berubah.

ok langsung saja buat kalian pengguna template median-ui yang ingin mengubah footernya mari simak caranya di bawah ini.

Cara Modifikasi Footer Template Median-Ui

artikel ini telah di update untuk menyesuaikan versi terbaru 1.5

silakan masuk ke blogger pilih tema dan edit html gunakan ctrl f dan cari css seperti di bawah ini.

/* 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}

jika sudah ketemu silakan hapus, dan ganti dengan css di bawah ini.

/* 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}}
}

lanjut cari kode seperti di bawah ini.

<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>

jika sudah ketemu silakan hapus, dan ganti dengan kode di bawah 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>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>

silakan di sesuaikan text dan linknya jika sudah jangan lupa untuk klik simpan dan lihat hasilnya, ok jadi sekian cara modifikasi footer template median-ui semoga bermanfaat dan terima kasih sudah berkunjung.

Source code:
http://theme.jagodesain.com

Baca juga :

17 komentar


  1. 21 April, 2021 20:07
    pertamax wkwk
  2. 21 April, 2021 20:12
    sebelumnya maaf mas, modifikasi footer ini sudah aku pasangkan di blogku heheh.

    aku tambah sedikit kode biar muncul di tataletak, jadi biar mudah untuk ngeditnya nanti heheh.

    terimakasih loh mas untuk kedua kalinya request an saya di penuhi.
    1. 21 April, 2021 21:09
      Sama2 mas, jangan sunkan untuk reguest lagi
  3. 23 April, 2021 23:40
    nunggu updatenya hihi
    1. 24 April, 2021 06:57
      Kayanya dalam waktu Kurung dekat median ui bakal ada update lagi, karan saya lihat fletro sudah update versi 6 nya. Tampilanya hampir sama dengan imagz
    2. 24 April, 2021 11:46
      berarti bakal ada pergantian class-class baru dong yah
  4. 24 April, 2021 13:53
    untuk mengatur jarak di tampilan Mobile gmna ya, gan?

    https://1.bp.blogspot.com/-lR0twQiT0fM/YIO_3FJJ8HI/AAAAAAAAWag/-Zc9NjjNSZAfzoJudh0bSO6yrDyT_LiYwCLcBGAsYHQ/s969/Screenshot_20210424-135015_Chrome.jpg
    1. 24 April, 2021 14:54
      sudah ditambah ini? @media screen and (max-width:480px){.footbar{padding-bottom:30px}}
    2. 24 April, 2021 15:06
      Iya harusnya jarak paddingnya uda tidak setinggi itu karna saya juga sudah memberi cssnya.

      Atau bisa coba ubah css ini kalau tidak salah pada media responsive max 800px


      .footbar{padding-bottom:90px}


      turunkan saja nilanya misalnya menjadi 70px atau sesuai kebutuhan aja
    3. 24 April, 2021 19:36
      sudah saya ikuti semua langkah2 yg di artikel gan, ini saya baru hapus kode padding-bottom dibagian /* Blog article */ baru jaraknya ga terlalu jauh dri bawah. Maaf sebelumnya, saya ga tau ttg kode2 begituan, taunya copas terus di terapin di blog saya hehe

      https://prnt.sc/11z1rq5
    4. 24 April, 2021 22:23
      mantap mas
  5. 08 Oktober, 2021 17:53
    How to add auto slideshow to Median Ui slider in mobile device. Like Imagz blogger template.
  6. 15 Maret, 2022 20:50
    Mas wendy

    Saya request cara membuat widget menu median ui v.1.6 otomatis muncul seperti median ui v.1.5 dong, suapaya postingan tidak terlihat lebar banget

    Terimakasih saya tunggu
    1. 12 Juni, 2022 07:24
      komentari kode ini
      <b:class name='hdMn'/>
  7. 18 Maret, 2022 13:36
    request bang cara di komentar bisa mengirim script code kya punya abang wendy
    1. 18 Maret, 2022 21:09
      cek postingn ini
      https://www.wendycode.com/2021/04/pesan-komentar-dengan-tools-parse-blogger.html
  8. 26 Juli, 2022 08:56
    Bang cara ngatasi first image median ui 1.6 tidak simetris gimana. Biar rapih gitu
© 2020 - Wendy Code