YARO STARAK BLUE PRINT

Yahoo bot last visit powered by  Bots Visit
Google bot last visit powered by Bots Visit
powered by PRBbutton
Personal Blogs - BlogCatalog Blog Directory
Blog Directory & Search engine
Minggu, 13 Juni 2010

MENU HORIZONTAL DROPDOWN SUB MENU

image

NB: tutorial ini sudah menggunakan editor baru blogger

Login ke bloger

rancangan

edit html

cari kode ]]></b:skin>

letakkan kode di bawah ini sebelum ]]></b:skin>

/* navbar
================== */
#bg_nav {
background: #000000;
width: 900px;                                                    /* ukuran lebar menu============ */
height: 23px;
font-size: 10px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px AUTO 0px;
padding-BOTTOM: 5px;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #FFFFFF;
font-size: 9px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #FFFFFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 990px;
float: left;
margin: 0px;
padding: 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav a, #nav a:visited {
background: #222222;
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #000000
}
#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}
#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #333333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#nav li li a:hover, #nav li li a:active {
background: #666666;
padding: 7px 30px 7px 10px;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

setelah itu simpan template dan lanjutkan tahap kedua

Langsung menuju ELEMENT HALAMAN, lalu TAMBAH GADGET pilih HTML/javascript

langsunga aja copy paste code di bawah ini

/* http://earning-news.blogspot.com
================== */

<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>

<ul>

   <li><a href='##'>MENU 1</a>
      <ul>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 1.A</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 1.B</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 1.C</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 1.D</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 1.E</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 1.F</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 1.G</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 1.H</a></li>
      </ul>
   </li>

   <li><a href='#'>MENU 2</a>
      <ul>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 2.A</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 2.B</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 2.C</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 2.D</a></li>
      </ul>
   </li>

   <li><a href='#'>MENU 3</a>
      <ul>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 3.A</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 3.B</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 3.C</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 3.D</a></li>
      </ul>
   </li>

   <li><a href='#'>MENU 4</a>
      <ul>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 4.A</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 4.B</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 4.C</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 4.D</a></li>
      </ul>
   </li>

   <li><a href='#'>MENU 5</a>
      <ul>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 5.A</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 5.B</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 5.C</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 5.D</a></li>
      </ul>
   </li>

   <li><a href='#'>MENU 6</a>
      <ul>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 6.A</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 6.B</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 6.C</a></li>
         <li><a href='http://earning-news.blogspot.com'>JUDUL SUB MENU 6.D</a></li>
      </li></ul>
   </li>

   <li><a href='http://earning-news.blogspot.com/2010/05/photobucket.html'>TUKAR LINK DAN BANNER</a>
</li></ul>

</div>
</div></div>

Anda hanya perlu mengganti link diatas dengan link anda. lalu simpan dan lihat hasilnya.  semoga bermanfaat dan jangan lupa tukaran link ya…. tinggalkan pesan di kotak pesan saya. terima kasih kunjungannya. 

http://earning-news.blogspot.com

0 komentar:

Posting Komentar

Posting yang berkaitan

TUKARAN LINK SILAHKAN COPY LINK DI BAWAH INI

Ą