Cara membuat menu horizontal multi level dan search box di blog - by s2c3rr

Website apabila gak ada menunya ibarat sobat jualan gak ada menu untuk di jual begitu juga website apabila gak ada menu atau pengelompokkan artikel maka pengunjung blog akan bingung untuk mencari artikel di blog sobat yang gak ada menunya.Oleh karena itu pada kesempatan kali ini saya ingin membahas cara membuat menu horizontal multi level dan search box di blogger.pada artikel sebelumnya saya hanya membahas cara membuat menu horizontal dan search box sederhana dan untuk artikel kali ini hanya menambah sub menu pada menu horizontalnya.Untuk lebih jelasnya sobat bisa ikuti langkah-langkah di bawah ini.
1. Login Blogger.com
2. Di dasbor sobat pilih menu Rancangan >> Edit HTML
3. Expand template widget
4. Cari kode ]]></b:skin>.
(*Gunakan tombol F3 pada keyboard untuk mempermudah pencarian)
5. Setelah ketemu letakkan kode di bawah ini di atas kode No.4.

#NavbarMenu {
width: 960px;
height: 35px;
background:#e3edf9 url(http://i415.photobucket.com/albums/pp238/Sujeet/navbar3.jpg) repeat-x top;
color: #3D81EE
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #AFAFAF;
border-bottom: 1px solid #FFFFFF;
}
#NavbarMenuleft {
width: 960px;
float: left;
margin: 0;
padding: 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: #dae8ff;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Georgia, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background:#e7ffb3;
color: #36731b;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #3D81EE url(http://i415.photobucket.com/albums/pp238/Sujeet/navbar3.jpg) repeat-x top;
width: 200px;
color: #d3d3d3;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #99C9FF;
border-left: 1px solid #99C9FF;
border-right: 1px solid #99C9FF;
font: normal 14px Georgia, Times New Roman;
}

#nav li li a:hover, #nav li li a:active {
background: #e3f1ce;
color: #156018;
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;
}
#search{width:210px;font-size:11px;float:right;margin:0;padding:0}
#searchform{overflow:hidden;display:inline;margin:0;padding:0}
#searchbox{background:#ddd;margin:0;padding:0}
#search input{background:transparent;color:#fff;float:left;font-size:12px;width:158px;border:1px solid #fff;font:normal 10px arial, verdana, Times New Roman;margin:7px 0 0 10px;padding:3px 7px}
#search .btn{width:auto;border:0;margin:7px 0 0;padding:0}

6. Scroll kebawah dan temukan kode yang mirip dengan kode di bawah ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>
</div>

7. Setelah ketemu letakkan kode di bawah ini persis di atasnya.

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl' title=''>Home</a></li>
<li><a href='#'>1</a>
<ul>
<li><a href='#'>1.1</a></li>
<li><a href='#'>1.2</a></li>
<li><a href='#'>1.3</a></li>
</ul></li>
<li><a href='#'>2</a>
<ul>
<li><a href='#'>2.1r</a></li>
<li><a href='#'>2.2</a>
<ul>
<li><a href='#'>2.2.1</a></li>
</ul>
</li>
<li><a href='#'>3</a></li>
</ul></li>
<li><a href='#'>4</a>
<ul>
<li><a href='#'>4.1</a></li>
<li><a href='#'>4.2</a>
<ul>
<li><a href='#'>4.2.1</a></li>
</ul></li>
</ul></li>
</ul>

<div id='search'>
<form action='http://xmantan.co.cc/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='160' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/>
<input class='btn' name='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_unvN-JW_t089CdnENchGzFCRaVHO4VvRtHtUgKn16RGbXO80WXUEEpfd149K8M1rNGdwlH0PKBTkr0hbtrM0CrSlhfqf9Spd20n0BKimWdukxFKmfmWS1s6e28Us-Loe3y5zKKJuPG_O/s1600/1zehw2f_th.jpg.png' type='image' value='Go'/>
</form>
</div>
</div>
</div>

8. Setelah selesai semua pilih simpan template dan lihat hasilnya.
Mungkin hanya itu yang dapat saya sampaikan pada artikel kali ini dasemoga bermanfaat bagi yang memebutuhkannya.selamat mencoba dan semoga sukses.

>>> Indahnya Berbagi <<<

Share this: