Cara Mudah Membuat Menu Navigasi

Tidak panjang lebar gan. Saya akan share cara membuat menu navigasi sederhana di blog. Ikuti langkah berikut. Masuk ke blogger - Klik Template

Masukkan kode berikut di atas kode ]]></b:skin>

#nav{ height:34px;  margin:0px 10px 0px 10px;  background:#fff;  -moz-border-radius-bottomright:10px;  -moz-border-radius-bottomleft:10px;  display:block;  padding:0px 0 0px 0px;  font:12px Georgia,Century gothic,verdana,Arial,sans-serif;  font-weight:normal;  text-transform:uppercase}
.jqueryslidemenu{ font:bold 10px Verdana;  background:#000;  width:100%;  margin-left:5px}
.jqueryslidemenu ul{ margin:0;  padding:0;  list-style-type:none}
.jqueryslidemenu ul li{ position:relative;  display:inline;  float:left}
.jqueryslidemenu ul li a{ display:block;  background:#444;  color:white;  padding:8px 10px;  border-right:1px solid #778;  color:#2d2b2b;  text-decoration:none}
* html .jqueryslidemenu ul li a{ display:inline-block}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ color:white}
.jqueryslidemenu ul li a:hover{ background:black;  color:white;  background:-moz-linear-gradient(top,#000,#5e5e5e);  background:-webkit-gradient(linear,center top,center bottom,from(#000),to(#5e5e5e))}
.jqueryslidemenu ul li ul{ position:absolute;  left:0;  display:block;  visibility:hidden}
.jqueryslidemenu ul li ul li{ display:list-item;  float:none}
.jqueryslidemenu ul li ul li ul{ top:0}
.jqueryslidemenu ul li ul li a{ font:bold 10px Verdana;  width:170px;  padding:5px;  margin:0;  border-top-width:0;  border-bottom:1px solid gray}
.jqueryslidemenuz ul li ul li a:hover{ background:#414141;  color:black}
.downarrowclass{ position:absolute;  top:12px;  right:7px}
.rightarrowclass{ position:absolute;  top:6px;  right:5px}

Masukkan kode di bawah ini sebelum kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'></script>
<script src='http://sites.google.com/site/kianbersama/javascript/slide.js' type='text/javascript'></script>

Selanjutnya

<div id='nav'>
<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='LINK-URL'>NAME</a>
<ul>
<li><a href='LINK-URL'>NAME</a></li>
<li><a href='LINK-URL'>NAME</a></li>
<li><a href='LINK-URL'>NAME</a></li>
</ul></li>
<li><a href='LINK-URL'>NAME</a>
<ul>
<li><a href='LINK-URL'>NAME</a></li>
<li><a href='LINK-URL'>NAME</a></li>
<li><a href='LINK-URL'>NAME</a></li>
</ul></li>
</ul></div></div>

Letakkan dibawah kode <div id='wrapper'> atau <div id='outer-wrapper'>.

Ganti LINK-URL dan NAME dengan alamat link dan judulnya.
Selamat mencoba dan sukses selalu.

keep spirits and do the best