Tab Menu Navigasi Horizontal And Dropdown vertical

Ada banyak sekali tab menu di dunia blogger, mungkin supaya saya tidak terlalu ketinggalan zaman, saya mau share tentang tab menu navigasi.. Coba dibaca dulu, sapa tahu tertarik dicoba-coba...
Kita Mulai dari langkah pertama: Login ke blogger.com >> Klik template >> Edit HTML >> centang "Expand Widget Templates" Selanjutnya copy kode dibawah ini sebelum kode </head>. (GUnakan F3 Atau Ctrl + F Supaya gampang Mencari </head>)

<ul id="topnav"> <style type='text/css'> ul#topnav { margin: 0; padding: 0; float: left; width: 100%; list-style: none; position: relative; font-size: 1.2em; background: #383838; } ul#topnav li { float: left; margin: 0; padding: 0; border-right: 1px solid #fff; } ul#topnav li a { padding: 10px 15px; display: block; color: #f0f0f0; text-decoration: none; } ul#topnav li:hover { background: #1376c9 url() repeat-x; } ul#topnav li span { float: left; padding: 15px 0; position: absolute; left: 0; top:35px; display: none; width: 100%; background: #048914; color: #fff; -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; } ul#topnav li:hover span { display: block; } ul#topnav li span a { display: inline; } ul#topnav li span a:hover {text-decoration: underline;} </style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $("ul#topnav li").hover(function() { //Hover over event on list item $(this).css({ 'background' : '#1376c9 url() repeat-x'}); //Add background color + image on hovered list item $(this).find("span").show(); //Show the subnav } , function() { //on hover out... $(this).css({ 'background' : 'none'}); //Ditch the background $(this).find("span").hide(); //Hide the subnav }); }); </script>

Untuk Warna background Terserah Anda suka warna apa tinggal ganti saja, kalau kesulitan dengan code warna bisa dilihat postingan saya sebelumnya yang berjudul Code warna untuk blog design disini >>

Preview dulu untuk meyakinkan bahwa Scrip yang dipasang tadi pada posisi yang benar...kalau sudah benar Simpan Template.
Sekarang mari kita beralih ke area Tata Letak (Layout) >> Add Gadget >> HTML/JavaScript Kemudian Copy/ paste code script di bawah ini di Area gadget yang bernama HTML/Javascript.

<ul id="topnav"> <li><a href="#">Home</a></li> <li> <a href="#">blogger</a> <span> <a href="#"></a> | <a href="#">Tip And Tricks</a> | <a href="#">Ilmu dasar</a> </span> </li> <li> <a href="#">Tutorial</a> <span> <a href="#">apa saja</a> | <a href="#">nama apa</a> | <a href="#">CSS Tutor</a> <a href="#">jQuery Tutor</a> <a href="#">Moo Tools</a> </span> </li> <li> <a href="#">Free Templates</a> <span> <a href="#">template gratis</a> | <a href="#">web template</a> | <a href="#">joomla</a> | <a href="#">wordpress</a> | <a href="#">Premiumweb</a> </span> </li> <li><a href="#">Subscribe</a></li> <li><a href="http://www.cobadibaca.com/">Sponsored by</a></li> </ul>

  

Ganti yang bertanda # (pagar) dengan Url Blog, contohnya http://blablabla.........
Kemudian Isikan nama menu nya sesuai dengan isi dari url tersebut..Lalu klik Simpan...
Dan langkah terakhir tinggal sruput kopinya takut keburu dingin...
DEMO >>