Membuat menu horizontal

Untuk membuat Menu horizontal ini terdiri dari CSS dan HTML. Kode CSS adalah kerangka dari menu horizontal itu sendiri, sementara kode HTML berfungsi untuk menampilkan struktur menu yang akan anda masukkan pada menu horizontal tersebut.

untuk lebih jelasnya langsung saja ke TKP :

Langkah pertama Login pada blog yang ingin sobat pasang Menu horizontal, kemudian pada menu dashbord pilih template lalu pada menu template sobat pilih menu Edit HTML. lanjutkan, jangan lupa mencentang kotak Expand Widget.

jika langkah pertama sudah sobat lakukan, kini sobat cari kode ]]></b:skin> kemudian Copy/Paste kode CSS yang dibawah ini tepat di atas kode ]]></b:skin> 

/* ------ navbar ------------- */
#navbar-iframe, .widget-item-control{display:none!important}
body{color:#333;font-size:12px;font-family: Futura Md BT,Comic Sans MS,verdana,Sans-erif;margin:0 auto;padding:0}
#NavbarMenu{width:890px;height:32px;background: #333;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;margin:2px auto;}
#NavbarMenuleft{width:100%;float:left;margin:0;padding:0}
/*-- (Menu/Nav) --*/
#nav{z-index:1;background: #333; padding:2px 0 5; margin-bottom:0px; clear:both; margin:0 auto;height:32px;}
#nav,#nav ul{list-style-type:none;list-style-position:outside;position:relative;text-align:left;font-size:12px;font-family:Arial;padding:0px 1px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
#nav a{height:24px;display:block;color:#fff;text-decoration:none;background:none;padding:5px 6px 1px 6px;border-left:1px solid #444; border-right:1px solid #222;}
#nav a:hover{ color:#e5e5e5;}
#nav li{float:left;position:relative;padding:0px 0px}
#nav ul{position:absolute;display:none;top:100%;width:164px;left:0;background:#333;border-top:1px solid #444; border-bottom:1px solid #222;}
#nav li ul a{border-top:1px solid #444; border-bottom:1px solid #222;width:150px;float:left;}
#nav ul ul{top:auto;background:none}#nav li ul ul{left:11.76em;background:#333;margin:0px 0px 0px}
#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li:hover ul ul ul ul{display:none}
#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block}
/* ------ end navbar ------------- */

Untuk memanggil kode CSS yang diatas sobat cukup memasang kode scrip dibawah ini pada gadget, caranya sebagai berikut :

1. masuk ke menu Layout Blogger lalu pilih Add a Gadget > HTML/Javascript
2. Copy kode HTML diatas dan paste dikolom HTML/Javascript.  

<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='#'>Depan</a></li>
<li><a href='#'>Tentang Kami</a></li>
<li><a href='#'>Syarat dan Ketentuan</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Order</a></li>
<li><a href='#'>Cara Order</a></li>
<li><a href='#'>Hubungi Kami</a></li>
<li><a href='#'><blink>promo</blink></a></li>
</ul> </div> </div>

3. Simpan, dan selesai.

Keterangan...