Cara Membuat Horizontal Dropdown menu ala blazerracing

Masih menggunakan Template yang tidak mempunyai menu horizontal ? Atau ingin mengubah Menu horizontal sobat ? Semua pertanyaan itu akan saya bahas pada postingan kali ini, yaitu Cara Membuat Horizontal Dropdown menu ala blazerracing.

Apa itu Menu horizontal ? Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header.
Sebelumnya, saya mendapat ilmu ini dari sobat saya, yaitu blazerracing , terimakasih kepadanya ^_^

 Sangat Ellegant bukan ? 

Keuntungan Menu Horizontal :

1. Menjadi wadah dari beberapa link

2. Pengunjung akan lebih mudah menjelajahi blog anda, karena semua link terpampang disana.

3. Blog akan terlihat indah dan Profesional dengan adanya Menu Horizontal.

Jadi, apa salahnya kita mencoba Tutorial dibawah ini  (•̃-̮•̃)

Langkah Penting !!

Bagi yang sudah mempunyai Menu Horizontal lama, dan ingin mengubahnya ke Style ini, silahkan ikuti langkah-langkah ini terlebih dahulu. Bagi yang belum mempunyai menu horizontal, Lewati saja langkah ini.

1. Login ke Blogger >> Rancangan >> Edit HTML >> centang  Expand Widget Templates.

2. Cari kode <div id="menu">
atau cari kode yang mirip, biasanya terletak dibawah kode </head>

3. Lalu, hapus rangkaian kodetersebut, sampai bagian akhir
( Lihat Screen Shoot dibawah )

Klik untuk memperbesar.

4. Setelah dihapus, klik Pratinjau. Jika Horizontal menu lama sobat tidak ada, berarti sudah berhasil dan Simpan Template.

Cara Membuat Horizontal Dropdown menu ala blazerracing :


1. Login ke Blogger >> Rancangan >>Add a gadget  >> HTML / Javascript
2. Letakkan kode berikut di kotak kosong tersebut :

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Scriptnya panjang sob</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
<style type="text/css">#black{background:-webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); width:930px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;-moz-box-shadow: 1px 1px 10px #888;-webkit-box-shadow:1px 1px 10px #888;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-left:1px solid #333}#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}#search{width:240px; font-size:11px; float:right; margin:0; padding:0;}#nav{margin:0; padding:0;}#nav ul{float:left; list-style:none; margin:0; padding:0;}#nav li{border-left:1px solid #ff0000;list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}#nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}#nav li li a, #nav li li a:link, #nav li li a:visited{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHW3RbocRRGQBVXeq0uKrmNcZIZIl87jopaU173ZAl4QN6sOlkKD3BlTvRzJu0Ts8UYiXAYtHt7gV7xokHMIoNTCfkMGFv5w0wM8beFqtiwTM73zOi3wmfvVRGwLPp-mWgIT9eg0aVG7kI/); width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;-moz-box-shadow: 1px 1px 10px #888;-webkit-box-shadow:1px 1px 10px #888;-webkit-border-radius: 6px;}#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 10px;}#nav li{float:left; padding:0;}#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}#nav li ul a{width:140px;}#nav li ul ul{margin:-24px 0 0 170px;}#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;}#searchbox{padding:0; margin:0;}#search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;}#search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;}#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;}#top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;}#top a:hover{color:#cc0000; text-decoration: underline;}#top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;}.topleft {width: 304px; float: left; margin: 0; padding:0;}.topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;}.topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}</style><div id='outer'>
<div id='black'>
<div id='navbarmenuleft'>
<ul id='nav'>
<li><a href='URL blog sobat''>Home</a></li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='#'>Tutorial Blogspot</a></li>
<li><a href='#'>Tutorial Point Blank</a></li>
</ul></li>
<li><a href='#'>Tips</a>
<ul>
<li><a href='http://acernoval.blogspot.com/'>Tips Blogspot</a></li>
<li><a href='#'>Tips Kesehatan</a></li>
<li><a href='#'>Tips Handphone</a></li></ul></li>
<li><a href='#'>Download Icon</a>
<ul>
<li><a href='#'>Social Network Icon</a></li>
</ul></li>
<li><a href='#'>Tool</a>
<ul>
<li><a href='#'>PR Checker</a></li>
<li><a href='#'>Kode Warna</a></li>
</ul></li>
<li><a href='#'>News</a></li>
</ul></div><div id='search'><form action='/search/' id='searchform' method='get' style='display:inline;'><input id='searchbox' maxlength='200' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='search...'/><input class='btn' type='submit' value='go'/></form></div></div></div>


</div></div></div></div>

Catatan :

1.  Ganti semua menu dengan nama menu yang sobat inginkan.
2.  Ganti tanda  #  dengan link tujuan sobat.

4. Selesai, dan Simpan Template ^_^

Semoga bermanfaat dan good luck..! :D