Selamat Datang sob di solusifunny
Kali ini shifu akan berbagi Cara Membuat Navigasi Menu Drop Down
Ngomong-ngomong apaan sih arti dari :
Navigasi ? navigasi kalo menurut shifu adalah suatu alat untuk mempermudah visitor (pengunjung) untuk mengakses isi dari blog kita berdasarkan link yang sobat pasang, bisa berdasarkan label, hasil search, atau pun jenis link-link lainnya..
Menu Drop Down ? kalo menurut shifu sih menu navigasinya itu bisa turun kebawah dan menyamping saan mouse menunjuk ke menu tersebut
Masih bingung yak ??
jangan sampe kyk ini ya
OK deh sobat pasti udah gk sabaran untuk lihat caranya seperti apaan sih ??
Langsung di kejar aja
Berikut Tutorialnya :
1. Login ke blogger dulu sob..
2. Masuk ke Dasbor > Rancangan > Edit HTML > dan Jangan lupa centang untuk Expand Template Widget
3. Cari kode ]]></b:skin> bisa dengan cara cepat yaitu CTRL+F atau tekan F3 pada keyboard
4. Kemudian copy kode di bawah ini
#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;}
5. Kemudian sobat pastekan tepat di atas dari ]]></b:skin>
6. Lalu Di save
7. Pilih Element Halaman pada menu Rancangan
8. Kemudian tambah gadget dimana yang akan sobat pasangin navigasi menu nya
9. Pilih HTML / Java Script
10 .Copy semua kode dibawah ini
11. Kemudian di save yaa sob<div id='outer'>
<div id='navbarmenu'>
<div id='navbarmenuleft'>
<ul id='nav'>
<li><a href="#">Home</a></li>
<li><a href='#'>Menu 1</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
<li><a href="#">Sub Menu 5</a></li>
<li><a href="#">Sub Menu 6</a></li>
</ul></li>
<li><a href='#'>Menu 2</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
</ul></li>
<li><a href='#'>Menu 3</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
</ul></li>
<li><a href='#'>Menu 4</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
</ul></li>
<li><a href='#'>Menu 5</a>
<ul>
<li><a href="#">Sub Menu 5</a></li>
</ul></li>
<li><a href="#">Menu 6</a></li>
<li><a href="#">Menu 7</a></li>
</ul>
</div></div></div>
12. Lihat di blog sobat apa yang terjadi ??
OK dah sob..sekian dulu tutorial tentang Cara Membuat Navigasi Menu Drop Down
Jika ada Bad report Jangan sungkan untuk meninggalkan komentar, hal ini untuk kepentingan bersama..
Semoga Bermanfaat
Anda sedang membaca tentang Cara Membuat Navigasi Menu Drop Down dan anda bisa menemukan artikel Cara Membuat Navigasi Menu Drop Down ini dengan url https://solusifunny.blogspot.com/2012/01/cara-membuat-navigasi-menu-drop-down.html, Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Navigasi Menu Drop Down ini sangat bermanfaat bagi Anda atau siapapun yang Anda kehendaki, namun jangan lupa untuk meletakkan link postingan Cara Membuat Navigasi Menu Drop Down sebagai sumbernya.
0 Comments