Cara Paling Mudah Buat Menu Navigasi Dropdown Horizontal
Menu dropdown adalah menu yang apabila mouse kita arahkan kemenu tadi
akan keluar menu lagi kebawah,dan yang pasti akan menghemat ruangan
dalam blog kita,juga mengurangi load page pada halaman blog.Untuk
melihat Demonya lihat aja menu dropdown Mas Viki di atas,kerenkan !!!
Untuk membuatnya tidak sesulit yang anda bayangkan karena anda cukup mengikuti beberapa langkah dibawah dan blablabla.............blog anda sudah mempunyai menu seperti milik Mas Viki.
Langkah-langkahnya!
1.Masuk ke akun Blogger.com anda
2.Pilih Rancangan
3.Pilih Edit HTML
4.Klik Download Template Lengkap untuk keamanan
5.Copy code dibawah ini dan letakkan di atas code ]]></b:skin> yang ada di template anda
6.Selanjutnya silahkan hapus code menu navigasi anda yang berada di bawah <body> ( kalo nggak ada ya langsung aja ikuti langkah selanjutnya )
7.Selanjutnya ganti dengan code di bawah ini,atau yang tidak terdapat menu navigasi bawaan langsung masukin aja code di bawah ini
Ket: Ganti tulisan yang berwarna merah dengan link anda,dan yang biru dengan nama menu blog anda.
Semoga bermanfaat teman
Untuk membuatnya tidak sesulit yang anda bayangkan karena anda cukup mengikuti beberapa langkah dibawah dan blablabla.............blog anda sudah mempunyai menu seperti milik Mas Viki.
Langkah-langkahnya!
1.Masuk ke akun Blogger.com anda
2.Pilih Rancangan
3.Pilih Edit HTML
4.Klik Download Template Lengkap untuk keamanan
5.Copy code dibawah ini dan letakkan di atas code ]]></b:skin> yang ada di template anda
#NavbarMenu{background:#000000;
width:960px; 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;}
#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{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:#000000;
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;}
#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;}
6.Selanjutnya silahkan hapus code menu navigasi anda yang berada di bawah <body> ( kalo nggak ada ya langsung aja ikuti langkah selanjutnya )
7.Selanjutnya ganti dengan code di bawah ini,atau yang tidak terdapat menu navigasi bawaan langsung masukin aja code di bawah ini
<div id='outer'>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http://vikitctc.blogspot.com/'>Home</a></li>
<li><a href='#'>Trik</a>
<ul>
<li><a href='http://vikitctc.blogspot.com'>Komputer</a></li>
<li><a href='http://vikitctc.blogspot.com'>Windows</a></li>
</ul></li>
<li><a href='#'>Tips</a>
<ul>
<li><a href='http://vikitctc.blogspot.com/2011/04/macam-macam-text-area-dan-cara.html'>Tips Blogspot</a></li>
<li><a href='http://vikitctc.blogspot.com/search/label/Tutorial%20blog'>Kesehatan</a></li>
</ul></li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='http:/vikitctc.blogspot.com/search/label/Tutorial%20blog'>Tutorial Blog</a></li>
</ul></li>
<li><a href='#'>widget</a>
<ul><li><a href='http://vikitctc.blogspot.com/search/label/Tutorial%20blog'>Widget (smiley)   »</a>
<ul><li><a href='http://vikitctc.blogspot.com/search/label/Tutorial%20blog'>SMS Gratis</a></li>
<li><a href='http://vikitctc.blogspot.com/2011/04/macam-macam-text-area-dan-cara.html'>Scrool Ajaib</a></li>
<li><a href='http://vikitctc.blogspot.com/2011/04/macam-macam-text-area-dan-cara.html'>Status YM</a></li>
</ul></li>
<li><a href='http://vikitctc.blogspot.com/2011/04/macam-macam-text-area-dan-cara.html'>Kode kode Warna</a></li>
</ul></li>
<li><a href='#'>Berita</a>
<ul><li><a href='http://vikitctc.blogspot.com'>Unik</a></li>
<li><a href='/'>Gila</a></li>
<li><a href='/'>Link</a></li>
</ul></li>
<li><a href='http://vikitctc.blogspot.com'>Link Sahabat</a></li>
<li><a href='http://vikitctc,blogspot.com'>[ Kontak Admin ]</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>
Ket: Ganti tulisan yang berwarna merah dengan link anda,dan yang biru dengan nama menu blog anda.
Semoga bermanfaat teman
Semoga artikel Cara Paling Mudah Buat Menu Navigasi Dropdown Horizontal bermanfaat bagi Anda.
