Melanjutkan Postingan kemarin yaitu tentang membuat menu dropdown dengan JavaScript. Pada postingan yang lalu telah di bahas tentang membuat menu dropdown pada template baru, maka pada postingan kali ini akan di bahas mengenai cara pembuatan pada template klasik.
Agar tidak terlalu monoton, pada pembuatan dropdown kali ini akan saya beri sentuhan baru, yaitu pemakaian background yang berbeda. Jika pada postingan yang lalu saya memberikan contoh background banner seperti di bawah ini :
Maka kali ini saya akan memberi contoh banner seperti ini :
Dan contoh menu dropdown yang akan di bahas adalah seperti demo di bawah ini :
Agar tidak terlalu menyita space halaman karena penuh dengan kata-kata yang membingungkan, kita langsung saja pada topik pembahasan. Untuk membuat menu dropdown pada template klasik, silahkan ikuti langkah-langkah berikut ini :
http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif
http://i162.photobucket.com/albums/t253/rohman24/bannerjava5.gif
http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif <head>
dan sebelum kode </head>
, atau jika ingin lebih mudah simpan di bawah kode <title><$BlogPageTitle$></title>
: <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>]]></b:skin>
.raden{
background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');
text-align:center;
width:175px;
font-family: georgia, Helvetica, sans-serif;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom: 5px;
display:block;
text-decoration: none;
color: #F6E151;
}
.ogah{
background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif');
text-align:center;
width:175px;
font-family: georgia, Helvetica, sans-serif;
padding-left:5px;
padding-right:5px;
padding-top:8px;
padding-bottom: 5px;
display:block;
text-decoration: none;
color: ##FAF705;
height: 18px;
}
.ogahniye{
background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif');
text-align:center;
width:175px;
font-family: georgia, Helvetica, sans-serif;
padding-left:5px;
padding-right:5px;
padding-top:8px;
padding-bottom: 5px;
display:block;
text-decoration: none;
color: #0572FA;
height: 18px;
}
.hide{
display: none;
}
.show{
display: block;
}
a{cursor: hand} <a class="raden"><font size="5"><b>Navigasi</b></font></a>
<a class="ogah" onclick="showHide('ogahku1')">Blog Tutorial</a>
<div id="ogahku1" class="hide">
<a href="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html" class="ogahniye">Membuat blog</a>
<a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-link-1.html" class="ogahniye">Membuat link</a>
<a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-marquee.html" class="ogahniye">Membuar marquee</a>
<a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-icon-yahoo-messenger.html" class="ogahniye">Icon YM</a>
</div>
<a class="ogah" onclick="showHide('ogahku2')">Aksesori blog</a>
<div id="ogahku2" class="hide">
<a href="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html" class="ogahniye">Yahoo ! Emoticons</a>
<a href="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html" class="ogahniye">Blogger Emoticons</a>
<a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-jam-blog-di-sidebar.html" class="ogahniye">Pasang jam</a>
<a href="http://kolom-tutorial.blogspot.com/2007/05/ada-video-di-artikel.html" class="ogahniye">Pasang Video</a>
</div>
<a class="ogah" onclick="showHide('ogahku3')">My Other Blog</a>
<div id="ogahku3" class="hide">
<a href="http://rubrik-elektronik.blogspot.com/" class="ogahniye">Rubrik Elektronik</a>
<a href="http://rohman-freeblogtemplate.blogspot.com/" class="ogahniye">Free Blog Template</a>
<a href="http://contoh-blog.blogspot.com/" class="ogahniye">Blog Menu D'tree</a>
<a href="http://kolom-authorized.blogspot.com/" class="ogahniye">Authorize service</a>
</div>
<a class="ogah" onclick="showHide('ogahku4')">Links Temanku</a>
<div id="ogahku4" class="hide">
<a href="http://free-7.blogspot.com/" target="_blank" class="ogahniye">Free 7</a>
<a href="http://jaloee.blogspot.com/" target="_blank" class="ogahniye">Jaloee</a>
<a href="http://sundajava.blogspot.com/" target="_blank" class="ogahniye">Liezmaya</a>
<a href="http://anangku.blogspot.com/" target="_blank" class="ogahniye">Anang</a>
</div>
Keterangan kode-kode diatas : <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>
.raden
--> .raden hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk enyertakan dot ( . ) diepan kata yang di buat.
background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');
--> ini adalah gambar background untuk tulisan yang saya buat yaitu sebuah ombol.
text-align:center;
--> kode untuk membuat tulisan berada di tengah, bisa diganti dengan kata Left untuk sebelah kiri, dan right untuk sebelah kanan.
width:90%;
--> lebar dari tombol adalah sebesar 90% dari besarnya space sidebar dimana tombol ini di tempatkan, silahkan ganti nilainya dan sesuaikan dengan ukuran blog sobat.
font-family: georgia, Helvetica, sans-serif;
--> Font (jenis hurup) yang dipilih adalah jenis georgia, ini bisa diganti dengan jenis huruf lainnya semisal verdana dan lain-lain.
padding-left:5px;
--> batas (jarak) tulisan sebesar 5px dari tepi kiri tombol,nilai ini bisa di rubah sesuai keinginan sobat.
padding-right:5px;
--> batas (jarak) tulisan sebesar 5px dari tepi kanan tombol,nilai ini bisa di rubah sesuai keinginan sobat.
padding-top:5px;
--> batas (jarak) tulisan sebesar 5px dari tepi atas tombol,nilai ini bisa di rubah sesuai keinginan sobat.
padding-bottom: 5px;
--> batas (jarak) tulisan sebesar 5px dari tepi bawah tombol,nilai ini bisa di rubah sesuai keinginan sobat.
display:block;
--> block berarti ditampilkan,jadi jangan dirubah.
text-decoration: none;
--> Tidak ada tek dekorasi. Sebaiknya jangan di rubah.
color: #F6E151;
--> Pemilihan warna, bisa dirubah kode warnanya sesuai dengan keinginan sobat.
.ogah
--> .ogah hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.
.ogahniye
--> .ogahniye lagi-lagi hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.
.hide
display: none;
--> Pendifinisian untuk .hide disembunyikan (tidak tampil).
.show
display: block;
--> Pendifinisian untuk .show ditampilkan.
a{cursor: hand}
Agar gambar mouse berubah jadi gambar tangan ketika berada di atas tombol.
Mudah-mudahan keterangan di atas sudah jelas. Selamat mencoba !
Sumber:Disini
Lokasi » Home »
Blogger Pemula
» Menu Dropdown dengan JavaScript (2)
Menu Dropdown dengan JavaScript (2)
Langganan:
Posting Komentar (Atom)
14 komentar:
wah ini keren juga nih....kalo hrizontal ada gak???
lumayan panjang ya caranya....
tapi thaks sob atas tutorialnya.....
yups...seperti yang di blognya KR...mantab...
mantab sob....
nice share....
Bagus nih.. COba ya sob..
Wahhh, kereeen! Tapi bener apa yg di katakan MU. Kalo ada yang horizontal pasti lebih keren tuh!
Persis ma kolom tutorial....., mungkin lain kali bisa lebih variasi lagi walau sedikit..., kan sedikit demi sedikit lama - lama jadi bukit deh tuh....
wah sep sob,,,,teruslah berkarya.....
hmmmmm.....info yang bermanfaat nih buat saya, makasih y sob :D
kereeeeeen
makasih yaaa
wah keren2 tipsnya...
aku bookmark dulu ya... siapa tahu butuh...
happy blogging
wow keren sob...
nice tutorial....
ikutan ah :)
wah nice info,,,tapi ini brguna buat tmplate klasik,,aq pke tmplate baru brow
Posting Komentar