Kamis, 09 Februari 2012

Cara Membuat Menu Horizontal Drop Down Dengan Kotak Pencarian


By on 21.25

Cara Membuat Menu Horizontal Drop Down Dengak Kotak Pencarian - Halo Sobat Blogger kali ini saya akan berbagi Tips Tutorial Blog yaitu Cara Membuat Menu Horizontal Drop Down Dengan Kotak Pencarian, cara membuatnya sangat mudah tidak ribet, dan yang lebih bagus nya di tambah Kotak Pencarian dan Warna yang indah. Kaya Di Blog saya.


Baik jika Sobat ingin tahu Cara Membuatnya langsung aja.
  1. Login Ke Blog kamu.
  2. Pilih Rancangan.
  3. Pilih ADD GADGET.
  4. Pilih HTML JAVA Script.
  5. Lalu Copy Kode di bawah ini.
<style type="text/css">
#black{background:-webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); width:930px; 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(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.jpg); 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://blazerracing.blogspot.com/'>Home</a></li>

<li><a href='#'>Tutorial</a>

<ul>

<li><a href='http://blazerracing.blogspot.com/2011/12/tutorial-blog.html'>Tutorial Blogspot</a></li>

<li><a href='http://blazerracing.blogspot.com/search/label/point%20blank?&max-results=5'>Tutorial Point Blank</a></li>

</ul></li>

<li><a href='#'>Tips</a>

<ul>

<li><a href='http://blazerracing.blogspot.com/2011/12/tips-blog.html'>Tips Blogspot</a></li>

<li><a href='http://blazerracing.blogspot.com/search/label/tips%20kesehatan?&max-results=5'>Tips Kesehatan</a></li>

<li><a href='http://blazerracing.blogspot.com/search/label/tips%20hp?&max-results=5'>Tips Handphone</a></li>
</ul></li>

<li><a href='#'>Download Icon</a>

<ul>

<li><a href='http://blazerracing.blogspot.com/2012/02/download-social-network-icon.html'>Social Network Icon</a></li>

</ul></li>

<li><a href='#'>Tool</a>

<ul>

<li><a href='http://blazerracing.blogspot.com/2012/01/page-rank-checker.html'>PR Checker</a></li>

<li><a href='http://blazerracing.blogspot.com/2012/01/kode-warna.html#id'>Kode Warna</a></li>

</ul></li>

<li><a href='http://blazerracing.blogspot.com/search/label/berita?&max-results=5'>News</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>
NB : Harap ganti kode yang Berwarna merah dengan URL tujuan, dan kode yang berwarna Biru dengan Judul.

Cara nya mudahkan, gimana silahkan Coba oleh Sobat, dan jika Sobat menemukan masalah atau kesulitan haraf tinggalkan pesan di Kotak Komentar.

SELAMAT MENCOBA

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

