Hai sobat,kali ini saya punya Style
Yaitu style widget menu Horizontal Triangle dengan tombol search,
Menu Horizontal ini yang saya gunakan untuk blog saya ini,
Tapi tidak pake tombol search dan Triangle,,
Anda penasaran kan?bagaimana bentuk sebelumnya dengan
Triangle dan tombol search owh Okey,lihat demonya di bawah.
Nah,bagaimana? -_- agak lumayankan,
NB: Maximal ukuran 570px-970px atau selebihnya
Jadi begitulah,mengapa harus ukuran begitu,
Karena kalau kurang dari 570px , tombol search itu akan keluar
Dari area tsb,
Oke langsung saja
Install Program CSS
Nah yang pertama kali kita masukkan CSS , biasanya di letakkan di atas Code (
]]></b:skin>
Atau </style> ) nah di situ lah tempat Code CSS, Code CSS bisa juga buat di NOTEPAD dan format all FILES dan beri NAMAFILE.css harus ada .css di belakangnya ,T'rus upload file tsb.
/* Menu Horizontal Triangle di: http://www.belajar-css3.blogspot.com*/
#menus {
border:1px solid #ff0000;
height:31px;box-shadow:inset 0 0 5px #00d;border-radius:5px;
}
#menus li {
display:inline;
list-style-image:none;
list-style-position:outside;box-shadow:inset 0 0 15px #00d;
}
#menus li a {
background:#00d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrljEblPf_EFPj3dj2NHLeXfgS9EXaRiHWK0t14UldH6O26ZfH0P42qLNLIBhfWmiQ5v2gwC2swIUWL0vjBetXQF07g3nyoFrvc8LyP_xVXeIYXQwAnU3LdR8m-h2x4l5D11gdbkvnaQFP/s1600/menu.gif) no-repeat scroll 0 0;
color:#ff0000;
display:block;
float:left;
font-size:18px;
height:31px;
line-height:31px;
margin-left:-10px;
padding:0 20px;
text-decoration:none;
z-index:1;text-shadow:1px 1px 0 #ff0;
font-weight:bold;box-shadow:inset 0 0 5px #00d;
}
#menus li a:hover, #menus li a.current {
background-position:0 -31px;color:#cccccc;font-weight:normal;
}
#menus li.current_page_item a, #menus li.current-cat a {
background-position:0 -62px;
}
#menus li a.home {
background-position:0 -93px;
margin-left:0;
padding:0;
text-indent:-999em;
width:45px;
}
#menus li a.home:hover {
background-position:0 -124px;
}
#menus li.current_page_item a.home {
background-position:0 -155px;
margin-left:-40px;
}
#menus li a.lastmenu:hover {
background-position:0 0;
cursor:default;
}
#s {float:right;
margin: 0 auto;
-webkit-appearance: none;
-moz-appearance: none;
padding: 19px 48px 12px 12px;
border-radius:5px 5px 5px 5px;
width: 150px;
height: 16px;
color: #ff0000;
outline: none;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
position: relative;
z-index: 2;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUXgMyTg118bC45GtxvbkMBayv5HpXllg3pH7l1x2Aw069SKd5CqWtVWbx4jME4UFn3GvxHNTR7TtQAOK7mwrYmtGjAENfMsiD_wo6aEo8mdktlR9WPT2qcSrT0HIzDOiqXnIBAJWjcGw/s1600/Search.png) center right no-repeat;border:1px solid #ff0000;box-shadow:inset 0 0 5px #00d;border-top:none;border-bottom:none;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
color: #ff0000;
}
Install Program HTML
Nah Code HTML biasanya untuk menjalankan Code CSS tsb,nah letak lah
Code tsb di Henderson-inter lah,Henderson-wrapper lah, atau apa lah,...
Nah inilah Code tsb,
<!-- Menu Navigasi Start -->
<ul id='menus'>
<li class='current_page_item'><a class='home' href='/' title='Home'></a></li>
<li><a href='#' title='Menu 1'>Menu 1</a></li>
<li><a href='#' title='Menu 2'>Menu 2</a></li>
<li><a href='#' title='Menu 2'>Menu 3</a></li>
<li><a href='#' title='Menu 2'>Menu 4</a></li>
<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
</form>
<!-- Menu Navigasi End -->
Penambahan menu
<li><a href="#">menu<a></li>
Jika ada yang ingin di tanyakan atau request CSS silahkan
Berkomentar atau kunjungi -->
Quest Book untuk bertanya2,
Oke semoga bermanfaat utk kita semua
Title : Menu Horizontal dengan Search
Description : Hai sobat,kali ini saya punya Style Yaitu style widget menu Horizontal Triangle dengan tombol search, Menu Horizontal ini yang saya...
