×

search by faronesia.com

Faronesia
Profesional and Specialist ReDesign Template blogger

Cara Menghapus Menu Navigasi Footer Pada Template Viomagz

Faronesia.com - Tentu anda semua sudah tahu perihal template viomagz, apalagi semakin lama viomagz lebih keren perkembangannya. Template besutan Mas Sugeng ini memang cukup menarik serta memikat di berbagai kalangan blogger karena selain harga yang cukup terjangkau, template Viomagz juga sangat mudah di customisasi alias modifikasi oleh penggunanya sebab susunan kode yang rapi dan strategis membuat para modifikator cenderung lebih leluasa menuangkan dan menerapkan seni-seni desain mereka ke template viomagz.

Setiap penilaian orang selalu berbeda, seperti yang saya sendiri rasakan contohnya. Saya tidak menyukai bagian navigasi menu footer yang menurut saya tampilannya kurang sedap dipandang dan terkesan tidak cocok berada di area footer/bawah dan ingin memodifikasi serta memindahkan ke bagian lain. Jika anda memiliki perasaan yang sama seperti saya maka anda sangat tepat sekali berkunjung dihalaman ini, sebab saya akan memberikan solusi atau cara menghapus menu navigasi footer pada template Viomagz.

Sebenarnya jika ingin menghapus menunya saja sangatlah mudah dan cepat, namun pada tutorial ini MENGHAPUS dalam artian menghilangkan semua komponen menu navigasi tersebut secara total agar tidak meninggalkan sisa kode menu nav footer yang tidak terpakai pada template.

Baiklah agar tutorial ini berjalan dengan lancar ada baiknya anda membackup template blog anda sebelum di modifikasi. Hal ini berguna untuk jaga-jaga jika anda salah dalam menghapus kode yang menyebabkan error pada template Viomagz yang anda miliki.

Cara Menghapus Menu Navigasi Footer  Pada Template Viomagz

1. Menghapus CSS menu navigasi footer
Langkah pertama kita mulai dari kode CSS terlebih dahulu karena CSS menu navigasi footer yang banyak dan tersebar dimana-mana.

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; }
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;
}
Masih dalam mode edit html, cari dan hapus lagi kode yang saya beri tanda highlight warna merah di bawah ini. Ingat!! hanya yang saya beri tanda berwarna merah 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; }
body#layout #cssmenu ul, body#layout #footer-navmenu ul { display: none; }
2. Menghapus HTML menu navigasi footer
Langkah kedua adalah menghapus html menu navigasi footernya yaitu temukan kode dibawah 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 -->
3. Template siap digunakan
Terakhir simpan template, dengan begitu menu navigasi bagian footer pada template Viomagz sudah terhapus secara permanen.

Demikianlah mengenai Cara Menghapus Menu Navigasi Footer Pada Template Viomagz semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.
Buka komentar
Tutup komentar

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Notifikasi pengguna

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesa caranya cukup dengan menekan tombol dibawah ini.

Tutup
×

Faronesia

Kami senantiasa membantu memecahkan masalah seputar desain blog melalui request tutorial

Request tutorial