GALERY TEKNOLOGI

Informasi dan Ulangan tentang teknologi terbaru

Selasa, 24 Juli 2012

Home » » Cara Memasang Menu Horizontal Dropdown

Cara Memasang Menu Horizontal Dropdown

  Sunarno.S.Kom       Selasa, 24 Juli 2012

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

<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..!!!
logoblog

Terima Kasih Telah Membaca Cara Memasang Menu Horizontal Dropdown

Previous
« Prev Post
Next
Next Post »
Label:

Tidak ada komentar:

Posting Komentar

Selamat datang di Galery Teknologi

Copyright © GALERY TEKNOLOGI. All rights reserved. Template by CB Blogger | Link Sepakbola GP