01 April 2010

Cara Membuat Menu Horizontal Drop Down

Oke kawan kita ketemu lagi ya, semoga pertemuan ini dapat menjadi salah satu ilmu yang bermanfaat demi kemajuan blogger indonesia. oke langsung saja hari ini saya akan memcoba membuat menu horizontal drop down, bagi teman - teman yang ingin membuat menu horizontal drop down silahkan coba cara berikut ini yang saya kutip dari tutorial-website:

Sebelum menjalankan langkah dibawah ada baiknya untuk membeckup template kesayangan dengan cara klik Download Template Lengkap pada Edit HTML.
dan apabila sudah melakukan langkah diatas langsung kita olah TKP :

1. Masuk ke halaman Dasboard > Tata Letak > Edit HTML > Ceklist 'Expand Template Widget'.

2. Gunakan Ctr+f pada kyboard untuk mencari ( Find ) kode.

3. Copy Paste kode berikut diatas kode </head>

<script type="text/javascript"
src="http://nestoriko.googlepages.com/chrome.js">
</script>

4. Setelah itu tambahkan kode CSS berikut diatas kode ]]></b:skin>


.chromestyle{
width: 100%;
font-weight: bold;
}

.chromestyle:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(http://nestoriko.googlepages.com/chromebg2.gif) center center repeat-x;
padding: 4px 0;
margin: 0;
text-align: left;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #B5E2FE;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: url(http://nestoriko.googlepages.com/chromebg2-over.gif) center center repeat-x;
}

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #B5E2FE;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA
,direction=135,strength=4);
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #B5E2FE;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{
background-color: #EBF7FF;
}


5. Jika langkah diatas telah selesai, sekarang carilah kode seperti ini :

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

6. Dan Copy Pastekan kode berikut tepat dibawah kode diatas :

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://rifweb.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Menu1</a></li>
<li><a href="#" rel="dropmenu2">Menu2</a></li>
</ul>
</div>

<!--menu drop down pertama -->
<div id="dropmenu1" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>


<!--menu drop down kedua -->
<div id="dropmenu2" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>



KET :
atau apabila ada kesusahan mencarinya letakan saja tepat dibawah kode </header>

7. Simpan Template dan Lihatlah Hasilnya.

Cara Membuat Menu Horizontal Drop Down Rating: 4.5 Diposkan Oleh: Sarifa Marwa

12 komentar:

  1. Wah cukup bagus mas triknya... Tx yaw

    ReplyDelete
  2. Salam Kenal. dengan sesama newbie, kita harus saling komentar. hehehehe

    ReplyDelete
  3. praktek lgsng okey....!!!
    thanks ilmunya....

    http://kitakanfren.blogspot.com

    ReplyDelete
  4. thanks mas... sudah saya coba, kira2 warna drop down menu ini bisa diganti gak yha? soalnya agak kontras sama warna blog ku ^^

    trims...

    http://shreddysteff.blogspot.com/

    salam kenal

    ReplyDelete
  5. naaaah ,,,niiiih yg Q cari... mkasih yaw bro ...

    ReplyDelete
  6. makasih infonya... mau coba noh

    ReplyDelete
  7. kok submenu jauh banget sama menu utamanya biar d dekatkan caranya gimana ?

    ReplyDelete

Komentar Spam, Link Aktif, dan URL Blog Takkan Muncul. Tidak semua pertanyaan sempat/bisa dijawab.