58 komentar:

  1. wih panjang ya kak , scriptnya tapi bagus kak , artiklenya ijin nyimak ya kak

    BalasHapus
  2. wah mantab nih gan ..
    dari tadi muter2 nyari tutorialnya, baru paham disini,
    maklum newbiie ,.
    hhe
    thx gan

    BalasHapus
  3. @All Thanxs Yah udah berkunjung

    BalasHapus
  4. thanks utk pelajarannya, tapi kenapa bentuknya jadi kayak bigini buatan saya,,coba deh dilihat http://lagrande-merdeka.blogspot.com/
    please yah email ke saya kesalahannya di inbox aja ke fik333@gmail.com.
    maksih banget lho sebelumnya gan.tks

    BalasHapus
  5. @Feri: Saya udah coba Kode Script nya dan tidak ada kegagalan mungkin ada kesalah saat sobat mengit URL atau lainnya coba periksa lagi.

    BalasHapus
  6. trima kasih maz.........

    BalasHapus
  7. gan kok nii sub menu cuma jadi satu padahal ada tiga seharussnya ??

    BalasHapus
  8. Coba cek lagi gan mungkin ada yang salah.

    BalasHapus
  9. wah knp baru ketemu blog ini yaah..udah berapa kale bongkar pasang submenuku krn pada gagal terus.pas nemu blog ini gampang banget di praktekinnya,
    ok makasih infonya ya gan..
    link blog ne dah terpasang di blog ku..
    kalo gk repot pasang jg ya
    judul : BUKA TENAGA DALAM GRATIS
    almt : http://jasa-gratis.blogspot.com

    ~ terimakasih ~

    BalasHapus
  10. @wisnuGUBDUL : Thanks gan, link anda sudah dipasang di blog sya, cek link teman

    BalasHapus
  11. bos, coba cek/lihat ke blog saya deh http://wirawanpp.blogspot.com/ menu horizontalnya pemasangannya bener gak? terus cara mengganti warna background gimana? maklmum masih newbie

    Thanks

    BalasHapus
  12. @putra.p : pemasangannya sudah benar cuma lebarnya tidak sesuai dengan Blog sobat, jadi sobat ganti kode widht:930px jadi widht:auto, dan untuk mengganti Background nya silahkan sobat hapus kode -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)), ganti menjadi #kode warna.

    BalasHapus
  13. oke deh bang, sudah berhasil. Mau nanya satu lagi cara mengubah warna menu drop downnya gimana?

    Thanks ya infonya

    BalasHapus
  14. Coba ubah background a:visited dari kode di atas.

    BalasHapus
  15. wih keren juga tapi ada yang gag berhasil

    BalasHapus
  16. gan ane bingung nih gan
    dropdown ane koq gk kluar ya monggo diliat di http://fileshare23.blogspt.com/
    tau gk knpa gan?

    BalasHapus
  17. Gan udah berbagai cara saya coba kok sub menu nya yang tampil cuma 1 aja y...???

    Coba tolong agan liat blog saya http://cerberusarea.blogspot.com/...

    apa nya yang salah ya...???

    BalasHapus
  18. Mungkin ada kesalahan coba cek lagi baik-baik dan coba perhatikan kode di atas gimana cara membuat menu Drop Down nya , jika masih kebingungan sobat boleh baca ini http://blazerracing.blogspot.com/2012/03/cara-membuat-menu-horizontal-drop-down.html

    BalasHapus
  19. gan, izin share ulang dengan link sobat saya cantumin ya :D

    BalasHapus
  20. thanks atas artikelnya ya gan :D

    http://superrefreshing.blogspot.com/

    BalasHapus
  21. Trims ilmunya Gan, saya masih newbie, hehe... mo nanya Gan: gimana caranya mo mengupload sebuah file di dalam salah satu menu horizontal drop down blog,...misalnya, seperti menu blognya Agan yang menu(FUN ) didalamnya ada lagi sub menu (CERITA LUCU) dan (UNIK ANEH)kedua menu CERITA LUCU dan UNIK ANEH kan jadi ada isinya klo di klik Mas, mohon infonya yah, makasih.

    BalasHapus
  22. Kalau itu sobat harus membuat posting dulu,setelah selsai lihat posting yang telah kamu buat tadi,setelah itu lihat bagian adrees bar tempat masukin Alamat, nah itu alamat Posting kamu, jadi ganti kode yang yang berwarna merah dengan Alamat Posting kamu.

    BalasHapus
  23. Thx banget Gan, saya akan mencobanya...

    BalasHapus
  24. Makasih banyak Gan, udah berhasil, moga, moga Agan makin sukses dengan ilmunya...:)

    BalasHapus
  25. Terimakasih atas dukungan nya, jika soba mau yg lebih bagus coba lihat yang ini:
    http://blazerracing.blogspot.com/2012/04/cara-membuat-menu-drop-down-dengan-css3.html

    BalasHapus
  26. berhasil berhasil berhasil horeee...thk gan

    BalasHapus
  27. Terimakasih atas pujian anda.

    BalasHapus
  28. Gan udah bisa cuma kok menu pencariannya dibawahnya gax rata sama yang lainnya gmana gan apa yang rus diubah... :)

    BalasHapus
  29. Width:700px; nya ubah itu adalah lebar menu jadi sesuaikan dengan blog anda, atau ganti dengan ini width:100%;

    BalasHapus
  30. maaf gan, udah dicoba, tapi kok ketutup ya? drp down menunya ketutup, cuma muncul 1 kebawah, yang kedua nya ngga kelihatan. mohon infonya gan, thx :)

    BalasHapus
  31. Coba ubah saja kode Width:930px; jadi width:100%; jika tetap gagal coba cari menu drop down yang lebih keren di Blogger jQuery atau Blogger CSS

    BalasHapus
  32. gan cara ngilangin kotak kmentarnya gmana ya? soalnya nanti kotak pncarianq ya ada 2 kan lucu kalo ada 2, trus klau ganti warna sub menu sama tinggi menu dropdownnya gmna yaa?? mhon bntuannya ade-nophiette.blogspot.com

    BalasHapus
  33. Untuk ubah warna sub menu nya silahkan cari kode ul nah kalau ada kode background silahkan ganti dengan warna lainnya.

    BalasHapus
  34. gimana cara ganti tulisannya sama backgroundnya?

    BalasHapus
  35. Untuk tulisan lihat kode yang berwarna biru, silahkan anda ganti.
    Untuk Background nya silahkan ganti kode yang paling awal background:-webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)) menjadi background:#kodewarna

    BalasHapus
  36. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  37. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  38. mantap ne tapi gan kok searchnya di bawah tidak sejajar dengan menu ,,,dan tidak bisa di tulis ..mohon penjelasannya lagi

    BalasHapus
  39. sobat harus pandai mengatur lebar nya #black{background:-webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); width:930px; ganti kode yang dicetak tebal sesuai dengan lebar blog Anda, supaya mudah ganti saja denagn width:100%;

    BalasHapus
  40. Wah tutorialnya maknyuz nih sobat langsung saya praktekkan dan berhasil..

    BalasHapus
  41. sepertinya ini lebih keren sob....thnaks!

    BalasHapus
  42. Terima kasih sudah berbagi. Saya sudah mempraktekannya dan berhasil.
    Hanya ada sedikit kekurangan, pada salah satu menu, background sub menunya tdk merah seperti yg lain, melainkan grey. Mestinya merah semua. Saya penasaran kenapa bisa begitu :D

    BalasHapus
  43. Terima kasih untuk sharing nya Bro...
    saya sudah coba, searchnya kok di bawah ya...
    width:auto
    width:100%
    sudah saya terapkan tapi tetep di bawah dia...

    BalasHapus
  44. gan !!..ane udah coba di blog ane..kok ttp aja gx mw?...masalah'y apa gan??....

    BalasHapus
  45. berhasil gan mantap dropdown nya....sudah saya pasang di template blog ku yang baru,tapi belum di publish

    BalasHapus
  46. om saya usul ini mending judul artikelnya di rubah jadi "cara menambahkan menu drop down horizontal bla bla bla " karna kalo judul nya "care membuat"
    ya pembaca harus ikut terlibat membuat menu bla bla atau minimal tau cara pebuatannya, tp nyatanya ini kita hanya di suruh masang menu yag udah jadi (copas)...
    analoginya gini : saya mengumumkan besok di rumah saya ada kursus gratis "cara membuat jendela keren"
    ketika orang2 datang ingin belajar cara membuat jendela..ternyata saya hnya menyuruh mereka mencari jendela yang sudah jadi atau saya hanya memberi jendela, kemudian kemudian saya memerintahkan mereka: pasang jendela tersebut di rumah anda kemudian lihat hasilnya. bagai mana mudahkan cara membuat jendela ?
    dari judulnya "cara membuat jendela" tp tidak ada kegiatan membuat jendela dimana perserta yang terlibat membuat jendela. dan ahirnya mereka hnaya bisa memasang jendela tp tidak tau cara membuat jendela....

    BalasHapus
  47. weitz makin keren ajah nih tutorialnya sob

    BalasHapus
  48. kok punya saya di background masih warna putih gan?

    BalasHapus
  49. juga box pencarainnya gak gabung dalam satu satu baris menu (seperti gambar) agan?

    BalasHapus