Membuat "Menu Navigasi Horizontal" pada Blogspot.com

Pada beberapa template Blogger hasil mengunduh dari layanan penyedia template Blogger gratisan kita dapat menemukan adanya menu navigasi horizontal dengan sub menu-sub menu vertikal. Tetapi ada juga template blog yang tidak menyediakan fitur ini, sehingga banyak sobat blogger yang kebingungan untuk membuat "Menu Navigasi Horizonta" pada blog mereka. Pada tips kali ini saya memberikan tips dengan menampilkan menu horizontal yang dilengkapi dengan Sub menu vertikal, Dapat dilihat pada Blog ini.

Jika sobat blogger belum mempunyai fitur ini, silahkan ikuti langkah-langkah berikut ini.

1. Login ke blogger.com dengan account anda,

2. Pada Template blog anda, silahkan cari kode ]]></b:skin>

3. Setelah ketemu dengan kode tersebut, Kopi dan Pastekan kode di bawah ini tepat di ATAS kode ]]></b:skin>

#NavbarMenu {
background: #000;
width: 400px;
height: 10px;
font-size: 11px;
font-family: Trebuchet MS, Tahoma, Verdana;
color: #fff;
margin: 0px;
padding: 0px;
}

#NavbarMenuleft {
width: 400px;
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 {
background: #222222;
height: 15px;
color: #fff;
display: block;
font-size: 11px;
font-family: trebuchet ms, ;
text-transform: none;
text-decoration: none;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
border-right: 1px solid #000;}

#nav li a:hover, #nav li a:active {
background: #222222;
color: #ffffff;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
text-decoration: none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 150px;
color: #222222;
font-size: 11px;
font-family: trebuchet ms,;
font-weight: normal;
text-transform: none;
float: none;
margin: 0;
padding: 7px 10px;
border: 1px solid #000;
}

#nav li li a:hover, #nav li li a:active {
background: #222222;
color: #ffffff;
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;
}

4.Kemudian Simpan Teplate.

5. Setelah selesai dari Teplate, Sekarang pilih Tata Letak.

6. Kemudian pilih Tambah Gadget.

7. Kemudian pilih HTML/JavaScript.

8. Kopi dan Patekan kode berikut ini ke dalam kotak HTML/JavaScript

<div class='menuhorisontal'>

<ul id='nav'>

<li><a href='url Blog Kamu'>Beranda</a></li>

<li><a href='url menu 2'>MENU 2</a>

<ul>

<li><a href='url sub menu 2.1'>SUB MENU 2.1</a></li>

<li><a href='url sub menu 2.2'>SUB MENU 2.2</a> </li>

<li><a href='url sub menu 2.dst'>SUB MENU 2.dst</a></li>

</ul>

</li>

<li><a href='url menu 3'>MENU 3</a>

<ul>

<li><a href='url sub menu 3.1'>SUB MENU 3.1</a></li>

<li><a href='url sub menu 3.2'>SUB MENU 3.2</a> </li>

<li><a href='url sub menu 3.dst'>SUB MENU 3.dst</a></li>

</ul>

</li>

<li><a href='url menu 4'>MENU 4</a>

<ul>

<li><a href='url sub menu 4.1'>SUB MENU 4.1</a></li>

<li><a href='url sub menu 4.2'>SUB MENU 4.2</a> </li>

<li><a href='url sub menu 4.dst'>SUB MENU 4.dst</a></li>

</ul>

</li>

<li><a href='url menu dst'>Tips Blogspot</a><li>

</li></li></ul>

</div>

9.Kemudian silahkan edit kode yang berwana Merah, sesuai dengan keinginan sobat.

10. Setelah selesai melakukan pengEditan, silahkan di Save. Lihat Perubahan pada blog anda.

Selamat mencoba, semoga bermanfaat dan mohon maaf jika ada kesalahan. Terima Kasih.