[ Tutorial ] Cara Membuat Menu Horizontal Multilevel dan Searchbox di Blog

Tutorial - Cara Membuat Menu Horizontal Multilevel dan Searchbox di Blog
Berikut ini tutorial bagaimana cara membuat menu horizontal multilevel dan searchbox di blog

1. Login Blogger.com
2. Di dasbor sobat pilih menu Rancangan >> Edit HTML
3. Expand template widget
4. Cari kode ]]></b:skin>.
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.

8.Selesai. simpan settingan

Demikian sob tutorial bagaimana cara membuat menu horizontal multilevel
dan searchbox di blog

Semoga bermanfaat dan membantu

IysBlog : Catatan yang Dirangkum

Pages

Minggu, 19 Agustus 2012

[ Tutorial ] Cara Membuat Menu Horizontal Multilevel dan Searchbox di Blog

Artikel Terkait:

1 komentar: