Cara Membuat Menu Bar di Blog

Buat kalian yang masih pada bingung membuat menu bar, ane punya sedikit solusi dalam mengatasi masalah tersebut yaitu melalui tutorial berikut. Tolong disimak ya..

1.      Klik Menu Tata Letak

       2. Klik edit HTML

Disini lah kesulitannya mencari letak menu bar seharusnya diletakkan ada yang di page list 1 dan ada juga yang diatas b: skin. Hal ini menyesuaikan template yang ada bila template tersebut sudah ada kotak lebar yang sama seperti dibawah ini maka kerja kita lebih mudah

 

dengan cara : klik tambahkan gadget, maka akan keluar window baru, lalu pilih HTML/JavaScript. lalu isikan dalam kolom konten kode berikut ini

<style type="text/css">

/*CSS MENU*/

#menu{background:#343434;color:#eee;height:35px;border-bottom:4px solid #eeeded}

#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}

#menu ul{height:35px}

#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}

#menu li:first-child{border-left: none}

#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}

#menu li:hover > a,#menu li a:hover{background:#111}

#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;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:12px;position:absolute;left:35px}

#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}

#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}

#menu li:hover ul.menus{display:block}

#menu a.home {background: #c00;}

#menu a.sub{padding:0 27px 0 14px}

#menu a.sub::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}

#menu ul.menus a:hover{background:#333;}

</style>

<!-- Mulai Area Menu -->

<nav id="menu">

<input type="checkbox" />

<label>≡Navigation</label>

<ul>

<li><a class="home" href="/">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Daftar Isi</a></li>

<li><a href="#">Menu</a></li>

<li><a href="#">Menu 2</a></li>

<li><a href="#">Menu 3</a></li>

<li><a href="#">Login Admin</a></li>

<!-- Mulai Area Menu Dropdown -->

<li><a class="sub" href="#">Menus</a>  <ul class="menus">

<li><a href="#" title="Menus">Menus 1</a></li>

<li><a href="#">Page</a></li>

<li><a href="#">Menus2</a></li>

<li><a href="#">Menus 3</a></li>

<li><a href="#">Menus 4</a></li>

<li><a href="#">Menus 5</a></li>

</ul>

</li>

<!-- Area Dropdown Selesai-->  </ul>

</nav>

<!-- Area Menu Selesai-->

lalu klik simpan

Catatan :

Bila tidak ada kolom lebar tambahkan gadget di template tersebut (ada template-template tertentu yang menyediakan kolom tersebut) maka anda bisa meletakkan kode pada bagian diatas pagelist 1 (klik di lompat ke widget) atau diatas tulisan b:skin.