Membuat Menu bar dengan Sub menu pada Blogspot

Menubar adalah sarana navigasi pada situs web yang berisi daftar tautan/link. Menubar umumnya terletak mendatar pada header, baik dalam posisi menggantung (di bagian bawah) maupun persis di atas header. Blogger  tidal menyediakan menu bar kecuali anda membuat laman baru dan anda menambahkan gadget laman pada blog   anda. Hal ini disayangkan ketika anda menambahkan auto read-more agar tampilan lebih simpel. Tetapi ketika anda berhasil membuat  auto read-more, jangan senang dulu karena jika anda membuat laman baru maka postingan anda yang berada di laman baru ikut terpangkas dan fatalnya jika anda klik  auto read-morenya misal (selanjutnya, readmore, baca selengkapnya, dll) itu akan kembali ke postingan anda tetapi masih terpangkas ( readmore ). 

Tutorial sederhana membuat menu bar dan juga sub2-menunya :

1. login ke akun blog anda
2. Pilih Rancangan->Edit Html (jangan lupa centang expand widget template )
3. Cari script berikut ini :
   
   body {  font: $(body.font);  color: $(body.text.color);  background: $(body.background);}
   
   
4. Tempatkan script berikut dibawah script di atas
   
   /*=============  NAVBAR================ */
   #navbar-iframe{display:none;height:0;visibility:hidden;}
   
   #NavbarMenu{background:black; width:950px; height:40px; color:white; margin:0 auto; padding:0; font:bold 8px Arial,Tahoma,Verdana; text-decoration:none}
   
   #NavbarMenuleft{width:950px; float:$startSide; margin:0; padding:0; text-decoration:none}
   
   #nav{margin:0; padding-top:3px; padding-left:10px}
   
   #nav ul{float:$startSide; list-style:none; margin:0; padding:0; text-decoration:none}
   
   #nav li{list-style:none; margin:0; padding:0; text-decoration:none}
   
   #nav li a, #nav li a:link, #nav li a:visited{color:#ff9900; display:block; text-transform:uppercase; margin-left:0; padding:9px 15px 8px; font:bold 12px Arial,Times New Roman; text-decoration:none}
   
   #nav li a:hover, #nav li a:active{background:#ff9900; color:#fff; margin:0; padding:9px 15px 8px; text-decoration:none}
   
   #nav li li a, #nav li li a:link, #nav li li a:visited{background:#660000; width:220px; color:#ff9900; text-transform:uppercase; float:none; margin:0; padding:7px 10px;padding-right:7px border-bottom:1px solid #000; border-left:1px solid #000; border-right:1px solid #000; font:normal 14px Georgia,Times New Roman; text-decoration:none}
   
   #nav li li a:hover, #nav li li a:active{background:#ff9900; color:#fff; padding:7px 10px; text-decoration:none}
   
   #nav li{float:$startSide; padding:0; text-decoration:none}
   
   #nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:200px; margin:0; padding:0; text-decoration:none}
   
   #nav li ul a{width:140px; text-decoration:none}
   #nav li ul ul{margin:-32px 0 0 171px}
   #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em}#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto}#nav li:hover, #nav li.sfhover{position:static}
   
   
5. Setelah itu simpan template
6. Klik Elemen laman dan buatlah widget html/javascript
7. Tempatkan script berikut
   <div id='NavbarMenu'>
   <div id='NavbarMenuleft'><script type='text/javascript'>
   function setAttributeOnload(object, attribute, val) {
   if(window.addEventListener) {
   window.addEventListener(&quot;load&quot;,
   function(){ object[attribute] = val; }, false);
   } else {
   window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
   }
   }
   </script>
   
   <ul id='nav'>
   <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
   <li><a href='rss.xml'>Site Map</a></li>
   <li><a href='http://icalcell.blogspot.com/search/label/Tutorial%20Blog?max-results=999'>Tutorial Blog</a></li>
   <li>
   <a href='#'>EDIT MENU INI</a>
   <ul>
   <li>
   <a href='#'>EDIT SUB MENU INI&#160;&#160;&#160;&#160;&#187;</a>
   <ul>
   <li><a href='EDIT URL UNTU SUB SUB MENU ' target='_blank'>EDIT SUB SUB MENU INI/a>
   
   </li>
   
   </ul>
   <li><a href='http://icalcell.blogspot.com/2009/11/program-ptc.html'>Program PTC</a></li>
   </li>
   <li><a href='http://icaltogel.blogspot.com' target='_blank'>Togel Mania
   
   </a></li>
   
   </ul>
   </li>
   <li><a href='#'>Download</a></li>
   <li><a href='#'>Tukar Link</a></li>
   <li><a href='#'>Hubungi Saya</a></li>
   <li><a href='#'>Ke</a>
   <ul><li><a href='http://www.google.com' target='_blank'>Google</a></li>
   <li><a href='http://www.yahoo.com' target='_blank'>Yahoo</a></li>
   <li><a href='http://www.youtube.com' target='_blank'>Youtube</a></li>
   <li><a href='http://www.facebook.com' target='_blank'>Facebook</a></li>
   </ul>
   </li>
   </ul>
   </div>
   </div>

Simpan dan Lihat Hasilnya ........

Terima kasih atas kunjungan anda.
Post-kan komentar anda sebagai tanda anda telah berkunjung ke website ini.