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 gambar nya, biar di perbesar...
Pokoknya yang namanya Home, About Me itu adalah menu horizontal...
Nah Kita Lanjut kan perjalanan kita yang baru 1/4 perjalanan...
Sebelum masuk ke CSS,, 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 CSS...
<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 CSS 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitMwpMwIuXckNyGEdySKM74vpYHUUhTKLveS2qlm93UdR7lFVmTiGIEP0zElTJlX03zSn1gXRV0wYW7Jyo-fTWaFPyrk9WO3gugBb2tSPbzzYuA-0DJHI680D78c4y108TnsGLAgk_4lnA/?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 ada yang sulit untuk dimengerti, silahkan komen dibawah...
Selamat Mencoba :)
Membuat Menu Horizontal dan SearchBox
:))
:)]
;))
;;)
:D
;)
:p
:((
:)
:(
:X
=((
:-o
:-/
:-*
:|
8-}
~x(
:-t
b-(
:-L
x(
=))
Langganan:
Posting Komentar (Atom)
Wah mantap tutornya sob... sukses...!!!
pertamaxxx dulu ahhh....
sip banget tutorialnya sob...
kerend kang tutorialnya
keren tutorialnya, ntar wan coba dech, blognya-nya juga keren banget, hihihihi
pengen belajar ah, hehehhe
wan udah folow ka
wuih... blog tutorialnya mantap pisang euy...
http://suharjo21.blogspot.com/
setelah membuat navigasi navbarmenulef
bagaimana caranya memasukan postingan ke dalam navigasi menu dan submenu masing-masing sesuai keinginan, susah,,yang tau kirim ke roomajo@gmail.com