Cara Menghapus Menu Navigasi pada Footer Blog Template Viomagz

Akhir-akhir ini saya sering membahas tentang template viomagz buatan mas sugeng. Kedepannya mungkin akan lebih banyak pembahasan tentang template ini. Anda juga bisa melakukan request tutorial terkait template viomagz.

Kali ini, saya akan memberikan tutorial tentang cara menghapus atau menghilangkan menu navigasi pada bagian footer blog dari template viomagz.

Karena kemarin saya buat menu navigasi baru yang lebih keren dari navigasi bawaan, tutorial ini masih saling terkait dengan postingan saya kemarin tentang navigasi keren ala igniplex.

Pada tutorial pembuatan navigasi kemarin, saya tidak menjelaskan lebih lengkap dan detail tentang bagaimana menghapus menu navigasi pada footer blog viomagz.

Pada tulisan saya kali ini, akan saya bahas lebih detail agar semua hal tentang navigasi bawaan template viomagz benar-benar terhapus bersih.

Langsung saja ke pembahasan.

Hapus Kode CSS Navigasi Footer Template

Ada banyak kode css untuk navigasi footer yang terdapat pada template ini. Anda harus menghapus semua kode tersebut tanpa terkecuali.

Silahkan masuk ke Dashboard Blog » Edit HTML. Di dalam mode Edit HTML ini, untuk mempercepat dalam menemukan kode yang Anda cari, tekan tombol CTRL + F pada keyboard lalu cari dan hapus code berikut ini.

/* FOOTER NAV MENU */
#footer-navmenu {
   background: $(navmenufooter.bg);
   padding: 25px 0px;
   font: $(navmenufooter.font);
   color: $(navmenufooter.color);
}
#footer-navmenu-container {
   max-width: 1000px;
   margin: 0 auto;
   text-align: center;
}
#footer-navmenu ul {
   list-style: none;
   margin: 0;
}
#footer-navmenu ul li {
   display: inline-block;
   margin: 6px 0;
}
#footer-navmenu ul li:after {
   content:"/";
}
#footer-navmenu ul li:last-child:after {
   content:"";
}
#footer-navmenu ul li a {
   color: $(navmenufooter.color);
   margin: 0 15px;
}
#footer-navmenu ul li a:hover {
   color: $(navmenufooter.hover.color);
   border-bottom: 2px solid $(navmenufooter.hover.color);
}

<Group description="Menu Navigasi di Footer" selector="#footer-navmenu">
   <Variable name="navmenufooter.font" description="Font" type="font" default="500 14px Roboto, Arial, sans-serif" value="500 14px Roboto, Arial, sans-serif"/>
   <Variable name="navmenufooter.bg" description="Background Color" type="color" default="#292929"  value="#292929"/>
   <Variable name="navmenufooter.color" description="Color" type="color" default="#ffffff"  value="#ffffff"/>
   <Variable name="navmenufooter.hover.color" description="Hover Color" type="color" default="#ffffff"  value="#ffffff"/>
</Group>

#footer-navmenu ul li a {
   margin: 0px 8px;
}

Masih dalam mode edit html, cari dan hapus lagi kode yang saya beri tanda highlight warna kuning di bawah ini. Ingat!! hanya yang saya beri tanda berwarna kuning saja.

.footer-widget, #footer-navmenu-container {
   max-width: 100%;
}
#header-wrapper, .footer-widget .widget, #footer-navmenu-container {
   padding-left: 30px;
   padding-right: 30px;
}

.footer-widget .widget, #footer-navmenu-container {
   padding-left: 20px;
   padding-right: 20px;
}

.footer-widget .widget, #footer-navmenu-container {
   padding-left: 15px;
   padding-right: 15px;
}

body#layout #cssmenu ul, body#layout #footer-navmenu ul {
   display: none;
}

Karena fitur dari template ini tergolong lengkap, navigasi footer pada bagian tata letak juga memiliki kode css yang perlu dihapus.

body#layout #footer-navmenu {
   position: relative;
   display: block;
   padding:0;
   font-size: 14px;
   color: #fff;
   background: #bbbbbb;
   border: 1px solid #8e8e8e;
   font-weight: bold;
   margin: 0 20px 8px;
   height: 50px;
}
body#layout #footer-navmenu::after {
   content: "Menu navigasi harus diedit melalui Edit HTML";
   color: #fff;
   position: absolute;
   top: 17px;
   left: 20px;
   visibility: visible;
}

Itu dia semua kumpulan kode css navigasi yang perlu Anda hapus. Sampai di sini saya anggap Anda sudah menghapus semua kode css di atas.

Hapus Kode HTML Navigasi Footer Template

Setelah kode css terhapus bersih, selanjutnya Anda juga harus menghapus kode html navigasi.

Masih dalam mode Edit HTML. Kembali gunakan CTRL + F pada keyboard untuk mencari kode HTML berikut ini lalu hapus.

<!-- footer nav menu -->
<div id='footer-navmenu'>
 <nav id='footer-navmenu-container'>
<!-- menu navigasi footer start -->
   <ul>
       <li><a href='#'>About</a></li>
       <li><a href='#'>Contact</a></li>
       <li><a href='#'>Privacy Policy</a></li>
       <li><a href='#'>Disclaimer</a></li>
   </ul>
<!-- menu navigasi footer end -->
 </nav>
</div>
<!-- footer nav menu end -->

Setelah kode html untuk menu navigasi footer dihapus, jangan lupa klik Simpan Tema dan silahkan lihat perubahan tema Anda.

Perlu di ingat, jika meghapus menu navigasi ini, itu berarti Anda tidak memiliki menu navigasi untuk menempatkan link menuju halaman disclaimer, privacy policy dan halaman lain.

Saya sarankan, sebaiknya gunakan menu navigasi baru yang lebih keren dibandingkan dengan navigasi default yang Anda hapus tadi. Anda bisa membacanya pada postingan saya sebelumnya tentang Cara Membuat Menu Navigasi Keren Ala Igniplex.

Sekian dari saya, jangan lupa share artikel ini jika dirasa bermanfaat, dan budayakan untuk berkomentar setelah membaca. Terimakasih.