Tools Informasi

• Menu 1
• Menu 2
• Menu 3
• Menu 4
• Menu 5

Dengan sub-menu

• Menu 1
• Menu 2
• Menu 3
• Menu 3.1
• Menu 3.2
• Menu 3.3
• Menu 4
• Menu 5

<style>
#navcontainer {margin: 0px;padding: 0px;}
#navcontainer ul {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: left;}

#navcontainer ul li {float: left;}
#navcontainer ul li a {background:
url(http://butterlabel.com/transfer/butterlist/images/folderOFF.png) no-repeat top left;
text-decoration: none;
font-size: 10px/12px;
float: left;
margin: 0px -12px 0 0;
height: 67px;
width: 105px;
padding:13px 0 0 10px;}

#navcontainer li a:hover {background: url(http://butterlabel.com/transfer/butterlist/images/folderON.png) no-repeat left top;
color: #000000;}
</STYLE>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="https://www.blogger.com/" id="current">Beranda</a></li>
<li><a href="https://www.blogger.com/">Daftar Isi</a></li>
<li><a href="https://www.blogger.com/">Go Backlink</a></li>
<li><a href="https://www.blogger.com/">About Profile</a></li>
<li><a href="https://www.blogger.com/">Contact</a></li>
</ul>
</div>

<style>
#navlist {
padding: 0 5px 5px;
margin-left: 0;
font: bold 14px Verdana, sans-serif;}

#navlist li {
list-style: none;
margin: 0;
border-top: 1px solid gray;
display: inline;}

#navlist li a {
padding: 10px;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;}

#navlist li a:link {color: #448;}
#navlist li a:visited {color: #667;}
#navlist li a:hover {border-color: red;color: #FFF;background: #39f;}
</style>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="https://www.blogger.com/" id="current">Beranda</a></li>
<li><a href="https://www.blogger.com/">Daftar Isi</a></li>
<li><a href="https://www.blogger.com/">Go Backlink</a></li>
<li><a href="https://www.blogger.com/">About Profile</a></li>
<li><a href="https://www.blogger.com/">Contact</a></li>
</ul>
</div>

<style>
#navlist ul {margin: 0;white-space: nowrap;padding: 0;}
#navlist li {display: inline;list-style-type: none;}
#navlist a {
padding: 6px 8px 6px 24px;
border: 1px solid #333;
background-color: #999;
font: bold 14px Verdana, sans-serif;
background-image: url(images/l1_down.gif);}

#navlist a:link, #navlist a:visited{color: #EEE;}
#navlist a:hover {
border: 1px solid #333;
background-color: #FF6600;
color: #333;}

#active a:link, #active a:visited, #active a:hover{
border: 1px solid #333;
background-color: #FF6600;
color: #333;}
</style>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="https://www.blogger.com/" id="current">Beranda</a></li>
<li><a href="https://www.blogger.com/">Daftar Isi</a></li>
<li><a href="https://www.blogger.com/">Go Backlink</a></li>
<li><a href="https://www.blogger.com/">About Profile</a></li>
<li><a href="https://www.blogger.com/">Contact</a></li>
</ul>
</div>

<style>
#navlist {
color: white;
background: #17a;
border-bottom: 0.2em solid #17a;
border-right: 0.2em solid #17a;
padding: 0 1px;
margin-left: 0;
width: 12em;
font: normal 0.8em Verdana, sans-serif;}

#navlist li {
list-style: none;
margin: 0;
font-size: 1em;}

#navlist a {
display: block;
text-decoration: none;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #39c;
border-width: 1px;
border-style: solid;
border-color: #5bd #035 #068 #6cf;
border-left: 1em solid #fc0;
padding: 0.25em 0.5em 0.4em 0.75em;}

#navlist a#current {border-color: #5bd #035 #068 #f30;}
#navlist a {width: 99%;}
#navlist a {
voice-family: ""}"";
voice-family: inherit;
width: 9.6em;}

#navcontainer&gt;#navlist a {width: auto;}
#navlist a:hover, #navlist a#current:hover {
background: #28b;
border-color: #069 #6cf #5bd #fc0;
padding: 0.4em 0.35em 0.25em 0.9em;}

#navlist a:active, #navlist a#current:active {
background: #17a;
border-color: #069 #6cf #5bd white;
padding: 0.4em 0.35em 0.25em 0.9em;}
</style>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="https://www.blogger.com/" id="current">Beranda</a></li>
<li><a href="https://www.blogger.com/">Daftar Isi</a></li>
<li><a href="https://www.blogger.com/">Go Backlink</a></li>
<li><a href="https://www.blogger.com/">About Profile</a></li>
<li><a href="https://www.blogger.com/">Contact</a></li>
</ul>
</div>

<style>
/* Menu CSS */
#cssmenu, #cssmenu > ul{
background:#24459A;
padding-bottom: 3px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
content: '';
display: table;
}
#cssmenu:after, #cssmenu > ul:after {
clear: both;
}
#cssmenu {
zoom:1;
}
#cssmenu > ul{
background:black;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li{
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li{
float: left;
position: relative;
}
#cssmenu > ul > li > a{
padding: 23px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .70);
line-height: 18px;
}
#cssmenu > ul > li:hover > a{
background:#24459A;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, .64);
}
#cssmenu > ul > li > a > span{
line-height: 18px;
}
#cssmenu > ul > li.active > a, #cssmenu > ul > li > a:active{
background: #24459A;
}
/* Childs */
#cssmenu > ul ul{
opacity: 0;
visibility: hidden;
position: absolute;
top: 120px;
background:black;
margin: 0;
padding: 0;
z-index: -1;
-webkit-transition: all .35s .2s ease-in-out;
-moz-transition: all .35s .2s ease-in-out;
-ms-transition: all .35s .2s ease-in-out;
transition: all .35s .2s ease-in-out;
}
#cssmenu > ul li:hover ul{
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top:64px;
left: 0;
}
#cssmenu > ul ul:before{
content: '';
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmenu > ul ul li{
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li a{
padding: 18px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
#cssmenu > ul ul li a:hover{
background:#24459A;
}
#cssmenu > ul ul li a:active{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwL1xxIRyBQ4s-k2gmUAEBuKIwQmb-W1Tk-HYVFiYKS8F0reeFSsw3yKZ1THkicR6HwiYefQmm7eqVWgQvD5cHayW67whUhWT0KQdJk1hUNIU5GPx50ubQOigGlBNMDQgcgNS8T2wG3EE/s1600/menu-bg.png) repeat;
}menu > ul > li > ul > li > ul{
left: 202px;
top: 1px;
width: 200px;
}
#cssmenu > ul > li > ul > li > ul > li{
float: none;
}
</style>

<div id="cssmenu">
<ul>
<li class="active "><a href="#"><span>Home</span></a></li>
<li class="has-sub "><a href="#"><span>Templates</span></a>
<ul>
<li><a href="#"><span>Blogger</span></a></li>
<li><a href="#"><span>WordPress</span></a></li>
</ul>
</li>
<li><a href="#"><span>Write For Us</span></a></li>
<li><a href="#"><span>Sitemap</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Privacy</span></a></li>
<li><a rel="author" href="#"><span>About</span></a></li>
</ul>
</div>

<style>
#menubar{
width:920px;
height:38px;
background:#0d0d0d;
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:#fff;
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:#000000;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:35px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:37px;
border:1px solid #de360f;
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 #F0512D;
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 #F0512D;
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;
}
</style>

<div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='/'>Edit me 1</a></li>
<li><a href='/'>Edit me 2</a></li>
<li><a href='http://toolsinfor.blogspot.com/'>Edit me 3</a>
<ul>
<li><a href='http:/'>Sub menu 1</a></li>
<li><a href='http:/'>Sub menu 2</a></li>
</ul>
</li>
<li><a href='http:/'>Edit me 4</a></li>
<li><a href='http:/'>Edit me 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/AVvXsEhVqPQ1mbglEXnzBXwLalEh6si8VzzZLXM4AYU6l7B-SNJykwgy4_ZWlidJ8VmIB5osoahfcEM4_-i5MiM7TY-JcoK2FRbQzapXqq_i25yZhYHcCv7BztvTVBqP1fj5TXo6yiZf-oEgpSk/s200/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:4px; padding-right:3px;' type='image'/>
</form>
</div>
</div>
</div>
</div>