Menu blog atau biasa di sebut dengan menu bar adalah suatu tempat untuk menyimpan halaman suatu postingan...untuk lebih mudah memahami'nya kita gunakan saja contoh menu bar dan sub menu bar sebagai berikut.
menu bar adalah suatu hidangan yg ada di suatu meja kerja,sedangkan submenu bar adalah pilihan hidangan yg nanti bisa kalian ambil....nah sampai disini mungkin kalian sudah menemukan suatu bayangan apa itu menu bar dan apa itu submenu bar menurut imajinasi kalian saja mau di ibaratkan apa.
silahkan lihat contoh menu bar dan sub menu bar pada gambar di bawah ini.
dari gambar di atas itu contoh menu yang saya buat tepat'nya di bawah hader SETIA POOLS BLOGSPOT dan yg berada di bagihan bawah tulisan iklan blogspot itu contoh submenu.
untuk cara membuat'nya seperti berikut;
1.masuk ke akun blogger sobat
2.pilih setelan template edit HTML cari kode berikut <div class='main-outer'> atau <div id='main-wrapper'> atau bisa juga <div id='main'> untuk lebih mudah'nya kalian gunak ctrl f untuk mencarinya karena setiap template berbeda kodenya.
3.jika kode yg di cari sudah dapat silahkan kalian copy kode berikut
<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>
5.setelah kalian copy silahkan pastekan kode tersebut di atas kode yg kalian cari tadi.
keterangan;
ganti # dengan url postingan yg kalian inginkan
ganti Menu 1 sampai menu 5 dengan nama menu yg kalian kehendaki
ganti Submenu dengan nama submenu yg kalian kehendaki.
untuk menu dan submenu lebih baik kalian ganti dengan nama yg berkaitan dengan isi postingan,untuk memudahkan pengunjung mencari artikel di blog sobat.
sampai disini sudah selesai pembuatan menu pada blogspot sobat,jangan lupa klik simpan template dan pratinjau adakah kesalahan...jika sudah lihat blog dengan wajah baru...hehe
saya harap komen untuk kemajuan blog saya,trima kasih semoga bermanfaat..
