join grup whatsapp Join

modifikasi footer template median-ui

cara modifikasi footer template median-ui seperti blog wendy code
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 :
Donasi untuk mendukung creator terus berkarya, mulai seribu rupiah saja

12 komentar

  1. pertamax wkwk
  2. 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. Sama2 mas, jangan sunkan untuk reguest lagi
  3. nunggu updatenya hihi
    1. 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. berarti bakal ada pergantian class-class baru dong yah
  4. 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. sudah ditambah ini? @media screen and (max-width:480px){.footbar{padding-bottom:30px}}
    2. 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. 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. mantap mas
  5. How to add auto slideshow to Median Ui slider in mobile device. Like Imagz blogger template.


image quote pre code
© Wendy Code Developed by Jago Desain

Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english