» » Merubah Menu Navigasi Template Brosense

Merubah Menu Navigasi Template Brosense

Meskipun secara tampilan dan keunggulan template brosense sudah tidak diragukan lagi tetap saja sebagai blogger adakalanya kita ingin mengedit tampilan template, baik dari ukuran lebar template hingga merubah menu navigasi template blog yang kita gunakan agar tampilan blog atau web sesuai dengan keinginan.

Di postingan sebelumnya kita sudah membahas tentang bagaimana cara memindahkan menu search / menu pencarian ke atas menu navigasi blog pada template brosense ini.

Khususnya pada artikel ini kita akan mengulas tentang bagaimana cara merubah menu navigasi template brosense menjadi menu dropdown melalui cara yang cukup mudah untuk dilakukan. Contoh tampilannya seperti pada hasil berikut.


Menu navigasi template brosense sebenarnya sudah sangat responsive dan keren abis namun jika sobat blogger ingin merubah menu navigasi template brosense menjadi navigasi dropdown, kebetulan tutorial sederhana ini bisa membantu sobat untuk menerapkannya.

Untuk lebih detailnya sekarang kita langsung saja pada langkah-langkah merubah menu navigasi template brosense :
  • Pada dashboard blogger sobat, pilih Template dan silahkan sobat back up templatenya terlebih dahulu agar lebih aman.
  • Setelah memback up template sobat, kembali pada pada dashboar blogger kemudian pilih template, pilih edit Html dan pasang semua CSS berikut di atas kode </b:skin>
/* MENU NAVIGASI */
#menu {background:#117ac9;color:#fff;width:100%;max-width:764px;height:30px;margin:0 auto;border-top:1px solid #bbb;border-bottom:1px solid #bbb;}
#menu ul,#menu li{margin:0;padding:0;list-style:none}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 16px Arial;text-transform:uppercase}
#menu li:first-child{border-left:none}
#menu a{display:block;line-height:35px;padding:0 8px;text-decoration:none;color:#fff}
#menu li:hover > a,#menu li a:hover{background:#117ac9;color:#fff}
#menu input{display:none;margin:0;padding:0;width:45px;height:45px;opacity:0;cursor:pointer}
#menu label{font:bold 35px Arial;display:none;width:40px;height:35px;line-height:35px;text-align:center;color:#fff}
#menu label span{font-size:20px;position:absolute;left:10px;width:100px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;border:0}
#menu ul.menus li{display:block;width:100%;font:15px Arial;text-transform:none}
#menu li:hover ul.menus{display:block}
#menu a.home{background:#117ac9}
#menu a.prett{padding:0 27px 0 14px}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#333 transparent transparent;position:absolute;top:18px;right:9px}
#menu ul.menus a:hover{background:#117ac9;color:#fff}

@media screen and (max-width:800px) {
#menu {position:relative;width:100%;margin:0 auto;margin-bottom:5px}
#menu ul{background:#117ac9;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{content:x;color:#fff}
#menu input:checked ~ ul{display:block}}
  • Jika sudah memasang kode di atas, cari dan hapus kode <nav id='nav'> sampai dengan kode <div class='clear'> yang berada di bawah <!-- desktop navigation menu start --> 
  • Ganti semua kode yang sudah dihapus tadi dengan HTML Berikut.
<nav id='menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<input type='checkbox'/>
<label>&#8801;</label>
<ul>
  <li><a href='/'><i class='fa fa-home'/> Home</a></li>
<li><a class='prett' href='#' title='MENU 1'>MENU 1</a>
<ul class='menus'>
    <li><a href='#' title='SUB MENU 1'>SUB MENU 1</a></li>
    <li><a href='#' title='SUB MENU 2'>SUB MENU 2</a></li>
    <li><a href='#' title='SUB MENU 3'>SUB MENU 3</a></li>
</ul>
</li>
  <li><a href='#' title='MENU 2'>MENU 2</a></li>
 <li><a href='#' title='MENU 3'>MENU 3</a></li>
 <li><a href='#' title='MENU 4'>MENU 4</a></li>
</ul>
</nav>

  <div class='clear'/>

  • Bagian terakhir cari kode CSS media Query berikut di template brosense milik sobat kemudian hapus semua kodenya.

@media only screen and (max-width:640px){
.tinynav {
display: inline-block;

#menu {display:none;
}}


Apabila langkah di atas sudah dilakukan silahkan pilih simpan dan lihat hasilnya.

Demikian cara mengganti menu navigasi brosense semoga bermanfaat. Good luck, Salam blogger.

0 Komentar di "Merubah Menu Navigasi Template Brosense"

Posting Komentar

Langganan: Posting Komentar (Atom)