Skip to main content

Cara membuat menu horizontal drop down bercabang



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/AVvXsEh2bSrYSFe-Cjp8hmTuyMNAaJYZOp35wgXbJ0732vv4Xud32MQd2YcCu61wtd6Cdgd7F-SWQnTs6tHSZ-RBjzZR2LpN3kn8GL2iZ8XLDeASg6hBzW50ZZOPFYnYwZn2F4voS29sER-o4QsF/); 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='#'>EBOOK</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
 Gambar: 0.3

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

Labels:

Comments

Post a Comment

Popular posts from this blog

Cara mengganti warna jilbab dan baju menggunakan adobe photoshop cs5

    S ebenarnya tehnik mengganti warna jilbab,baju dan lainya pada foto dapat dilakukan dengan mudah menggunakan Adobe photoshop baik itu Adobe photoshop CS sampai yang terakhir Adobe photoshop CS5 . Tentunya dengan menguasai tehnik ini akan membuat kita lebih muda dalam  menentukan warna pakaian yang paling cocok untuk kita sebelum membelinya di toko. Dan yang paling menyenangkan dari tehnik ini warna yang dihasilkan  akan terasa lebih segar dan tentunya tidak kaku.Nah...bila sobat tertarik ingin tahu bagaimana caranya, silahkan ikuti tutorial berikut... 1.  Pertama kita buka foto yang akan kita ubah jilbabnya.sebelumnya kita buat duplikatnya dulu agar foto kita tetap aman bila terjadi kesalahan dalam mengedit.Setelah itu kita buat seleksi pada bagian jilbabnya.Dalm hal menyeleksi terserah anda ingin menggunakan tool apa saja ,bisa menggunakan Lasso tool , Poligonal lasso tool ataupun Quicck selection tool , terserah anda mana yang menurut anda paling anda kuasai.lakukakan
6 comments
Read more

Cara instal dan menjadikan adobe photoshop cs5 trial version menjadi full version

   Masih melanjutkan tentang tuturial cara instal  Adobe photoshop cs5 pada kesempatan kali ini aku akan melanjutkan kembali tutorial cara instal dan menjadikan software canggih Adobe photoshop cs5 yang trial version ini mnjadi full version selamanya. Mari ikuti tahap-tahapnya berikut ini:  Oea,  sebelumnya aku minta maaf karena pada tutorial kali ini aku menggunakan Adobe illustrator cs5 sebagai tutorialnya tapi santai saja sob karena cara instal untuk product Adobe cs5 family sama saja.yang berbeda cuma serialnya doank Silahkan simak caranya berikut ini: 1.  Pertama kita buka folder file Adobe photoshop kemudian klik Set-up untuk menginstalnya. setelah muncul tampilan seperti gambar berikut ini, pada pilihan bahasa kita pilih  English (international) kemudian klik Accept untuk melanjutkan.  2.  Akan muncul lagi gambar seperti dibawah ini..kita pilih Install this product as a trial. pada pilihan bahasa kita pilih lagi bahasa English international kemudian klik Next
14 comments
Read more