Cara Membuat Menu Bar di Blogger

Menu bar merupakan salah satu kebutuhan yang sering dicari orang dalam mengelola blog. Menu ini digunakan untuk mengklasifikasikan posting-postingn penlulis sehingga memudahkan pembaca mencari postingan yang diinginkan.

Nah, untuk para pengguna blog yang masih pemula, disini aku bakalan ngasih tau kalian tentang cara
membuat menubar. Pas kalian masukkan keyword “menu bar” pasti banyak banget blog-blog yang bermunculan dalam menerangkan tentang ini. Dari blog-blog tersebut kadang ada yang gak cocok. Kemudian aku menemukan beberapa blog yang membahas tentang ini dengan cara yang berbeda.

Ada dua cara untuk membuat menu bar, yaitu:

• Skrip HTML

Berikut adalah langkah-langkahnya:

a.       buka blog Anda;

b.      klik Template yang sesuai dengan keinginan Anda lalu save;

c.       pilih Edit HTML;

d.      salin skrip template Anda, sehingga jika terjadi kesalahan dalam pemberian skrip di bawah ini akan dapat diatasi dan kembali seperti semula.

e.      cari tulisan <div class=’main-outer’>, lalu copy skip dibawah ini setelah tulisan tersebut.

Beberapa blog mengajurkan untuk menekan f5 atau ctrl+F untuk membantu pencarian.

<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 Menu2 a</a></li>

<li><a href='#'>Sub Menu2 b</a></li>

</ul>

</li>

<li><a href='#'>Menu3</a>

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

<li><a href='#'>Sub Menu3a</a></li>

<li><a href='#'>Sub Menu3b </a></li>

</ul>

</li>

<li><a href='#'>Menu4</a>

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

<li><a href='#'>Sub Menu4a</a></li>

<li><a href='#'>Sub Menu4b </a></li>

</ul>

</li>

<li><a href='#'>Menu5</a></li>

</ul>

</div>

Skrip yang bertanda pagar dapat digunakan untuk mengganti warna pada menubar, sedangkan <li><a href=”#”>Menu3</a></li> merupakan deretan menubar yang ditampilkan dalam blog. Sub Menu3a merupakan isi dari menubar yang tampilannya vertikal (jika disentuh).

Anda dapat mengganti nama-nama menu bar sesuai dengan isi blog/keinginan Anda. Selain itu, tanda # digunakan untuk mengisikan alamat laman/pos ketika menu/submenu tersebut di klik.

Cukup rumit bukan? OK, let’s see another tips. J

• Menggunakan Gadget "LAMAN"

Menu bar saat menggunakan ini juga bisa dibilang cukup mudah, jika dibandingkan dengan sebelumnya.  Langsung aja liat langkah-langkahnya yukk... J

a.       Buka blogger Anda

b.      klik Laman, lalu buat baru dengan menu yang diinginkan. (Misal : Kuliah, terserah mau diisi apa tidak. Kalo pas saya buat itu tanpa isi, hehe).

c.       Setelah laman dibuat, klik Tata Letak. Perhatikan gambar dibawah ini.

Pada nama kuliah awalnya adalah laman, jika sudah mendapatkan itu, klik Edit di pojok kanan bawah.

d.       Kemudian muncul tampilan di bawah ini.

Tampilan diatas merupakan tampilan untuk konfigurasi menu bar. Centang jika kamu ingin menjadikan laman tersebut menu. Proses centang dilakukan di bagian kiri dengan urutan yang ada disebelah kanan. Apabila masih kurang suka dengan urutan daftar, kamu dapat merubahnya dengan menggeser ke atas dan kebawah sesuai keinginan kamu.

f.        Hasilnya akan seperti ini.

Nah, itu adalah beberapa cara untuk membuat menu bar pada Blogger. Silahkan kamu coba yaa :)