Membuat Menu Horizontal DropDown Dengan Kotak Pencarian
Membuat Menu Horizontal DropDown Dengan Kotak Pencarianpastinya
sudah tahu kan yang dimaksud dengan Menu Horizontal, ya menu horizontal
adalah menu yang sub navigasinya bergerak ke bawah seperti tirai atau
yang sering disebut dengan menu horizontal drop down jika kita
mengarahkan cursor mouse kita ke salah satu judul navigasinya. Memang
sobat
Erwin banyak sekali bentuk yang kreatif dan menarik dari berbagai
model menu Dropdown yang bertebaran di Internet, tapi pada kesempatan
kali ini farhan akan share Menu DropDown Horizontal lengkap dengan kotak
pencarianya, agar memudahkan para pengunjung dalam mencari artikel yang
mereka minati, dan juga menghemat space di blog, karena kita tidak
membutuhkan widget baru lagi untuk membuat kotak pencarian, jadi kita
bisa menghemat space blog untuk widget yang sekiranya lebih penting
untuk di prioritaskan. Baik, sobat Erwin di bawah ini sudah saya
persiapkan kode css menu horizontal drop down dan cara pemasanganya, di
simak baik-baik ya
1. Login ke Blogger.2. Pilih Template.3. Pilih Download Full Template (berjaga-jaga bila terjadi kesalahan dalam meng-edit HTML).4. Pilih Edit HTML.5. Centang box "Expand Template Widget".6. Sobat cari kode ]]></b:skin> menggunakan CTRL+F atau F3, lalu sobat letakkan kode di bawah ini tepat diatasnya.
#imenu {
background: #5e5e5e; /* Old browsers */
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 49%, #5e5e5e 51%, #777777 100%); /* FF3.6+ */
background:
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#8a8a8a),
color-stop(49%,#707070), color-stop(51%,#5e5e5e),
color-stop(100%,#777777)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* IE10+ */
background: linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* W3C */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: #fff;
border: none;
text-decoration: none;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15);
overflow: visible;
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-appearance: none;
margin-bottom: 15px;
margin-left:0px;
}
#halfnav{float:right;}
#halfnav ul, #halfnav ul li{display:inline;list-style:none;padding:0;margin:0}
#halfnav ul li a{
display:inline-block;
margin: 5px;
font-family:'Lucida Grande',Helvetica,Arial,Verdana,sans-serif;
font-size:16px;
padding: 5px;
color:#fff;
line-height:20px;
text-decoration:none;
background: #5e5e5e; /* Old browsers */
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 49%, #5e5e5e 51%, #777777 100%); /* FF3.6+ */
background:
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#8a8a8a),
color-stop(49%,#707070), color-stop(51%,#5e5e5e),
color-stop(100%,#777777)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* IE10+ */
background: linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* W3C */
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.28);
border: 1px solid #666;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#halfnav
ul li a:hover{border: 1px solid #222;box-shadow:inner 0 0 5px
#000;-moz-box-shadow:inset 0 0 5px #000;-webkit-box-shadow:inset 0 0
5px#000;background:#444}
#halfnav .current-menu-item a{border: 1px solid #000;}
#nav{position:relative;z-index:2000}
#nav
.parent > a, #nav .parent >
a:hover{background-image:url(../images/arrow.png);background-position:right;background-repeat:no-repeat}
#nav
ul ul .parent > a, #nav ul ul .parent:hover > a:hover, #nav ul ul
li:hover ul .parent > a, #nav ul ul li:hover ul .parent >
a:hover{background-image:url(../images/arrow-right.png);background-position:right;background-repeat:no-repeat}
#nav ul, #nav ul li{display:inline;list-style:none;padding:0;margin:0}
#nav
ul li a{display:inline-block;font-family:'Lucida
Grande',Helvetica,Arial,Verdana,sans-serif;font-size:14px;color:#fff;line-height:36px;text-decoration:none;text-shadow:1px
1px 1px #333;padding:0 15px;margin-left:-4px;border-right:#777 1px
solid}
#nav
ul li a:hover{box-shadow:inner 0 0 5px #000;-moz-box-shadow:inset 0 0
5px #000;-webkit-box-shadow:inset 0 0 5px#000;background:#444}
#nav .current-menu-item a{color:#ccc;}
#nav .current-menu-item .sub-menu a{color:#fff;text-shadow:1px 1px 1px #333}
#nav .menu > li:first-child a:hover{border-radius:0}
#nav .menu .sub-menu li a:hover{border-radius:0}
#nav ul li{position:relative}
#nav li ul{display:none;position:absolute;top:27px;left:7px}
#nav li ul a{background:#555}
#nav ul ul li:hover ul, #nav ul ul ul li:hover ul{left:0;margin:-37px 0 11px 180px}
#nav ul li:hover ul{display:inline-block}
#nav ul ul, #nav ul li:hover ul ul, #nav ul ul li:hover ul ul{display:none}
#nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul{display:block}
#nav
ul li:hover ul li a, #nav ul ul li:hover ul li a, #nav ul ul ul
li:hover ul li a{border:#777 1px solid;margin:-1px 0 0 -11px}
#nav ul li:hover ul li a{width:150px;padding:0 14px}
#nav ul ul li:hover ul li a{width:150px;padding:0 14px;background-color:#888}
#nav ul ul ul li:hover ul li a{width:150px;padding:0 14px;background-color:#aaa}
#nav .children {z-index: 4000;}
#home {float: left;border-right:#777 1px solid;margin-right:4px;margin-left:15px; height: 36px;}
#home a:hover{opacity: .5}
#nohome {float: left; margin-right:4px;margin-left:5px; height: 35px;}
.searchform {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
width: 160px;
padding: 0;
margin: 7px 5px 5px 10px;
height: 20px;
box-shadow:inset 0 0 1px #222;
background: #fff;
float: right;
margin-right: 20px;
}
.center .searchform {float:none;}
#morefoot .searchform {float:left;}
.searchform .s{
margin:0;
border: none;
margin: 3px 2px 2px 20px;
font-size: 12px;
height: 14px;
width: 130px;
color: #333;
overflow: hidden;
}
#magnify {float:left;position:absolute;margin: 2px 0 0 5px;}
#magnify {margin: 0 0 0 5px}
.searchform .s:focus {outline:0; border:none;}
.searchform .searchsubmit {display:none;}
.row { width: 100%; max-width: 980px; min-width: 727px; margin: 0 auto; }
/* To fix the grid into a certain size, set max-width to width */
.row .row { min-width: 0; }
.column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; }
.column:first-child, .columns:first-child { margin-left: 0; }
[class*="column"] + [class*="column"]:last-child { float: right; }
.row .three { width: 21.679%; }
.row .nine { width: 73.9%; }
.row .ten { width: 82.6%; }
.row .twelve { width: 100%; }
Catatan : Ganti kode yang berwarna
merah dengan ukuran
lebar/width blog sobat.
7. Klik "Save Template".
8. Pilih Tata Letak.
9. Pilih Add Gadget (gadget di bawah header untuk menu navigasi).
10. Pilih HTML/JavaScript.
11. Letakkan kode di bawa ini ke dalam box "Konten".
<div class="container">
<div class="row">
<div class="twelve columns" id="imenu">
<div id="nav" class="nine columns">
<div id="home"><a href="http://farhanshare.blogspot.com"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVHftc-00HcDBRMthNRi6E8yNc9Aqk-nBYwUSOiirxTdp3F6iNoMi1si-74LsWbTb-m6Kr7C36KC0Sbb_J1ztGV2aEbMqAGwxcwXUQNVVS3FWkUb4MqEAT4yjG8D5AmtTLjPDdJWiSMWt3/s320/home.png"
alt="home"></a></div>
<ul id="nav_menu">
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">HTML / CSS</a></li>
<li><a href="#">JS / jQuery</a>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">JS</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</li>
<li><a href="#">Resources</a>
<ul>
<li><a href="#">By category</a>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</li>
<li><a href="#">By tag name</a>
<ul>
<li><a href="#">captcha</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">animation</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="http://farhanshare.blogspot.com">FarhanShare</a></li>
</ul> </div>
<div class="three columns">
<form method="get" class="searchform" action="http://farhanshare.blogspot.com.com/">
<div
id="magnify"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-wobx7TgLNtVMmQarHJEmVBUDj3VOaY2rmmgxGcLptoiWKLCDoarlx2WbO0r2fU0gPoTdCnDzrxglvBJpJ6pnX14C1zlHpscgm_TdwC7XN8upWOoFIJMF0l0s8nDL7FkA1KnesfwzpGF/s320/magnify.png"
alt="magnify"></div>
<div><input
name="s" class="s" value="Search" id="searchsubmit" onfocus="if
(this.value == 'Search') this.value = '';" type="text"></div>
<div><input class="searchsubmit" value="" type="submit"></div>
</form> </div>
</div>
</div>
</div>
Catatan : Ganti kode yang berwarna
merah dengan
URL Blog sobat.
Catatan : Ganti kode
"#" dengan
URL yang akan dituju
Judul Navigasi.
Catatan : Ganti tulisan yang berwarna
biru dengan
Judul Menu Navigasi.
12. Klik "Save" dan Selesai.
Demikian sobat farhan artikel tutorial blog tentang membuat menu
horizontal drop down lengkap dengan kontak pencarian, semoga bermanfaat,
bila ada pertanyaan comment di bawah.