Selamat Datang Di Blog Bisnis Online Terpercaya www.maslukis.com


Kamis, 03 November 2016

Cara Paling Mudah Buat Menu Navigasi Dropdown Horizontal


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 kang Roni 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 kang Roni.

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://anda.blogspot.com/'>Home</a></li>
<li><a href='#'>Trik</a>
<ul>
<li><a href='http://anda.blogspot.com'>Komputer</a></li>
<li><a href='http://anda.blogspot.com'>Windows</a></li>
</ul></li>
<li><a href='#'>Tips</a>
<ul>
<li><a href='http://anda.blogspot.com'>Tips Blogspot</a></li>
<li><a href='http://anda.blogspot.com/'>Kesehatan</a></li>
</ul></li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='http://anda.blogspot.com'>Tutorial Blog</a></li>
</ul></li>
<li><a href='#'>widget</a>
<ul><li><a href='http://anda.blogspot.com/'>Widget (smiley) &#160;&#160;&#187;</a>
<ul><li><a href='http://anda.blogspot.com'>SMS Gratis</a></li>
<li><a href='http://anda.blogspot.com/'>Scrool Ajaib</a></li>
<li><a href='http://anda.blogspot.com/'>Status YM</a></li>
</ul></li>
<li><a href='http://www.blogmaslukis.blogspot.com/'>Kode kode Warna</a></li>
</ul></li>
<li><a href='#'>Berita</a>
<ul><li><a href='http://www.blogmaslukis.blogspot.com/'>Unik</a></li>
<li><a href='/'>Gila</a></li>
<li><a href='/'>Link</a></li>
</ul></li>
<li><a href='http://www.blogmaslukis.blogspot.com/'>Link Sahabat</a></li>
<li><a href='http://kontactr.com/user/Kang%20Roni'>[ 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.


Untuk mengubah warna latar belakang/background menu navigasi agar sesuai dengan templat anda perhatikan code pada langkah nomor 5 yang saya cetak dengan warna biru, ganti code yang berwarna biru tersebut dengan code warna yang anda sukai.


Baca Juga:

Comments
0 Comments

0 komentar:

Posting Komentar

 
Copyright © 2018. Info Hari Ini . All Rights Reserved
Jl. Delta Raya Utara Kav. 49 - 51 Deltasari Baru, Sidoarjo, Jawa Timur, Indonesia 61256
PT. Bimasakti Multi Sinergi