Bagaimana Cara Membuat Dan Menambahkan Menu Di Bagian Footer Template Median Ui 1.6?

Cara Modifikasi Footer Template Median Ui 1.6

Median UI, Fighaz Mc - Cara memodifikasi footer di template median ui 1.6 sangatlah mudah. Kita hanya perlu menambahkan serta mengganti beberapa css, Html dan Javascript didalam template bawaan median Ui 1.6.

Footer bawaan template Median Ui 1.6 menurut saya pribadi sangatlah baik dan simple. Namun bagi sebagain blogger hal ini dianggap kurang. Entahlah, karena pandangan dan pemahaman dari setiap orang itu berbeda.

Kebanyakan blogger pemula mungkin tidak familiar dengan istilah footer. Padahal, footer adalah bagian penting dalam sebuah template blog. Footer biasanya berisi informasi kontak, tautan ke halaman lain, dan lain-lain.

Nah untuk teman-teman yang ingin merumah atau memodifikasi footer bawaan template median Ui 1.6 simak Langakah-langakah nya sampai selesai yah.

Apa Itu Footer?

Footer adalah sebuah bagian dari sebuah website atau blog yang biasanya berisi informasi tentang website tersebut, seperti alamat, nomor telepon, dan email. Bagi sebagian orang, footer juga bisa berisi link ke halaman lain di website atau blog.

Apa Itu Footer Di Dalam Template Blog Atau Website

Pada umumnya, footer berada di bagian bawah halaman website atau blog. Footer biasanya mencakup beberapa informasi seperti alamat kontak, link ke halaman lain, jam operasional, dan sebagainya. Pada beberapa template, footer juga dapat berisi widget tertentu seperti peta lokasi atau formulir kontak.

Apa Fungsi Dari Footer Di Dalam Template Blog Atau Website?

Footer di dalam sebuah template blog atau website biasanya berisi informasi tentang si pemilik blog atau website, seperti nama, alamat email, dan juga link ke social media. Selain itu, footer juga sering diisi dengan menu navigasi yang memudahkan pengunjung untuk menelusuri seluruh konten yang ada di dalam blog atau website tersebut. Biasanya footer juga berisi copyright info dan link ke privasi policy.

Apa Saja Menu Di Dalam Footer?

Footer adalah area di bagian bawah template blog yang biasanya berisi link-link penting, seperti halaman kontak, tentang saya, dan daftar isi. Selain itu, footer juga sering digunakan untuk menampilkan iklan atau tautan afiliasi.

Bagaimana Cara Membuat Footer?

Footer adalah bagian dari blog template yang biasanya berisi informasi tambahan seperti kontak, alamat, dan lain sebagainya. Biasanya, footer juga digunakan untuk menampilkan link ke halaman-halaman tertentu seperti "Tentang Kami" atau "Kebijakan Privasi".

Untuk membuat footer sendiri, Anda perlu membuat file HTML dan CSSnya terlebih dahulu. Jika Anda ingin menggunakan gambar atau video dalam footer, Anda juga perlu menyiapkan file-file tersebut. Setelah semua file siap, barulah Anda bisa masuk ke blogger.com dan mulai mengedit template blog Anda.

Cara Membuat Footer Kostum Atau Modifikasi Template Median Ui 1.6

Setelah kalian membaca penjelasan tentang apa itu footer, sekarang kita akan memodifikasi footer bawaan dari template median ui 1.6. Perlu di Dingat, Wajib "Cadangkan Tema" yang sekarang kalian gunakan. Ini agar ketika kalian salah dalam meletakkan Script atau ingin kembali ke tampilan awal atau bawaan kalian bisa menggunakan template yang sudah kalian cadangkan. Jika Sudah "Cadangkan" tema, mari kita ke tahap selanjutnya.

Masuk Ke Dasbor blogger.com
Pilih "Tema"
Lalu Pilih "🔻" disamping "SESUAIKAN"
Lalu pilih "Cadangkan" (Bagai yang belum melakukan pencadangan tema)
Setelah "Cadangkan" tema, Kalian pilih "Edit HTML"
Lalu Cari "/* Footer */" Seperti dibawah ini dan HAPUS

