MEMBUAT MENU BAR DAN SUB MENU BAR DI BLOGGER MENGGUNAKAN HTML

Haloo Blogger, jumpa lagi ya... sekarang ane bawa berita dari Tips and Trik gimana cara Membuat Menu Bar yang ok punya, mungkin waktu pertama kali kita buat blog smua tampilan belum lengkap dan kosong, nah sekarang coba kita terapkan cara membuat menu bar tersebut, dan tentunya para Blogger sudah tau kan fungsinya buat apa? tentunya agar mempermudah para pembaca melihat-lihat isi blog kita, ok deh kita langsung aja.

Langkah Pemasangan

- Klik  Desain 

- Pilih  Template lalu pilih  Edit HTML 

Cari scrift berikut :

<div class='main-outer'>  atau

Setelah dapat, copas scrift berikut tepat diatas scrift yang dicari tadi :

seperti gambar berikut ini:

<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='http://#/'>Beranda</a></li>
 <li><a href='#'>menu1</a>
<ul id='sub-custom-nav'>
<li><a href='#'>submenu1.1</a></li>
<li><a href='#'>submenu1.2</a></li>
</ul>
</li>
<li><a href='#'>menu2</a>
<ul id='sub-custom-nav'>
<li><a href='#'>submenu2.1</a></li>
<li><a href='#'>submenu2.2</a></li>
</ul>
</li>
<li><a href='#'>menu3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>submenu3.1</a></li>
<li><a href='#'>submenu3.2</a></li>
</ul>
</li>
<li><a href='#'>menu4</a>
<ul id='sub-custom-nav'>
<li><a href='#'>submenu4.1</a></li>
<li><a href='#'>submenu4.2</a></li>
</ul>
</li>
 <li><a href='#'>menu5</a>
<ul id='sub-custom-nav'>
<li><a href='#'>submenu5.1</a></li>
<li><a href='#'>submenu5.2</a></li>
</ul>
</li>
<li><a href='#'>menu6</a></li>
</ul>
</div>

KETERANGAN

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

- Ganti Tulisan MENU dan SUBMENU dengan menu dan sub menu yang anda inginkan.

- Anda bisa menambahkan Menu dan Submenu, dengan mengcopy script yang diblok warna biru, ingat jangan salah penempatan kode.

- Setelah itu klik Pratinjau dulu untuk memastikan scrift sudah benar . 

- Lalu simpanlah/save. 

Demikian Tutorial sederhana ini, apabila melalui cara yang saya bagikan ini belum berhasil, coba sahabat blogger ulangi lagi dengan sabar. jika berkali-kali memang tidak bisa, sahabat bisa berkonsultasi  melalui komentar di bagian bawah ini. see you...