Membuat Menu dan Sub Menu Horizontal



Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Pada kesempatan ini, kita akan mengulas trik blogger tentang membuat menu horizontal secara sederhana. Mengapa dikatakan sederhana? Karena jika kita optimasi lebih mendalam, ternyata terdapat beberapa varian dari menu horizontal tersebut. Fungsi dari trik blogger ini adalah sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog kamu.

Sub menu sendiri berfungsi untuk mempertegas salah satu menu tersebut. misalnya dalam satu menu berjudul sport, maka sub menunya bisa berisi dari macam-macam olahraga semisal sepakbola,motogp,tinju,tennis dan masih banyak lagi.



Singkat kata, berikut langkah membuat menu horizontal dalam blog kamu :
  • Login ke account blogger kamu.
  • Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget". (Sebelum lakukan pengeditan, sebaiknya lakukan backup templates terlebih dahulu. (Baca : Cara Backup Templates)
  • Cari Kode kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.
Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.
/* navbar
================== */

#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding:
3px 5px 0px 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
Catatan :
  1. Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna hijau dan merah.
  2. Khusus untuk kode yang berwarna hijau, sangat penting disesuaikan dengan lebar blog kamu.
  3. Untuk kode pewarnaan, sobat bisa mengaturnya sendiri. (Baca : Kode Warna HTML)
  • Kemudian cari kembali kode seperti di bawah ini.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>

... dan seterusnya ...

</b:section>
</div>
  • Copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu).
<div id='NavbarMenu'>
       <div id='NavbarMenuleft'>
      <ul id='nav'>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li>
          <a href='#'>Sample Page</a>
          <ul>
            <li>
              <a href='#'>Sub Page #1</a>
              <ul>
                <li><a href='#'>Sub Sub Page #1</a></li>
                <li><a href='#'>Sub Sub Page #2</a></li>
                <li><a href='#'>Sub Sub Page #3</a></li>
              </ul>
            </li>
            <li><a href='#'>Sub Page #2</a></li>
            <li><a href='#'>Sub Page #3</a></li>
            <li><a href='#'>Sub Page #4</a></li>
            <li><a href='#'>Sub Page #5</a></li>
          </ul>
        </li>
        <li><a href='#'>Sample Post</a></li>
        <li><a href='#'>Blog Page</a></li>
      </ul>
    </div>
    <div id='NavbarMenuright'>
<form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>

</div>

  </div>
Keterangan :
- Sobat tinggal mengganti text ‘# dengan ‘Alamat link yang anda ingin pasang’.
- Sobat ganti text berwarna hijau dengan judul dari link anda tersebut. 
- Kode berikut ini adalah sub menu / turunan dari menu tsb.
<li><a href='#'>Sub Sub Page #1</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
contoh:
<li><a href=’http://daw-xp.blogspot.com>DAW-XP</a></li>

  • Jangan lupa disimpan

Notes

Permasalahannya terjadi pada dropdown yang blink ketika di dekati mouse. Kode CSS yang perlu diperbaiki adalah sebagai berikut
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
position:absolute;
}
Kemudian agar teks dalam menu utama dapat menyesuaikan dengan ukuran karakter yang Anda masukkan, maka perlu pula memperbaiki kode CSS seperti yang tampak di bawah ini.
#nav li {
float: left;
margin: 0px;
padding: 0px;
position:relatif;
}
Kode CSS yang berwarna merah merupakan penambahan dari kode CSS navigasi menu horizontal sebelumnya. Saya mohon maaf atas ketidak nyamanan ini.

Semoga berguna buat sobat semua. Ada hasrat yang terpendam? Kebingungan? Silahkan keluarkan hasrat dan pertanyaan kamu di kotak komentar di bawah. Jangan sungkan ya ..

Ingin Berlangganan Artikel Terbaru ke email kamu? Masukan Email kamu disini:

Tidak tahu cara berlangganan? Klik disini

Related Post:

Anda sedang membaca artikel tentang Membuat Menu dan Sub Menu Horizontal dan anda bisa menemukan artikel Membuat Menu dan Sub Menu Horizontal ini dengan url http://daw-xp.blogspot.com/2011/04/membuat-menu-dan-sub-menu-horizontal.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Membuat Menu dan Sub Menu Horizontal ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Membuat Menu dan Sub Menu Horizontal sumbernya.


9 comments

Setiawan_Brothers May 8, 2011 at 7:14 PM

saya bingung, maklum masih awam
tlong pencerahan nya

Reply delete
Deny Arya Wiranata May 8, 2011 at 8:49 PM

@Setiawan_Brothers : Dimananya yang bingung mas? Silahkan ditanyakan, saya siap membantu semampu saya yang bisa.

Reply delete
zaid June 12, 2011 at 11:46 AM

tankz atas infonya http://ajib-zaid.blogspot.com/
di follow ya maz
kita biza saling berbagi ok

Reply delete
gang tutorial August 7, 2011 at 3:46 AM

kalo membuat sub menunya tampil horizontal gimana mas bro?...
kalo gak keberatan...tolong confir ke blog ane

Reply delete
nDoro Bei September 17, 2011 at 2:31 AM

mas,.. kenapa menu dropdown nya bisa ngumpet di belakang postingan ya,..???

Reply delete
Ilham January 16, 2012 at 12:51 PM

gan, pnya q koq malah gk horizontal ya???

Reply delete
B-Musik September 4, 2012 at 11:52 PM

boleh liat demonya gak gan

Reply delete
hermawan ardiansyah June 8, 2013 at 9:31 AM

pren, untuk mengatasi ini kok belum bisa yak

#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
position:absolute;
}

Reply delete
hezty tatawarna December 24, 2013 at 10:04 AM

huhu , bingung , barusan dapet tutorial tapi scriptnya agak beda .. :(

Reply delete

Post a Comment

Silahkan Anda kritik dan sarannya pada kolom komentar di bawah ini. Karena setiap satu kata Anda berkomentar sangat berarti untuk kemajuan blog ini (baca: Cara Berkomentar yang Baik).

 

Site Info

  • Fortuner SUV Terbaik
  • Commonwealth Life Perusahaan Asuransi Jiwa Terbaik Indonesia
  • Cincin Kawin
  • PageRank

    Followers

    back to topReturn to top of page Copyright © 2012 | Blog SEO DAW - XP | Tutorial Blogspot | Belajar SEO Blogspot - Privacy Policy Template by Hack Tutors