Cara Membuat Menu Horizontal Posted by : Unknown

Cara Membuat Menu Horizontal di blog, atau lebih tepatnya di blogspot. Blogger dengan kelebihannya yaitu bisa mengedit template atau bahkan mengubah keseluruhan template membuat para blogger jadi lebih semangat memodifikasi blog mereka. Kali ini saya akan share cara membuat menu horizontal di atas header atau judul blog. Contoh menu horizontal seperti dibawah ini.

Cara membuat Menu Horizontal

• Login ke blog anda > Design > Edit HTML ( tidak perlu centang Expand Widget templates )
• Cari Kode ]]></b:skin> ( Gunakan CTRL + F untuk mempermudah pencarian )
• Copy Css di dibawah ini dan paste tepat diatas kode ]]></b:skin>

#NavbarMenuAtas{ background:#000 url(http://lh4.ggpht.com/_pt7i0nbIOCY/Sm5QZkDvCUI/AAAAAAAACKE/8-OPdORCKI8/bgnav_thumb%5B1%5D.jpg?imgmax=800) repeat-x; width:960px; height:40px; color:$navcolor; margin:0 auto; font: bold 8px Arial, Tahoma, Verdana;}
#NavbarMenuAtasleft{ width:650px; float:left; }

• Langkah selanjutnya cari kode <div id='header'> atau <div id='header-wrapper'>
• Jika sudah ditemukan, Copy kode dibawah ini dan paste tepat di atas kode <div id='header'> atau <div id='header-wrapper'>

<div id='NavbarMenuAtas'>
       <div id='NavbarMenuAtasleft'>
      <ul id='nav'>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li>
          <a href='#'>Page #1</a>
          <ul>
            <li><a href='#'>Sub Page #1</a></li>
            <li><a href='#'>Sub Page #2</a></li>
            <li><a href='#'>Sub Page #3</a></li>
          </ul>
        </li>
        <li><a href='#'>Page #2</a></li>
      </ul>
    </div>
  </div>

• Linknya bisa anda ganti sendiri sesuai keinginan lalu preview, kalau sudah benar silahkan di save.

Cara Membuat Menu Horizontal

Cara Membuat Menu Horizontal sangat bermacam-macam, tergantung dari kreativitas anda. Yang paling penting adalah belajar HTML dan CSS. Jika sudah mahir HTML atau bahkan javascript pasti sangat mudah untuk membuat tampilan apa saja. Oh iya Anda juga bisa mengganti Background menunya dengan cara mengganti link gambar yang ini

http://lh4.ggpht.com/_pt7i0nbIOCY/Sm5QZkDvCUI/AAAAAAAACKE/8-OPdORCKI8/bgnav_thumb%5B1%5D.jpg?imgmax=800

Atau anda ingin backround warna saja, silahkan hapus :

url(http://lh4.ggpht.com/_pt7i0nbIOCY/Sm5QZkDvCUI/AAAAAAAACKE/8-OPdORCKI8/bgnav_thumb%5B1%5D.jpg?imgmax=800)

Untuk mengubah warna yang ini background:#000

OK deh selamat mencoba membuat menu horizontal di blog anda, saya doakan sukses. Jika anda bingung tanyakan saja pada kotak komentar.

NB : Sesuaikan lebar menu dengan lebar header blog anda, untuk menyesuaikan misalkan kurang lebar atau sebalikanya silahkan ubah kode yang berwarna biru