Cara membuat menu navigasi drop down horizontal pada blogspot

Cara membuat menu navigasi drop down horizontal pada blogspot

Banyak para blogger yang menginginkan jenis menu navigasi seperti ini, untuk menunjang kategori/ label agar para pengunjung akan lebih mudah mencari informasi yang di inginkannya. Banyak cara-cara yang berbeda dalam Cara membuat menu navigasi drop down horizontal pada blogspot ini. Namun hasil yang di dapatkan tidak jauh berbeda.

Oke teman-teman kita akan mulai membuat menu navigasi dropdown...

Cekidot dulu contohnya...

Sebelum anda mulai, sebaiknya backup template anda dengan cara mendownloadnya...
Langkah awal teman-teman harus masuk Dashboard lalu pilih Design >> Edit HTML
selanjutnya cari kode ][></b:skin> (biar gampang "ctrl + f" aja di edit html)

copy kode dibawah ini lalu paste tepat diatas kode  ][></b:skin>

/*--------- Navigasi Dropdown Menu -------*/
#navdropdownmenu{
background:#106F36;
width:100%;
height:auto;
margin:0;
padding:0;
}
#navdropdownmenu ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#navdropdownmenu li{
list-style:none;
float:left;
}
#navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{
color:#ffffff;
display:block;
padding:9px 10px 9px 10px;
font-size: 12px;
font-family: Tahoma, Lucida Grande, Trebuchet MS, Serif; /* Jenis font */
text-decoration:none;
}
#navdropdownmenu li a:hover{
background:#44ED6C;
color:#0D4A1C;
padding:9px 10px 9px 10px;
}
#navdropdownmenu li ul{
z-index:10;
position:absolute;
height:auto;
width:200px;
border-width:1px 0 0 0;
border-style:solid;
border-color:#18722D;
}
#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
float:none;
background:#106F36;
width:200px;
border-width:0 1px 1px 1px;
border-style:solid;
border-color:#0D4A1C;
}
#navdropdownmenu li ul li a:hover{
background:#0D4A1C;
color:#ffffff;
}
#navdropdownmenu li:hover ul, #navdropdownmenu li a:hover ul#submenu, #navdropdownmenu li:hover a:hover ul#submenu{
z-index:10;
position:absolute;
height:auto;
width:200px;
left:auto;
}
.hiddennav{
display:none;
}
.shownav{
display:block;
}

selanjutnya teman-teman copy kode dibawah ini lalu paste diatas kode </head>

<script>
var catatan = '';
function hideen(id)
{
var menu = document.getElementById(id);
var temanku = menu.className;
if (temanku == 'hiddennav') {
if (catatan != '') {
var asik = document.getElementById(catatan);
terlalu.className = 'hiddennav';
}
menu.className = 'shownav';
catatan = id;
} else {
menu.className = 'hiddennav';
}
}
function hideen2(id)
{
var menu = document.getElementById(id);
var temanku = menu.className;
if (temanku != 'hiddennav') {
if (catatan == '') {
var asik = document.getElementById(catatan);
terlalu.className = 'shownav';
}
menu.className = 'hiddennav';
catatan = id;
} else {
menu.className = 'shownav';
}
}
</script>

Oke temen-temen sebentar lagi anda akan memiliki menu navigasi yang cantik jelita...
hhehehehe

sekarang copy kode dibawah ini, paste tepat diatas kode <div id='content-wrapper'>

<div id='navdropdownmenu'>
      <ul id='navdropdownmenu'>
      <li><a href='#'>Home</a></li>
      <li onmouseout='hideen(&quot;submenu1&quot;)' onmouseover='hideen2(&quot;submenu1&quot;)'><a href='#'>Blogging</a>
      <div class='hiddennav' id='submenu1'>
      <ul>
      <li><a href='#'>Tutorial Blogspot</a></li>
      <li><a href='#'>Tutorial Wordpress</a></li>
      <li><a href='#'>SEO</a></li>
      <li><a href='#'>E-Book</a></li>
      </ul>
      </div>
      </li>
      <li onmouseout='hideen(&quot;submenu3&quot;)' onmouseover='hideen2(&quot;submenu3&quot;)'><a href='#'>Cerita Hidup</a>
      <div class='hiddennav' id='submenu3'>
      <ul>
      <li><a href='#'>Sejarah Dunia</a></li>
      <li><a href='#'>Asal-usul</a></li>
      <li><a href='#'>Ceritaku</a></li>
      </ul>
      </div>
      </li>
      <li><a href='#'>Privacy Policy</a></li>
      <li><a href='#'>Contact Us</a></li>
      <li><a href='#'>About Us</a></li>
      <li><a href='#'>Link Exchange</a></li>
      </ul>
      </div>

Keterangan :
-  Tanda # diganti dengan URL sesuai keinginan Anda

Oke sudah teman-teman saya berbagi cara membuat menu navigasi drop down horizontal pada blogspot

SILAHKAN LIKE POST INI JIKA ANDA MENYUKAINYA....

terima kasih atas kunjungannya di catatan runov