rssrss

Sabtu, 27 Februari 2010

Cara Membuat Menu DropDown Di Blog

DropDown Menu atau menu dropdown adalah menu yang berisikan link yang bisa digunakan untuk link yang mengarah ke blog kita maupun ke web lain.
bisa kita gunakan untuk tempat friends list atau kumpulan link teman2, ataupun link dari website/situs yang kita sering kunjungi.

Cara pembuatannya :
  1. Login ke Blogger
  2. Kemudian klik Tata Letak dan Elemen Halaman
  3. Ketika sudah berada di Elemen Halaman klik Tambah Gadget
  4. Lalu pilih HTML/JavaScript
  5. Langkah selanjutnya masukkan kode DropDown Menu seperti contoh dibawah ini :

<form><select name="menu" onchange= "window.open(this.options[this.selectedIndex].value,'_blank')" size=1 name=menu>

<option>- My Friend's Links -</option>

<option value="http://adesyams.blogspot.com/">Ade'S Tricks</option>

<option value="http://id-fans.blogspot.com/">Irvan'S Diary</option>

<option value="http://ikkefransiska.blogspot.com/">Ikke's Blog</option>

<option value="http://gieciencute.blogspot.com/">Blog Icha</option>


</select></form>



Hasilnya akan seperti ini :




Apabila tidak berhasil cobalah kode lain seperti berikut di bawah ini :

Ini adalah kode menu dropdown yang beda dengan yang diatas kode dibawah ini dibagi menjadi 2 :

  • kode menu dropdown apabila di klik tidak membuka halaman/tab baru ( mengganti halamanyang sedang di buka )

contoh :


Cara membuatnya hampir sama tinggal masukkan kode berikut dibawah ini ke dalam HTML/JavaScript.
kode untuk pembuatan menu seperti di atas adalah:

<center><select onchange= "document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected="selected">- My Favorite Links -</option>
<option value="http://www.blogger.com/"> Blogger.com </option>
<option value="http://www.google.com/"> Google.com </option>
<option value="http://www.gmail.com/"> GMail (google mail) </option>
<option value="http://www.yahoo.com/"> Yahoo! </option>
<option value="http://www.mail.yahoo.com/"> Yahoo Mail </option>
<option value="http://www.facebook.com/"> FaceBook.com </option>
<option value="http://www.gudanglagu.com/"> GudangLagu.com </option>
<option value="http://www.4shared.com/network/search.jsp"> 4Shared.com </option></select></center>

  • kode menu dropdown yang apabila di klik akan membuka halaman/tab baru ( tidak mengganti halaman yang sedang di buka )

Contoh :


Cara membuatnya hampir sama tinggal masukkan kode berikut dibawah ini ke dalam HTML/JavaScript.
kode untuk pembuatan menu seperti di atas adalah:

<center><select onchange= "javascript:window.open(this.options[this.selectedIndex].value;">
<option value="0" selected="selected">- My Favorite Links -</option>
<option value="http://www.blogger.com/"> Blogger.com </option>
<option value="http://www.google.com/"> Google.com </option>
<option value="http://www.gmail.com/"> GMail (google mail) </option>
<option value="http://www.yahoo.com/"> Yahoo! </option>
<option value="http://www.mail.yahoo.com/"&gt; Yahoo Mail </option>
<option value="http://www.facebook.com/"> FaceBook.com </option>
<option value="http://www.gudanglagu.com/"> GudangLagu.com </option>
<option value="http://www.4shared.com/network/search.jsp"> 4Shared.com </option></select></center>


Gantilah tulisan yang berwarna hijau dengan link yang diinginkan.
Adapun tulisan yang berwarna merah adalah tulisan/nama dari link yang berwarna biru tersebut.
Ket : Kode <center> dan berakhiran </center> adalah agar dimaksudkan berada di posisi tengah pada menu atau sidebar tempat kita menaruh dropdown menu ini.
dan juga bisa dipakai untuk semua kode html maupun java script.

Selesai...

Trim's . . .

Kembali Ke Beranda Blog

5 komentar:

Nikmaya John on 8 Maret 2011 00.19 mengatakan...

Pertamax,,,, dicoba ya gan....

irfan-ahgx on 8 Mei 2011 21.29 mengatakan...

mkasih ya broo.oa klo mau buat menu blog ini yang paling atas a yang warna merah gmna ..yang ada home.bisnis.cinta dn lain2

MP on 23 Januari 2012 02.46 mengatakan...

thanks gan. Ni bru dropdown yg q cri2. Yg lain ga bsa bdain dropdown n scroldown.

Fajar on 23 Januari 2012 16.20 mengatakan...

ane udah test di wordpress self hosting
n work!
thanks mas, simple tapi work! yg lain ribet n not work
sekali lagi thanks

Hanzhor on 16 Agustus 2012 16.31 mengatakan...

terimakasihh ,,mang


Posting Komentar

 
Terima kasih atas kunjungannya

Pengunjung Blog

Pengikut