Cara Membuat Menu bar pada Blogspot

Cara membuat Menu bar pada Blogspot - Apa itu Menu bar ? dan apa fungsi dari Menubar ? Menubar adalah sebuah kotak tab/bar yang isinya berupa navigasi link. Fungsi menubar yaitu untuk menyimpan link-link yang penting di suatu blog, agar pengunjung dapat lebih mudah mengunjungi halman utama yang ada pada suatu blog. pada postingan kali ini, saya akan menjelaskan Cara membuat Menu bar pada Blogspot dengan menggunakan Template Klasik yang tersedia oleh penyedia blogspot. Di bawah ini adalah gambar dari Menubar.

Menubar Juga dapat dibuat Sub menunya dibawahnya, lihat gambar di atas. Nah ... jika kalian ingin membuat menu dan sub menu seperti di atas. Sok atuh penjelasannya ada di bawah ini : 

1. Login pada Blogger.

2. Masuk ke " Template".

3. Klik Edit HTML.

4. Lalu cari scrift Code  <div class='main-outer'> ( pada setiap template berbeda - beda, kalau anda tidak menemukan scrift di samping coba dengan mencari <div id='main-wrapper'> atau <div id='main'>.

5. Setelah menemukan scrift Code di atas, masukan code berikut di atas scrift Code yang anda cari :

 <style>

#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:#ffa; }
#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='#'>Menu</a></li>
<li><a href='#'>Menu_2</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub menu_2_01</a></li>
<li><a href='#'>Sub menu_2_02</a></li>
</ul>
</li>
<li><a href='#'>Menu_3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu_3_01</a></li>
<li><a href='#'>Sub Menu_3_02</a></li></ul>
</li>
<li><a href='#'>Menu_4</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu_4_01</a></li>
<li><a href='#'>Sub Menu_4_02</a></li>
</ul>
</li>
<li><a href='#'>Menu_5</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu_5_01</a></li>
<li><a href='#'>Sub Menu_5_02</a></li>
</ul>
</li>
<li><a href='#'>Menu_6</a></li>
</ul>
</div></style>

 Penjelasan Code :

1. Pada teks yang ber warna biru, bisa anda ganti dengan nama yang anda inginkan ( Contoh : <li><a href='http://thenew-info.blogspot.com/2015/01/cara-membuat-menu-bar-pada-blogspot.html'>Menu_1</a></li>.
2. Pada teks yang ber warna merah, bisa anda ganti dengan Url / Alamat yang anda inginkan ( Contoh : <li><a href='#'>My Profile</a></li> .
3. Pada teks yang ber warna Hijau, anda bisa merubah lebar Menu, yaitu dengan menambahkan code (width:800px) dan akan berubah menjadi = "#cat-nav {background:#156994;width:800px;margin:015px;padding:0;height:35px;}"
4. Jika anda ingin merubah tinggi, anda bisa mengganti angka 35px pada code di atas.
5. untuk menambah Menu dan Sub menu, hanya dengan menambahkan Code :                                  <li><a href='#'>Edit Me</a>
   <ul id='sub-custom-nav'>
   <li><a href='#'>Edit Me_1_01</a></li>
   <li><a href='#'>Edit Me_1_02</a></li>
   </ul>
   </li>
6. Jika ingin menghapus Menu dan Submenu, tinggal menghapus code di atas.
7. untuk mengganti warna Background tinggal menngganti code = background:#156994, dengan merubah ( background:#156884, bisa juga mengganti dengan nama warna, Contoh : Black, Blue, Red, dan lain").
8. Jika anda ingin merubah model Huruf, warna Huruf, silahkan ganti teks yang berwarna Ungu.

6. Jika Sudah Selesai, Silahkan Simpan / Save.

7. Untuk memastikan Code di atas berhasil, anda bisa melihatnya dengan Mengklik " Lihat Blog "

Keterangan Warna :
1. Warna Merah :  URL / Alamat Artikel.
2. Warna Biru : Judul Menu bar.
3. Warna Hijau : warna background, lebar, dan tinggi Menu bar.
4. Warna Ungu : Kostumisasi Huruf, Seperti Model, warna, dan lain - lain.

Nb : Jika anda memiliki pertanyaan, Silahkan tulis di Kolom Komentar, atau tanyakan langsung lewat email saya, Semoga info ini bermanfaat untuk Agan - agan semua, Good Luck !!