cara cepat dan mudah bikin menu bar dan sub menu di blog

salam kenal buat sobat semua, saya juga newbii dan seneng rasanya bisa berbagi artikel ini. buat yang baru belajar ngeblog (kaya saya inii..) pasti senengnya utek-utek template bikin design lucu-lucu yang keren, tapi jangan lupa buat posting yang keren dan manfaat juga ya. pasti masih seneng-senengnya bikin menu bar dan sub menu. nah kalo masih bingung saya punya sedkit tutorial yang udah saya coba dan ini hasil ubek-ubek di google. untuk buat menu bar dan sub menu bar ini nich caranya:

1. log in ke akun blog kamu
2. setelah masuk ke dashbor blogger (itu loh bagian awal yang pertama tampil setelah log in) pilih template. nah biar gak bingung perhatikan gambar yang saya lingkari merah. nah sobat klik aja disitu
   
3. kalo udah akan tampil kayak gini, sobat pilih edit html ya
   
4. loadingnya mungkin agak lama. trus sobat cari deh syntag ini <div class = 'main outer'> kalo sobat kesulitan bisa pake bantuan mesin pencari sobat tekan aja tomol F3 atau Ctrl + F tinggal ketikkan syntag yang dicari tadi. ini tampilan nya
   
   
   
   
   
   
5. tempatkan kursor di atas syntag yang tadi udah dicari lalu copy dan paste kode di bawah ini
6. <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>
7. untuk yang bertanda '#' sobat ganti dengan alamat url yang nanti jadi label/ kategori dan juga url yang nantinya jadi link. 
8. contoh url untuk label  menu bar seperti ini 'http://shebarubelajar.blogspot.com/search/label/coretanku' nah kalo untuk sub menu dibagian akhir sobat tambah .html kayak gini 'http://shebarubelajar.blogspot.com/search/label/coretanku.html' 
9. nah tulisan warna biru tinggal sobat ganti dengan menu bar dan sub menu misal home, coretanku, sesuaikan dengan menu bar dan sub menu bar yang sobat inginkan. bisa sobat lihat pada gambar hasil edit html untuk blog saya ini
   
10. terakhir save dech. beres tapi kalo ada komen kesalahan brati kodenya ada yang salah coba sobat teliti lagi jangan keburu bingung.

kalo bingung, atau ada yang kurang silakan komentar ya...
makasiih
^_^