Rabu, 15 April 2009
Membuat Menu Horizontal dan SearchBox
Apa sih Menu Horizontal???
Apa kamu pernah liat di bagian atas blog terdapat MenuBar yang biasanya berisi:
Home Category About Me
Pokonya gitu deh.. Nih gambarnya biar jelas:
Kalo gag keliatan di klik aja gamar nya, biar di perbesar...
Pokoknya yang namanya Home, About Me itu adalah menu horizontal...
Nah asal tau aja ya.. Menu horizontal ini berbeda dengan mernu horizontal lainnya, menu horizontal ini yang di pakai oleh template - templatenya Kang Rohman,,
Q: Siapa tuh Kang Rohman??
A: Hari gini masih ada blogger yang belum tau Kang Rohman??? Nih blognya Kang Rohman Coba deh diliat...
Nah Kita Lanjut kan perjalanan kita yang baru 1/4 perjalanan...
Sebelum masuk ke coding,, kita bahas dulu mengenai Search Box,, Search Box itu mirip search engine,, tapi hanya akan menampilkan content - content dari blog kita..
Oke.. Sekarang kita ke coding...
<Login ke blog anda trus klik Layout / Template >> Edit HTML
2. Selanjutnya cari code header-wrapper , seperti biasa untuk memudahkan mencari code, tekan saja Ctrl+F dan masukkan code yang anda cari dikolom pencarian..
3. Copy code dibawah ini, dan masukkan di atas code header-wrapper atau wrapper
Code:
#NavbarMenu {
width: 1000px;
height: 35px;
color: $textcolor;
margin: 0 auto 0;
padding: 0;
font: bold 12px Arial, Tahoma, Verdana;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#search {
width: 280px;
font-size: 11px;
float: right;
margin: 0;
padding: 6px 0 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: $textcolor;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 16px Georgia, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background:#829297 url(http://lh5.ggpht.com/_pt7i0nbIOCY/SbiZq_2NjWI/AAAAAAAABb0/xv5LlFcjhvM/bgnav_thumb%5B3%5D.png?imgmax=800) repeat-x top;
color: #FFF;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #809094;
width: 150px;
color: #000;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #151f23;
border-left: 1px solid #151f23;
border-right: 1px solid #151f23;
font: normal 14px Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background: #233e45;
color: #fff;
padding: 7px 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: -32px 0 0 171px;
}
#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;
}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #121B1E !important;
width: 220px;
color: #FFF;
margin: 0;
padding: 4px 0 3px 5px;
border-top: 1px solid #051d23;
border-right: 1px solid #666;
border-left: 1px solid #051d23;
border-bottom: 1px solid #666;
display: inline;
font: normal 12px Georgia, Times New Roman, Trebuchet MS;
}
#searchbutton {
background: #121B1E !important;
color: #FFF;
margin: 0 0 0 5px;
padding: 3px 3px 2px;
border-top: 1px solid #051d23;
border-right: 1px solid #666;
border-left: 1px solid #051d23;
border-bottom: 1px solid #666;
font: bold 11px Georgia, Times New Roman, Trebuchet MS;
}
#empty {
width: 100%;
height: 24px;
clear:both;
}
4. Setelah itu Save Template,,
5. Masih berkutat dalam Edit HTML, selanjutnya cari code <div id='header-wrapper'> (dengan Ctrl+F).. Kalo gag ketemu coba cari code <body> dan scroll mouse kebawah untuk mencari code <div id='header-wrapper'> atau sejenisnya..
6. Selanjutnya copy code dibawah ini, dan paste dibawah code <div id='header-wrapper'> .. jangan paste persis di bawah <div id='header-wrapper'> nya,, tapi di akhir blok div nya..
code:
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='#'>Page</a>
<ul>
<li>
<a href='#'>Sub Page #1</a>
<ul>
<li><a href='#'>Sub Sub Page #1</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul>
</li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
<li><a href='#'>Sub Page #4</a></li>
<li><a href='#'>Sub Page #5</a></li>
</ul>
</li>
<li><a href='#'>About Me</a>
<ul>
<li><a href='#'>My Profile</a></li>
</ul>
</li>
</ul>
</div>
<div id='search'>
<form action='/search/' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='255' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</div>
<div style='clear:both;'/>
<div id='empty'/>
<div style='clear:both;'/>
7. Edit dulu sesuka kamu Tentang perubahan URL dan Subpage - subpage nya sesuai blog kamu..
8. Save...
Mudah kan,,
Kalau mau minta bantuan silahkan komen dibawah...
Selamat Mencoba
Postingan
pusing coy
BalasHapus