Testing Aja Bro

AGE
...BETAWIE PUNYE KOLEKSI...

HOME
ANDROID
ANIME
LAINNYA
CARA MEMBUAT MENU NAVIGASI PADA BLOG

Menu navigasi adalah sebuah tab menu yang berisikan link untuk menunjukan arah sesuai dengan nama menu yang tercantum. Menu navigasi bertujuan untuk mempermudah para pengunjung blog dalam mencari sebuah artikel yang diinginkan. Selain itu menu navigasi juga berfungsi untuk mempercantik tampilan blog itu sendiri.
Ok to the point pada tutorial..

TUTORIAL MEMBUAT MENU NAVIGASI



1. Pertama silahkan login ke Blogger
2. Masuk ke bagian Template > Edit HTML
3. Cari kode ]]></b:skin> (tekan Ctrl+F untuk menampilkan pencarian), kemudian copy kode dibawah ini dan salin tepat diatas kode ]]></b:skin>

/*-----Responsive Down Menu ----*/
body {
margin: 0px;
}
#menu{background: #484848;color: #F2F2F2;height: 35px;border-bottom: 2px solid #DDD;}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:40px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 1em Arial;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;line-height: 35px;padding: 0 14px;text-decoration: none;color: #FFF;}

#menu li a:hover{color: #E4E4E4;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;background: #5FC6EB;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{height: auto;overflow: hidden;width: 170px;background: #50B7DC;position: absolute;z-index: 99;display: none;}
#menu ul.menus li{display: block;width: 100%;font:normal 1em Arial;text-transform: none;text-shadow: none;border-bottom: 1px dotted #31AFDB;}
#menu ul.menus a{color: #FFF;line-height: 35px;}
#menu li:hover ul.menus{display:block}

#menu ul.menus a:hover{background: #5FC6EB;color: #FFF;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;}

@media screen and (max-width: 800px){
#menu{position:relative}
#menu ul{background:#111;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; font:normal 1em Arial;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}

4. Masih pada Edit HTML, cari kode </header> kemudian copy kode dibawah ini dan salin tepat dibawah kode </header>

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Navigasi&#160;Menu</span></label>
<ul>
  <li><a href='/'>HOME</a></li>
 
  <li><a href='#'>KATEGORI 1<font size='1'>&#9660;</font></a>
    <ul class='menus'>
      <li><a href='#'>SUB KATEGORI</a></li>
      <li><a href='#'>SUB KATEGORI</a></li>
    </ul></li>
  <li><a href='#'>KATEGORI 2<font size='1'>&#9660;</font></a>
    <ul class='menus'>
      <li><a href='#'>SUB KATEGORI</a></li>
      <li><a href='#'>SUB KATEGORI</a></li>
      <li><a href='#'>SUB KATEGORI</a></li>
    </ul></li>

  <li><a href='#'>KATEGORI 3<font size='1'>&#9660;</font></a>
    <ul class='menus'>
      <li><a href='#'>SUB KATEGORI</a></li>
      <li><a href='#'>SUB KATEGORI</a></li>
    </ul></li>
  <li><a href='#'>KATEGORI 4<font size='1'>&#9660;</font></a>
    <ul class='menus'>
      <li><a href='#'>SUB KATEGORI</a></li>
      <li><a href='#'>SUB KATEGORI</a></li>
    </ul></li>
</ul>
</nav>

5. Kemudian klik simpan, dan lihat pada blog anda seharusnya sudah ada tampilan menu navigasinya, untuk selanjutnya anda hanya perlu mengganti nama KATEGORI dan SUB KATEGORI sesuai yang anda inginkan, jangan lupa ganti tanda pagar (#) yang berwarna merah dengan link yang dituju.

Demikian tutorial singkat tentang pembuatan menu navigasi pada Blogger, selamat mencoba.
Kirimkan Ini lewat Email
BlogThis!
Berbagi ke Twitter
Berbagi ke Facebook
Bagikan ke Pinterest

Beranda
...