Cara Membuat Menu Horizontal

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijQrcRkBr4pqbu52UkaZNRa80lZbD93kFbIfwuSniaCwUFJMA8iGg5_3NfqgR4pB5tJX-FqNhS08MoX_yobj-uFQR542rK26PRdZXU5y2dRjT1CNiRMs9h0vnQeHpR8A_0yhjUTeSYPFrZ/?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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijQrcRkBr4pqbu52UkaZNRa80lZbD93kFbIfwuSniaCwUFJMA8iGg5_3NfqgR4pB5tJX-FqNhS08MoX_yobj-uFQR542rK26PRdZXU5y2dRjT1CNiRMs9h0vnQeHpR8A_0yhjUTeSYPFrZ/?imgmax=800

Atau anda ingin backround warna saja, silahkan hapus :

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijQrcRkBr4pqbu52UkaZNRa80lZbD93kFbIfwuSniaCwUFJMA8iGg5_3NfqgR4pB5tJX-FqNhS08MoX_yobj-uFQR542rK26PRdZXU5y2dRjT1CNiRMs9h0vnQeHpR8A_0yhjUTeSYPFrZ/?imgmax=800)

Untuk mengubah warna yang ini background:#000

 

OK deh selamat mencoba membuat menu horizontal di blog anda
NB : Sesuaikan lebar menu dengan lebar header blog anda, untuk menyesuaikan misalkan kurang lebar atau sebalikanya silahkan ubah kode yang berwarna biru