menu

Minggu, 29 Mei 2011

Membuat menu horizontal sebenarnya ada banyak alternatif, untuk kali ini kita akan mencoba membuat jenis menu horizontal type professional dropdown, sebagaimana namanya tentunya ini akan membuat blog/site kita menjadi lebih tampak professional.


Cara Memasang Menu Horizontal  Dropdown

Langkah Pertama
  • Login ke akun Blogger kamu.
  • Dari halaman dashboard, pilih Edit HTML.
  • Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
  • Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut.
/* menu horizontal Professional dropdown */
#bg_nav {
background: #FFEE00 url(http://i291.photobucket.com/albums/ll311/caprt3a/New/bg_headyellow.gif); /* kuning_warna background dasar */
width: 960px; /* Panjang dari kotak menu dasar */
height: 29px;
font-size: 10px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: 28px;
margin: 0px auto 0px;
padding: 0px;
overflow: hidden;
-moz-border-radius:3px;
} 

#bg_nav a, #bg_nav a:visited { /* bagian script yang ini dibiarkan saja ya */
color: #ffffff;
font-size: 10px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
}
#bg_nav a:hover { /* bagian script yang ini dibiarkan saja ya */
color: #ffffff;
text-decoration: underline;
padding: 0px 0px 0px 0px;
}
#navleft {
width: 960px;
color: #FFFFFF;
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 { /* Menu Utama */
background: #FFEE00 url(http://i291.photobucket.com/albums/ll311/caprt3a/New/bg_headyellow.gif); /*Kuning_warna latar menu utama */
color: #0000FF; /*PUTIH_warna teks menu utama */
text-shadow: 0px 0px 0px #; /* Memberi efek bayangan di teks */
display: block;
height: auto; 
width: auto;
font-weight: bold;
margin: 0px auto 0px;
-moz-border-radius:0px;
padding: 8px 15px 8px 15px;
opacity: 0.8;filter:alpha(opacity=80);zoom:1;
}
#nav a:hover {
background: #FF0000 url(http://i291.photobucket.com/albums/ll311/caprt3a/New/box_blue1.jpg); /*Kuning cerah_warna hover di Menu Utama*/
color: #FFFFFF; /* PUTIH_warna teks di menu drop-down n teks hover MU*/
margin: 0px auto 0px;
font-weight: bold;
padding: 8px 15px 8px 15px;
text-decoration: none;
-moz-border-radius:0px;
opacity: 1.0;filter:alpha(opacity=100);zoom:1;
}
#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 300px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #FFFD00 url(http://i291.photobucket.com/albums/ll311/caprt3a/New/box_red1.jpg); /*kuning cerah_warna latar menu drop-down*/
border-top:0px solid #FF0000;border-bottom:0.5px solid #FF0000;
border-left:0.5px solid #FF0000;border-right:0.5px solid #FF0000;
width: 200px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;000000;
}
#nav li li a:hover, #nav li li a:active {
background: #FF00FB url(http://i291.photobucket.com/albums/ll311/caprt3a/New/box_blue1.jpg); /*kuning cerah2_warna hover menu drop-down*/
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;
}
#nav li ul a {
width: 100px;
}
#nav li ul ul {
position: absolute;
margin: -30% 0 0 95%;
}
#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 li li.sfhover ul {
left:auto;
}
#nav li:hover, #nav li.sfhover {
position:static;
}
/* eleman dibawah header */
#under_header{
margin:20px 0 25px 0px;
padding:0px;
height;0px;
width:100%;
}
  • Lalu simpan...

Keterangan :
  • Warna Merah, Background image menu
  • Warna Hijau,  Lebar dan tinggi menu
    Langkah kedua
    1. Klik Page Element
    2. Klik Add Gadget
    3.   AddGadget
    4. Klik plus button (+) for HTML/JavaScript. (img)

      HTML 
    5. Copy and paste kode dibawah ini
    6. </div><div id='bg_nav'>

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

      <ul>

      <li><a href='http://caprt3a.blogspot.com/' target='_blank'><img src='http://i291.photobucket.com/albums/ll311/caprt3a/045.png'/> Home</a></li>

      <li><a href='####' target='_blank'> Blogging</a>

      <ul>

      <li><a href='http://www.blogger.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Login ke blogger</a></li>

      <li><a href='http://www.blogger.com/profile/05708524382495951672' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> blogger profil</a></li>

      <li><a href='http://www5.shoutmix.com/?pumitabusan' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Blog Walking</a></li>

      </ul></li>

      <li><a href='http://www.jquery.com' target='_blank'> JQuery</a>

      <ul>

      <li><a href='http://caprt3alyric.blogspot.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Gudang Widgets</a></li>

      </ul></li>

      <li><a href='URL tujuan utk menu 2'> Tool</a>

      <ul>

      <li><a href='http://www.colorpicker.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> color picker</a></li>

      <li><a href='http://centricle.com/tools/html-entities/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Encode/Decode HTML Entities</a></li>

      <li><a href='http://www.iconfinder.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Icon Finder</a></li>

      <li><a href='http://translate.google.co.id/#' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Translator</a></li>

      <li><a href='http://myspace.laymark.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Smiley Emotion</a></li>

      <li><a href='http://sites.google.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Site</a></li>

      </ul></li>



      <li><a href='#' target='_blank'> Download/Upload</a>

      <ul>

      <li><a href='http://www.filehippo.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> FileHippo</a></li>

      <li><a href='http://www.ziddu.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> ziddu</a></li>

      </ul></li>

      <li><a href='#' target='_blank'> <blink>MAU DUIT</blink></a>

      <ul>

      <li><a href='http://www.neobux.com/?r=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Neobux</a></li>

      <li><a href='http://www.idr-clickit.com/register.php/wong284.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> idr-clickit</a></li>

      <li><a href='http://www.donkeymails.com/pages/index.php?refid=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> DonkeyMails</a></li>

      <li><a href='https://www.vipclix.com/?ref=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> vipclix</a></li>

      </ul></li>
      <li><a href='http://caprt3alyric.blogspot.com/2010/08/cara-membuat-menu-horizontal-drop-down.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow003.gif'/> Buat Menu drop-down seperti ini</a></li>
      </ul>
      </div>
      </div>
      </div>
      </div>
        • Simpan dan lihat hasilnya.

        Keterangan :
        • Warna Merah, Alamat URL yang akan kamu tuju sesuai dengan nama menu 
        • Warna Hijau,  Nama nama menu sesuai dengan kebutuhan



        Ok.. Selamat mencoba..!!!
        Simpan dan lihat hasilnya.
    Diposting oleh as di 21.05

    0 komentar:

    Posting Komentar