Cara membuat menu horizontal drop down bercabang

Masih melanjutkan tentang tutorial blogspot, kali ini aku akan membagikan sedikit ilmu yang aku punya yaitu cara membuat menu navigasi horizontal drop down bercabang. Mengapa kita perlu memasang menu horizontal drop down, karena secara default template bawaan blog setahu saya gak ada menu dropdownya. kita mesti membuat dan memasangnya sendiri. Dengan adanya menu drop down horizontal otomatis blog kita terasa lebih rapi. Sebenarnya ada banyak cara membuat menu navigasi horizontal dropdown di blog, seperti menambahkan kode css melalui edit HTML template dan ada juga yang memasangnya dengan cara menambahkan Widget kemudian memasukan kode tertentu kedalamnya. dari kedua cara tersebut aku dak tahu juga apa kelebihan dan kekuranganya masing-masing. Dan pada kesempatan ini aku akan memberikan cara yang kedua aja karena menurut aku cara yang kedua lebih mudah karena tidak memerlukan edit HTML Template segala yang otomatis ribet bagi kita-kita yang gak paham, tar salah edit malah jadi kacau..

Oke langsung saja kita coba praktekan..

1. Masuk ke akun BLOG masing-masing

2. Pilih RANCANGAN atau DESAIN

3. Pilih TATA LETAK lalu pilih Tambah WIDGET
Oea,,dalam memilih widget ini tidak  mesti yang berada di header sob,terserah sobat mau nambah dibagian mana, khan nantinya bisa di atur ulang posisinya.  tul gak.....???

 Gambar 0.1

4. Pilih HTML/JavaSrcipt

Gambar 0.2

5. Setelah sobat pilih tambah HTML/JavaScript akan muncul tampilan seperti  pada (Gambar 0.3)
 Langsung saja sobat pastekan kode dalam kolom berikut ini kedalamnya.

<style type="text/css">     #black{background:-webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); width:630px; 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/AVvXsEhysztPIDTO383AJrkxuXwz5YaeikWrDvPg6NTp2eQymxoNofiKCyX9vaWjHWL5VQoYzXyxZZB49Wthn54Zj3Ld8vWZnoU2I81BWZfrB8yS80v8JkvKju3tBCq4pH2-ds5_4vepQhuh8PAN/); 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='http://iwanindosawit.blogspot.com/'>Home</a></li>     <li><a href='#'>FACEBOOK</a>     <ul>     <li><a href='#'>Nama</a></li>     <li><a href='#'>Nama</a></li>     </ul><li/>         <li><a href='#'>Software</a>     <ul>     <li><a href='#'>Belum tau</a></li>     <li><a href='#'>Belum tau</a></li>     </ul></li>         <li><a href='#'>Game</a>     <ul>     <li><a href='#'>Game 1</a></li>     <li><a href='#'>Game 2</a></li>     </ul></li>     <li><a href='#'>DOWNLOAD</a>     <ul>         <li><a href=''>Anu 1</a><ul>     <li><a href='#'>Anu A</a></li>     <li><a href='#'>Anu B</a></li>     </ul>     <li><a href='#'>Anu 2</a>     <ul>     <li><a href='#'>Contoh 1</a>     <ul>     <li><a href='#'>A</a></li>     <li><a href='#'>B</a></li>     <li><a href='#'>C</a></li>        <li><a href='#'>D</a></li>         <li><a href='#'>E</a></li>     </ul></li>     <li><a href='#'>Contoh 2</a>     <ul>     <li><a href='#'>A</a></li>     <li><a href='#'>B</a></li>     </ul></li>     <li><a href='#'>Contoh 3</a>     <ul>     <li><a href='#'>A</a></li>     <li><a href='#'>B</a></li>     <li><a href='#'>C</a></li>     <li><a href='#'>D</a></li>     <li><a href='#'>E</a></li>         <li><a href='#'>F</a></li>     <li><a href='#'>G</a></li>      </ul></li>       <li><a href='#'>Contoh 4</a>     <ul>     <li><a href='#'>A</a></li>     <li><a href='#'>B</a></li>     </ul></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>

Keterangan:

•   Warna biru itu adalah angka buat ngatur tinggi dan lebarnya menu, silahkan sobat cocokan  sama template sobat masing-masing

•   Warna kuning itu buat ngatur lebar kolom pencarianya sob,,bila kurang cocok silahkan di atur

•   Dan tanda pagar ( # ) itu tempat meletakan Link, isi sama link artikel sobat dan beri namanya sesuai    dengan link yang dimaksud
• CONTOH : <li><a href='#'>FACEBOOK</a> jadi <li><a href='alamat facebook anda'>FACEBOOK</a>

 Gambar: 0.3

  Selamat mencoba, mudah-mudahan berhasil....... 

Share this post

Related Posts