Memasang Menu Drop Down Pada blog

Membuat menu dropdown akan merapikan blog. Anda ingin membuatnya juga di blog anda? Yang pertama itu kamu harus upload dulu gambar untuk gambar menunya ke situs photosharing semisal photobucket atau imageshack. Lanjut?

Ukurannya terserah toh nanti bakal diatur juga lewat javascript tapi jangan kegedean juga, tar uploadnya malah jadi berat. Bikin aja ukurannya kira-kira 200 x 75.

Login Blogger-Rancangan-Edit HTML-Download Template-centang Expand Template Widget. Setelah itu cari kode berikut di Blog anda dengan menekan F3 untuk mempermudah pencarian. Cari kode ini:

<title><data:blog.pageTitle/></title>

Apa udah ketemu? Selanjutnya copy kode berikut dan pastekan di bawah kode <title><data:blog.pageTitle/></title> tadi:

<script>
var last_expanded = '';
function showHide(id)
{
var obj = document.getElementById(id);
var status = obj.className;
if (status == 'hide') {
if (last_expanded != '') {
var last_obj = document.getElementById(last_expanded);
last_obj.className = 'hide';
}
obj.className = 'show';
last_expanded = id;
} else {
obj.className = 'hide';
}
}

</script>


Jika telah selesai lanjutkan ke langkah berikutnya dengan mencari kode berikut:
]]></b:skin>

Copy kode berikut dan pastekan di atas kode ]]></b:skin> tadi:

.ogah{
background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif');
text-align:center;
width:90%;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom: 10px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
}

.ogahniye{
background-image: url('http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif');
text-align:center;
width:90%;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:13px;
padding-bottom: 10px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
}

.hide{
display: none;
}

.show{
display: block;
}


a{cursor: hand}

Ganti kode berwarna hijau dengan alamat gambar ada. Jika telah selesai klik Save atau Simpan Template.

Langkah berikutnya pindah ke menu Elemen Laman dan klik Tambah Gadget pilih HTML/Java dan masukkan kode berikut ini:

<a class="ogah" onclick="showHide('ogahku1')">Nama Kategori</a>
<div id="ogahku1" class="hide">
<a href="#" class="ogahniye">Nama Link</a>>
<a href="#" class="ogahniye">Nama Link</a>
<a href="#" class="ogahniye">Nama Link</a>
<a href="#" class="ogahniye">Nama Link</a>
</div>
<a class="ogah" onclick="showHide('ogahku2')">Nama Kategori </a>
<div id="ogahku2" class="hide">
<a href="#" class="ogahniye">Nama Link</a>
<a href="#" class="ogahniye">Nama Link</a>
<a href="#" class="ogahniye">Nama Link</a>
<a href="#" class="ogahniye">Nama Link</a>
</div>
<a class="ogah" onclick="showHide('ogahku3')">Nama Kategori </a>
<div id="ogahku3" class="hide">
<a href="#" class="ogahniye">Nama Link</a>
<a href="#" class="ogahniye">Nama Link</a>
<a href="#" class="ogahniye">Nama Link</a>
<a href="#" class="ogahniye">Nama Link</a>
</div>
<a class="ogah" onclick="showHide('ogahku4')">Nama Kategori </a>
<div id="ogahku4" class="hide">
<a href="#" class="ogahniye">Nama Link</a>
<a href="#" class="ogahniye">Nama Link</a>
<a href="#" class="ogahniye">Nama Link</a>
<a href="#" class="ogahniye">Nama Link</a>
</div>


Klik Save.

Catatan:
1. Tanda # ganti dengan alamat link
2. Nama Link ganti dengan nama label anda
3. Nama Kategori ganti dengan nama kategori label anda.
4. Jika ingin menambah bar label cukup copy pastekan kode:
<a href="#" class="ogahniye">Nama Link</a>
5. Jika ingin menambah bar nama kategori cukup copy pastekan kode:
<a class="ogah" onclick="showHide('ogahku4')">Nama Kategori </a>
<div id="ogahku4" class="hide">
<a href="#" class="ogahniye">Nama Link</a>
<a href="#" class="ogahniye">Nama Link</a>
<a href="#" class="ogahniye">Nama Link</a>
<a href="#" class="ogahniye">Nama Link</a>
</div>
6. Pengaturan kode dapat anda lakukan sendiri sesuai tempate blog anda, karena kode ini mungkin akan butuh penyesuian.

Jika nanti bar tidak singkron dengan side bar cukup lakukan penyetingan pada kode:

width:90%;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:13px;
padding-bottom: 10px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;

Karena disana adalah letak pengaturan resolusinya.

Semoga bisa diterapkan dan Bermanfaat.