Selasa, Agustus 23, 2011

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;
}

KET :
atau apabila ada kesusahan mencarinya letakan saja tepat dibawah kode

7. Simpan Template dan Lihatlah Hasilnya.
Judul: Cara Membuat Menu Horizontal Drop Down
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh Unknown

Terimakasih atas kunjungan Sobat beserta kesediaan Anda membaca artikel ini. Kritik dan Saran sobat dapat sampaikan melalui Kotak komentar dibawah ini.

Tidak ada komentar: