Cara Memasang Menu Bar Dan Submenu Bar Di Halaman Blog

Oleh edodije

Friday, September 11, 2015

Bagikan :

Tweet

Ini dia nih gan, yang ane pertama kali ubah dari halaman blog ane, sama-sama belajar, ini sekalian saya share aja siapa tahu bermanfaat.. 



Pertama, apa sih yang dimaksud dengan Menu Bar dan Submenu Bar itu, ane susah kalo ngasih definisinya aja gan, mending langsung ke ilustrasinya aja ya, dijamin paham ko, kalo diperhatikan halaman blog saya di bawah judul blog terdapat kolom hitam yang terdapat gambar rumah dan tulisan-tulisan yang berwarna putih, nah itu yang dinamakan Menu Bar.

Menu Bar

Dan bila kita pindahkan cursor ke arah salah satu menu yang terdapat tanda panah kecil maka akan muncul menu-menu lain, itu yang dinamakan Submenu Bar sob.

Submenu Bar

Apa sih gunanya gan. Menu Bar dan Submenu Bar ini membuat tampilan blog kita jadi lebih sistematis, simple, teratur dan lebih ilmah gan. Dengan Menu dan Submenu Bar juga bisa untuk menampilkan semua judul artikel dalam kategori-kategori yang ada pada Menu atau Submenu Bar.

Gimana cara buatnya gan? Ayo kita belajar bareng, pantengin terus gan.    

Sekarang masuk ke  langkah pemasangannya nih gan.

Saran : Lakukan back up terhadap Template agan terlebih dahulu sehingga akan mudah dikembalikan ke kondisi seperti semula jika terjadi sesuatu yang tidak diinginkan terhadap template agan karena proses pengEditan ini. ( Menu Design, Template, Back up / Restore, Download Full Template, beri nama untuk Template yang akan disimpan, disarankan sertakan tanggal sewaktu pembackupan, Save )

1. Pergi ke menu Design gan, pilih menu Template lalu Edit HTML, agan akan menjumpai banyak tuh berbaris-baris sript code dari blog agan.

2. Cari script code berikut ini gan,

<div class='main-outer'>  atau 
<div id='main-wrapper'> atau 
<div id='main'>

Paling sering dijumpai sih yang paling atas gan, tapi untuk mempermudah silahkan agan pergunakan fitur Find dengan menekan tombol Ctrl +F pada keyboard tetangga agan, eh punya agan maksudnya.

3. Setelah ketemu, silahkan agan copy script code dibawah ini dan paste-kan tepat DI ATAS script code yang sudah ditemukan tadi.

<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>

Berikut penjelasanya gan,

1. Cara memasukkan alamat URL:
Ganti tanda # (warna biru) dengan link/url yang agan inginkan. Bisa jadi link posting atau label (kategori) yang ada pada blog agan.

2. Cara menuliskan judul menu atau judul postingan: 

Ganti Tulisan warna biru dengan nama menu dan nama sub menu yang agan inginkan.

Contoh : Untuk langkah nomor 1 dan 2 maka menjadi,

<li><a href='http://mynameisedodije.blogspot.com/search/label/blog'>Blog</a></li>

3. Cara merubah lebar menu: silakan  cari kode:

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;} ---> baris ke-3. 

Kemudian tambahkan kode 

(width:900px) 

di antara { dan }, sehingga menjadi :

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

Angka 900px hanya sebagai contoh saja, silakan rubah angka 900  dengan ukuran lebar yang agan inginkan, bisa juga mengganti kode 900px dengan kode 100%.

4. Untuk mengatur tinggi menu 

Silakan ganti angka 35 pada kode 35px di atas dengan tinggi yang agan mau. 

5. Untuk tambah atau kurangi jumlah menu

Silakan copy paste atau hapus script dengan blok warna orange (1 porsi menu), jumlah submenunya bisa ditambah sesuai selera, misalnya submenu ..c, d, e, f, dst.

6. Untuk mengganti warna, background dan huruf, perhatikan skrip di bawah ini.
[1]. <style>   
[2]. /* -- Menu Horizontal + Sub Menu-- */
[3]. #cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

[4]. #cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px ..........    

A. Mengganti warna background menu:

Silakan ganti warna pada baris ketiga yang ada warna merah, dengan warna yang agan suka.

B. Mengganti warna tulisan/huruf, 

Silakan ganti warna pada baris ke-4 yang saya berwarna hijau dengan warna yang agan sukai (ganti kodenya saja).

C. Mengganti model huruf (font), perhatikan skrip urutan ke-14; gantilah tulisan berwarna biru dengan jenis font kesukaan agan.

[14]. #secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-

cript

4. Setelah itu klik Pratinjau/Preview dulu untuk memastikan script sudah benar. Lalu Save gan.

5. Selamat mencoba, Happy Blogging gan.  

Tag : blog