/* Footer */ footer{font-size:97%;line-height:1.8em; padding:30px 0; border-top:var(--fotL) solid var(--contentL); color:var(--fotT); background:var(--fotB)} .cdtIn{display:flex;align-items:baseline;justify-content:space-between; position:relative;width:calc(100% + 20px);left:-10px;right:-10px} .cdtIn >*{margin:0 10px} .cdtIn .HTML{overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .footCdt{display:inline-flex} .footCdt .creator{opacity:0} .tTop svg{width:20px;height:20px;stroke:var(--fotT)} .toTop{display:flex;align-items:center; white-space:nowrap} .toTop::before{content:attr(data-text); opacity:.7;margin:0 5px} .toTopF{display:flex;align-items:center;justify-content:center;width:45px;height:45px;border-radius:50%;background:var(--linkB);position:fixed;bottom:20px;right:20px} .toTopF svg{stroke:#fffdfc;stroke-width:2}

Lalu ganti dengan CSS dibawah ini di tempat yang sama

/* Footer */
.cdtIn .HTML{overflow:hidden;text-overflow:ellipsis;width:91%} 
.footCdt{display:inline-flex;flex-direction:column;width:100%}
.footerContent{display:flex;margin-bottom:10px}
.footerCol-1{width:40%;margin-right:10px}
.footerCol-1 p {opacity:.8;font-size:12px}
.footerCol-1 .createBy{opacity:.8}
.footerCol-1 .footerName{font-size:23px;font-weight:700} 
.footerCol-1 .footerName span{font-size:15px;font-weight:400;opacity:0.8}
.footerCol-1 .dmcaSample{font-size:9px;color:rgba(254,254,254,.6);border-radius:3px;overflow:hidden;line-height: 30px} 
.footerCol-1 .dmcaSample:before{content:'DMCA';padding:6px 10px;background-color:#2a2a2a;border-radius:4px 0 0 4px} 
.footerCol-1 .dmcaSample:after{content:'Protected';color:#202442;padding:6px 10px;background-color:var(--linkC);border-radius:0 4px 4px 0} 
.footerCol-1 .dmcaSample:hover{opacity:0.8}
.footerCol-2{width:60%;display:flex}
.footerCol-2 > *{width: 33.333%}
.footerCol-2 ul{list-style:none;padding:0}
.footerCol-2 li{margin-bottom:10px;border-radius:3px}
.footerCol-2 li a{color:inherit}
.footerCol-2 li a:hover{color:var(--linkC)}

.drK .footerCol-1 .dmcaSample:after{background:var(--darkU)}
.drK .footerCol-2 li a{color:inherit}
.drK .footerCol-2 li a:hover{color:var(--darkU)}

@media screen and (max-width:640px){
  .footerContent{flex-direction: column}
  .footerCol-1{width:100%; margin-bottom:10px; margin-right:0}
  .footerCol-2{width:100%}
  .cdtIn{flex-direction:column;align-items:flex-end;}
}

Lalu kalian cari "<div class='footCdt'>" Seperti dibawah ini dan HAPUS. Ingat Yah Hapus Script seperti yang saya contohkan Dibawah Ini. Mulai Dari "<div class='footCdt'>" Sampai "</div>" terakir atau tepat diatas "</b:includable>", sesuai dengan Script Yang Ada Dibawah Ini.

<div class='footCdt'>
                        <span class='credit'>
                          <b:if cond='data:content == &quot;&quot;'>
                            &#169; <span id='getYear'><script>/*<![CDATA[*/ var d = new Date(); var n = d.getFullYear(); document.getElementById('getYear').innerHTML = n; /*]]>*/</script></span> &#8231; <bdi><a expr:href='data:blog.homepageUrl.canonical'><data:blog.title/></a></bdi>. All rights reserved.
                            <b:else/>
                            <data:content/>
                          </b:if>
                        </span>
                        <span class='creator'>Developed by <a href='https://theme.jagodesain.com'>Jago Desain</a></span>
                      </div>

Setelah Kalian HAPUS Script diatas, Kalian Ganti Dengan Script Dibawah Ini.

<div class='footerContent'>
  <div class='footerCol-1'>
    <div class='createBy'><i class='far fa-edit'/> Create By</div>
    <h3 class='footerName'>
      Yourname
      <span> .domain</span>
    </h3>
    <p>
      All posts are protected by <b>DMCA</b>.<br/>
      Reproduction in any form is strictly prohibited!
    </p>
    <a class='dmca-badge' href='#' target='_blank' title='DMCA.com Protection Status'>
    <span class='dmcaSample'/></a>  
    <script src='https://images.dmca.com/Badges/DMCABadgeHelper.min.js'/>
  </div>
  <div class='footerCol-2'>
    <div class='colSm-1'>
      <h3 class='title'>Menu</h3>
      <ul>
        <li><a href='#' target='blank'><i class='fal fa-angle-double-right'/> Sub Menu 1</a></li>
        <li><a href='#' target='blank'><i class='fal fa-angle-double-right'/> Sum Menu 2</a></li>
        <li><a href='#' target='blank'><i class='fal fa-angle-double-right'/> Sub Menu 3</a></li>
      </ul>
    </div>
    <div class='colSm-2'>
      <h3 class='title'>Menu</h3>
      <ul>
        <li><a href='#' target='blank'><i class='fal fa-angle-double-right'/> Sub Menu 1</a></li>
        <li><a href='#' target='blank'><i class='fal fa-angle-double-right'/> Sub Menu 2</a></li>
        <li><a href='#' target='blank'><i class='fal fa-angle-double-right'/> Sub Menu 3</a></li>
      </ul>
    </div>
    <div class='colSm-3'>
      <h3 class='title'>Menu</h3>
      <ul>
        <li><a href='#' target='blank'><i class='fal fa-angle-double-right'/> Sub Menu 1</a></li>
        <li><a href='#' target='blank'><i class='fal fa-angle-double-right'/> Sub Menu 2</a></li>
        <li><a href='#' target='blank'><i class='fal fa-angle-double-right'/> Sub Menu 3</a></li>
      </ul>
    </div>
  </div>
</div>

Penting!

Ganti semua tanda "#" dengan link atau URL yang ingin kalian arahkan.
Ganti "Yourname" dengan nama blog kalian
Ganti ".domain" dengan domain kalian
Ganti "Menu" dan "Sub Menu 1-3" dengan Nama Yang ingin kalian gunakan.
Untuk DMCA, Kalian harus memuatnya terlebih dahulu, atau setelah pasang script diatas, silahakan kakian buat dmca, lalu ambil linknya dan pasang didalam "#" untuk link DMCA.

Lalu kalian cari tag "</body>" dan salin script dibawah ini dan pastekan atau tempelkan tepat diatas "</body>".

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e,t,s){"use strict";var a=window.document.createElement("link"),t=t||window.document.getElementsByTagName("script")[0];a.rel="stylesheet",a.href=e,a.media="only x",t.parentNode.insertBefore(a,t),setTimeout(function(){a.media=s||"all"})}loadCSS("https://pro.fontawesome.com/releases/v5.10.0/css/all.css"),loadCSS("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css");
//]]>
</script>

Setelah semua script terpasang, kalian pilih "💾" atau "Save" untuk menyimpan perubahan Dan silahkan Lihat Hasilnya.

Kesimpulan

Footer adalah sebuah bagian dari template blog yang berada di bagian paling bawah. Biasanya, footer digunakan untuk menampilkan informasi tambahan seperti alamat kontak, link ke situs lain, atau social media.

Sekian untuk Bagaimana Cara Membuat Dan Menambahkan Menu Di Bagian Footer Template Median Ui 1.6?. Semoga Bisa bermanfaat.

Untuk Demonya? Saya tidak menampilkan Demo Atau hasil untuk sementara Ini, dikarenakan blog ini masih baru dan saya tidak ingin memasang link aktif yang mengarah ke luar dari blog ini.

Terima kasih banyak sudah mampir.

Selamat mencoba!

Fighaz Mc Halo! Saya adalah pemilik blog fighazmc.com, sebuah ruang pribadi saya untuk berbagi tips, informasi, dan pengetahuan seputar dunia internet dan teknologi. Mari jelajahi dunia digital bersama!