Cara Memasang Menu Bar Pada Blog

Cara Memasang Menu Bar Pada Blog

Menu bar adalah sebuah menu yang dipasang pada blog untuk mempermudah pengunjung dalam mencari suatu artikel dan juga mempercantik tampilan dari blog itu sendiri, jadi tidak ada salahnya kita menambahkan menu bar pada blog kita.

Menu bar memiliki bermacam – macam variasi, kita dapan merubah design menubar sesuka hati. Pada kesempatan kali ini saya mencoba untuk menjelaskan cara memasang menu bar pada sebuah blog, silahkan ikuti langkah berikut ini.

  • Login ke blog anda
  • Klik Design
  • Pilih  Template lalu pilih  Edit HTML 
  • Pilih/klik  Lanjutkan
  • Pilih/klik  Expand Template Widget
  • Kemudian cari kode <div class=’main-outer’> atau <div id=’main-wrapper’> bisa juga <div id=’main’> terserah mana yang ada
  • Setelah itu letakan kode dibawah ini tepat diatasnya

<style>

/* — Menu Horizontal + Sub Menu– */

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}

#cat-nav a:hover { color:#fff; }

#cat-nav li:hover { background:#000; }

#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}

#cat-nav .nav-description { display:block; }

#cat-nav a:hover span { color:#fff; }

#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }

#secnav a { font-family:Georgia, “Times New Roman”, Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}

#secnav li { float:left; width: auto; height:35px;}

#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}

#secnav li ul li  { height:30px; border-top:1px solid #fff; }

#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }

#secnav li ul ul  { margin: -30px 0 0 180px; }

#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }

#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }

#secnav li:hover,#secnav li.hover  { position:static; }

#cat-nav #secnav {width:100%;margin:0 auto;}

</style>

<div id=’cat-nav’>

<ul class=’fl’ id=’secnav’>

<li><a href=’#‘>Beranda</a></li>

<li><a href=’#‘>Menu 1</a></li>

<li><a href=’#‘>Menu 2</a>

<ul id=’sub-custom-nav’>

<li><a href=’#‘>Sub Menu 1</a></li>

<li><a href=’#‘>Sub Menu 2</a></li></ul></li>

<li><a href=’#‘>Menu 3</a>

<ul id=’sub-custom-nav’>

<li><a href=’#‘>Sub Menu 1</a></li>

<li><a href=’#‘>Sub Menu 2</a></li></ul></li>

<li><a href=’#‘>Menu 4</a>

<ul id=’sub-custom-nav’>

<li><a href=’#‘>Sub Menu 1</a></li>

<li><a href=’#‘>Sub Menu 2</a></li></ul></li>

<li><a href=’#‘>Menu 5</a></li></ul>

</div>

Keterangan :

1. Ganti tanda # (warna merah) dengan link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.

2. Ganti tulisan warna biru dengan nama menu dan nama sub menu dengan yang anda inginkan.

  • Selanjutnya Simpan template dan lihatlah hasilnya.