Sedikit penjelasan dari saya,
menu drop down adalah menu yang mempunyai sub-sub menu di dalamnya. Prisipnya adalah ketika pointer menyorot sebuah
main menu, maka akan muncul
sub menu dari
main menu tersebut.
“Lantas, bagaimana cara menambahkan menu drop down pada blog kita?”Berikut langkah-langkahnya, ikuti saja! :)
Silahkan Anda
Login terlebih dahulu ke
BloggerKlik menu
Tata Letak dan pilih sub menu
Edit HTML dan beri tanda centang pada kotak kecil disamping tulisan
Expand Template WidgetJangan lupa untuk membackup terlebih dahulu
template Anda agar jika terjadi kesalahan bisa dikembalikan lagi pada kondisi semula. Anda tinggal klik
Download Template LengkapLalu, copy paste kode berikut di atas tag
</head><script type="text/javascript"
src="http://nestoriko.googlepages.com/chrome.js">
</script>
Cari kode
]]></b:skin> kemudian tambahkan
struktur CSS di bawah ini dengan mengcopy paste di atas 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: center;
}
.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;
}
Cari struktur seperti di bawah ini pada
template Anda
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
Jika sudah ketemu, copy paste struktur berikut ini tepat di bawah struktur yang Anda temukan pada langkah 6.
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://blogdoodey.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>
Coba perhatikan tulisan yang berwarna merah struktur tersebut. Tulisan "
dropmenu1" dan "
dropmenu2" tersebut merupakan atribut
rel dari
parent menu drop down yang kita buat. Pada bagian tersebut terlihat bahwa terdapat
2 menu drop down, yaitu "
Menu1" dan "
Menu2" (warna biru). Jika Anda ingin menambah
menu drop down lagi misalnya "
Menu3", maka buatlah juga
atribut rel untuk "Menu3" tersebut misalnya "
dropmenu3", setelah itu tambahkan struktur
menu drop down untuk "Menu3" setelah
menu drop down kedua". Sehingga strukturnya akan menjadi :
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://tutorial-website.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Menu1</a></li>
<li><a href="#" rel="dropmenu2">Menu2</a></li>
<li><a href="#" rel="dropmenu3">Menu3</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>
<!--menu drop down ketiga-->
<div id="dropmenu3" 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>
Perhatikan bahwa nama
atribut ID untuk
menu drop down ketiga harus sama dengan nama
atribut rel untuk "
Menu3" yaitu "
dropmenu3". Begitu pula jika Anda ingin menambah
menu drop down keempat, kelima, dan seterusnya.
"
URL sub menu1" merupakan
URL halaman yang akan dituju jika "Sub Menu1" diklik, dan seterusnya. Silahkan pembaca ganti nama menu, sub menu, dan juga URL dari menu drop down tersebut.
Nah, begitulah tips dari saya hari ini tentang bagaimana cara membuat
menu dropdown. Jika mungkin ada yang ingin ditanya dan ada yang ingin memberikan saran dan masukan, Anda cantumkan saja ke kotak komentar, dan pasti akan saya baca. Ok. :)
Selamat mencoba!
Terima kasih.
