Menu Horizontal Style R-E

 

Syalom..., Puji Tuhan iseng-iseng buat menu sendiri e... jadi juga. Karena itulah menu ini saya namain "Menu Horizontal Style R-E",  tutorial cara membuatnya saat ini saya mo sharekan ma sobat semua, ini langkah-langkahnya: 

1. Masuk keakun blogger sobat
2. Setelah itu Klik design -> Edit HTML
3. Kemudian masukkan kode CSS nya di atas kode ]]></b:skin

/*-- (Menu/Nav) --*/
#nav-element{width:900px; margin:0; padding:0px 0 0px 0; float:center}
#nav{background:#0A2A0A; height:32px; padding:4px 0 0; margin-bottom:0px; clear:both; margin:0 auto; -webkit-border-radius: 7px;-moz-border-radius: 7px; border-radius: 7px;}
#nav-left{float:left; display:inline; width:660px; padding-left:6px; padding-top:1px}
#nav-right{float:right; display:inline; width:200px;  padding-top:3px; padding-right:6px}
#nav ul{float:left;list-style:none;margin:0;padding:0;font:1.0em Verdana,Arial,Helvetica,sans-serif;font-weight:bold}
#nav li{list-style:none;margin:0;padding:0}
#nav li a,#nav li a:link,#nav li a:visited{display:block; color:#fff; margin:1px 4px; padding:4px 4px; text-decoration:none;}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{color:#fff; background-color:#999; margin:1px 3px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;  -khtml-border-radius:3px 3px 3px 3px;  -webkit-border-radius:3px 3px 3px 3px;  border-radius:3px 3px 3px 3px}
#nav li a:hover,#nav li a:active{background-color:#222; color:#fff; background-color:#999; margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;  -khtml-border-radius:3px 3px 3px 3px;  -webkit-border-radius:3px 3px 3px 3px;  border-radius:3px 3px 3px 3px;text-decoration:none}
#nav li li a,#nav li li a:link,#nav li li a:visited{background:transparent;color:#fff;font-size:12px;text-transform:none;float:none;margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;  -khtml-border-radius:3px 3px 3px 3px;  -webkit-border-radius:3px 3px 3px 3px;  border-radius:3px 3px 3px 3px;}
#nav li li a:hover,#nav li li a:active{background-color:#222; color:#fff; background-color:#999; margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;  -khtml-border-radius:3px 3px 3px 3px;  -webkit-border-radius:3px 3px 3px 3px;  border-radius:3px 3px 3px 3px;}
#nav li{float:left;padding:0}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:167px; background: #424242;margin:0px; padding:4px; -webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}
#nav li ul a{width:156px;margin-bottom:2px;}
#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}
/*-- (Menu/Nav) --*/
#nav-element{width:900px; margin:0; padding:0px 0 0px 0; float:center}
#nav{background:#0A2A0A; height:32px; padding:4px 0 0; margin-bottom:0px; clear:both; margin:0 auto; -webkit-border-radius: 7px;-moz-border-radius: 7px; border-radius: 7px;}
#nav-left{float:left; display:inline; width:660px; padding-left:6px; padding-top:1px}
#nav-right{float:right; display:inline; width:200px;&nbsp; padding-top:3px; padding-right:6px}
#nav ul{float:left;list-style:none;margin:0;padding:0;font:1.0em Verdana,Arial,Helvetica,sans-serif;font-weight:bold}
#nav li{list-style:none;margin:0;padding:0}
#nav li a,#nav li a:link,#nav li a:visited{display:block; color:#fff; margin:1px 4px; padding:4px 4px; text-decoration:none;}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{color:#fff; background-color:#999; margin:1px 3px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;&nbsp; -khtml-border-radius:3px 3px 3px 3px;&nbsp; -webkit-border-radius:3px 3px 3px 3px;&nbsp; border-radius:3px 3px 3px 3px}
#nav li a:hover,#nav li a:active{background-color:#222; color:#fff; background-color:#999; margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;&nbsp; -khtml-border-radius:3px 3px 3px 3px;&nbsp; -webkit-border-radius:3px 3px 3px 3px;&nbsp; border-radius:3px 3px 3px 3px;text-decoration:none}
#nav li li a,#nav li li a:link,#nav li li a:visited{background:transparent;color:#fff;font-size:12px;text-transform:none;float:none;margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;&nbsp; -khtml-border-radius:3px 3px 3px 3px;&nbsp; -webkit-border-radius:3px 3px 3px 3px;&nbsp; border-radius:3px 3px 3px 3px;}
#nav li li a:hover,#nav li li a:active{background-color:#222; color:#fff; background-color:#999; margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;&nbsp; -khtml-border-radius:3px 3px 3px 3px;&nbsp; -webkit-border-radius:3px 3px 3px 3px;&nbsp; border-radius:3px 3px 3px 3px;}
#nav li{float:left;padding:0}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:167px; background: #424242;margin:0px; padding:4px; -webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}
#nav li ul a{width:156px;margin-bottom:2px;}
#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}

Selanjutnya masuk  -> Design -> add Widget -> pilih widegt HTML/Javascript kemudian masukkan kode dibawah ini :

<div id='nav-element'>

<div class='widget-content'>

<div id='nav'>

<div id='nav-left'>

<ul>

<li><a href='http://www.dematica.blogspot.com/'>HOME</a></li>

</ul>

<li><a href='link tujuan'>MAIN MENU </a>

<ul>

<li><a href='#'>ILLUSTRASI</a></li>

<li><a href='#'>RENUNGAN</a>

<ul>

</ul></li>

<li><a href='#'>HUMOR</a></li>

</ul>

</li>

<li><a href='link tujuan'>Free DOWNLOAD</a>

<ul>

<li><a href='#'>SOFTWARE</a></li>

<li><a href='#'>LYRICK & MP3</a></li>

<li><a href='#'>GAMES</a>

<ul>

</ul></li>

<li><a href='#'>TEMPLATE'S</a></li>

</ul>

<li><a href='#'>B'TUTORIAL</a></li>

<li><a href='#' title='link-title'>CONTACT US</a></li>

<li><a href='#' title='link-title'>DAFTAR ISI</a></li>

<li><a href='#'></a><ul>

<li><a href='#'>Page</a>

<ul>

<li><a href='#'>Page</a></li>

<li><a href='#'>Page</a></li>

</ul>

</li>

<li><a href='#'>Page</a></li>

<li><a href='#'>Page</a></li>

</ul></li>

<script language='javascript'>setPage()</script>
</div>
<div id='nav-right'>
<div id='tsrc-m'>
<div id='src-m'>
<form action='/search' id='searchform' method='get' name='searchform'>

<input id="searchbox" maxlength="160" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" value="Search..." type="text" />
<input class="btn" name="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEm7ls5mwxdBqdQgecK_pHBTUYgTBS_N7FnI8jx5gsOh4knWqu_RVsiJ7SZyVQOyJbKAbSyFEjSJi9uxe1n33sgtVpzbjiw3HGd0SKTKmRLv6AT61fjShBNL7lGDnIR4vIMzvAhjBlK4U0/s1600/1zehw2f_th.jpg.png" style='border: 0pt none ; vertical-align: top; padding-top:3px' value="Go" type="image" />
</form>
</div>
</div>
</div>
</div>
</div>
</div>

Selesai Klik Save Template

-- Selamat mencoba --