Cara Membuat Menu Dropdown Pada Blogger

Posted by Herman on Monday, March 09, 2009 50 comments

Dropdown menu adalah menu yang berisi sekumpulan teks atau link yang disingkat menjadi sebuah menu tunggal.

Contoh tampilannya seperti ini:



Isinya hanya akan tampil jika anda mengklik pada menu tersebut sehingga bisa hemat ruangan blog. Cara ini bisa dijadikan sebagai alternatif blogroll atau kebutuhan lainnya.

Nah untuk membuatnya, caranya sangat mudah:

1. Login ke Blogger. Klik menu Design-> Page Elements
2. Klik Add a Gadget -> HTML/ Javascript
3. Masukkan kode dibawah ini kedalam kotak

<select onChange="document.location.href=this.options[this.selectedIndex].
value;">
<option value="http://alamatblog.com/#" selected>Blogroll</option>
<option value="http://alamatLink.com/">Nama Link</option>

<option value="http://alamatLink.com/">Nama Link</option>

<option value="http://alamatLink.com/">Nama Link</option>

</select>


Jika anda ingin menambah link baru lagi tambahkan kode

<option value="http://alamatLink.com/">Nama Link</option> diatas
</select>

Ganti alamatblog dengan dengan alamat blog anda.
Ganti teks berwarna merah dengan alamat link yang ingin dipasang.
Ganti teks berwarna biru dengan nama link yang ingin ditampilkan.


4. Jika sudah klik Save. Selesai


Catatan:

kode diatas untuk membuka link dalam halaman yang sama. Jika anda ingin membuka link pada halaman baru. Ganti kode

<select onChange="document.location.href=this.options[this.selectedIndex].
value;">
Menjadi

<select onchange="javascript:window.open(this.options[this.selectedIndex].
value);">

Selamat mencoba..


Recent Posts:

50 comments

Andy J. Santiko said... 11 March, 2009
kalo ganti warna biru biar klop ama template cemana bro..?
Thanks bro..
herman said... 12 March, 2009
@Andy: maksudnya tulisannya apa kotaknya nih? hehe.. kurang jelas
Andy J. Santiko said... 12 March, 2009
garis kotaknya and warna scrollnya bro biar klop ama warna template merahku..
thanks
Herman said... 13 March, 2009
utk mengganti warna garis menjadi merah ganti kode

<select onChange="document.location.href=this.options[this.selectedIndex].
value;">

menjadi

<select onChange="document.location.href=this.options[this.selectedIndex].
value;" style="border:1px solid #ca1717">

Sedangkan untuk tombol scrollnya itu adlh bawaannya jadi ga bs diganti :)
my story said... 25 May, 2009
THANK FOR INTRUKSIONS...
GilaGaliGula said... 22 June, 2009
`Keren Banget Ni tutorial² nya.. hehehe

Tambahin turorial yg lain bos
makasih :D
herman said... 23 June, 2009
@gilagaligula: pasti bos. hehe..
LUC said... 25 August, 2009
mantabh . . .
widyarfendhi said... 26 September, 2009
thanks bro untuk panduannya. it's work. keep blogging.........http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif
lawlet said... 14 February, 2010
menu add gadget pd blogeer d mn tuh?:-o
voo said... 30 March, 2010
makasih bro ..
mari kita tukaran link mas ..

makasih .
lawlet said... 31 March, 2010
wehh mantap banget blog na;;)
ohh ya bagi para blogger yg pengen tukerin link wat diklik iklan na tiap hari,,hub ja shinigamixstreet@gmail.com,,,,
liat info na d blog aq ya;)
MAYOR GRISTHA said... 19 April, 2010
Mas gimana cara mengganti ling yang ingin di pasang,,,!!
saya pendatang baru di dunia bloger,,, jadi mohon bantuannya,,!!

sekalian kasi saran2x tentan blog baru saya,,
di http://propertymayor.blogspot.com
korean movies ost said... 20 May, 2010
izin nyedot ilmunya.mantap
makasih infonya. . .

kdrama
laptop computers reviews
healthy tips
cellular mobile phones
japanese music chord
free comic download
yunika said... 27 August, 2010
Om master, gimana caranya bikin sub menu pd tab pages di blogspot yak?
Nuwun.
herman said... 29 August, 2010
@yunika: waduh jd malu nih dipanggil master padahal msh newbie nich. hehe...

Pertama bikin dulu page di Menu Posting->Edit Pages. Setelah itu, buka menu Design->Page Elements. Klik 'Add a Gadget' pada bagian dimana anda ingin menu pages tersebut muncul di blog anda lalu pilih 'Pages'.

Centangin saja pages yang mau ditampilkan kemudian tekan Save. Selesai. Silahkan dicoba. :)
Eric Juanto said... 25 September, 2010
jd bgni cara.x. . . .
Udah cape nyari di google,, akhr.x dapt juga. . .
Thx ya bwat admin atas info.x. . .
Salam knal. . .
Herman said... 25 September, 2010
@Eric: Sama2 sob. salam kenal juga
Edi Hidayat said... 14 November, 2010
makasih infonya
ridho said... 14 November, 2010
thanks infonya... matur thanks sanget...:)
A_qin said... 11 January, 2011
mantep... matur thankyu... :))
Acehomegazen said... 28 January, 2011
tex
arvious said... 04 February, 2011
thanks banget gan....ane cobain ya..he.;)
danie.ayank said... 07 February, 2011
thx gan.. n numpang ngopast :)
Tukang Pamer said... 08 February, 2011
wah,, pantes di coba nih..
mampir2 ke blog gw ya.. gw baru ajaran bikin blog :D
Art Software said... 22 February, 2011
saya baru bikin blog yg alamat nya

http://art-xp.blogspot.com

mohon bantuaanya
setetes komentar anda sangat berarti bagi saya
apalagi manjadi follower blog saya

terima kasih
Rika Rachmi F. said... 26 February, 2011
mas bro ... numpang tanya ...
blog ane kan multi author. ane pengen bikin page beberapa yg describe profil masing-masing author. trus dulu pernah ada temen yg bilang itu bisa di-link-kan sama label. jadi maksudnya nanti biar yg baca bisa langsung ke link ke tulisan salah satu orang saja tanpa perlu baca satu per satu tulisan di blog kita.

itu gimane cara ya??
Hori Revens said... 04 March, 2011
siip nih gan tutornya, boleh di coba . . salam kenal agan, http://horier.blogspot.com/
okecarving said... 18 April, 2011
ada g cara buat menu drop up? klo ada kabari ya ?
Novan said... 01 May, 2011
tq infonya bro. mau q praktekkan .
Blackersz said... 07 May, 2011
makasih mas bro.... salam kenal
Khilafahshop said... 17 May, 2011
Alhmdulillh..Artikel2 mas herman mantep2 and sangat bermanfaat sekali, khususnya buat pemula kaya saya..kl blh sya mu nanya.
.bisa ga bikin menu bar d'header desain sndiri mas??
(maaf kl bhs'a aga aneh,tp mdh2n mas faham maksd'a..)mksh bnyk mas..
Revi Ristiana PD said... 11 August, 2011
like this....

kunjngi blog sya..

revirifa.blogspot.com
les privat gepe said... 13 August, 2011
thanks banget, ane cobaiin ah
Young Hacker said... 10 September, 2011
@Herman
kalo buat disampingnya lagi gimana ya om??
masalahnya di edit halaman template saya bentuk add gadgetnya menurun,jadi jika saya buat lagi tempat menunya di bawah.
gimana ya caranya??
Igun Suka-Suka said... 11 September, 2011
bagus ni kang ini yang saya cari ,,, terimakasih ya sakses selalu
Flanzka said... 11 September, 2011
Terimakasih Bro, kunjungi gubug ane juga ya...
http://flanzka-teknologi.blogspot.com/
;;)
Gambar Desain 3D said... 05 January, 2012
mantaaap... tutorialnya....
Eko Muryanto said... 11 January, 2012
Makasih mas infonya...sangat bermanfaat buat saya....^_^
Indra said... 19 January, 2012
nice posting
idaBOICE said... 02 February, 2012
coba dulu aah...
anri said... 21 February, 2012
thx gan buat tuorialnya...
ijin sedot... ^_^ tq
edwinray said... 08 March, 2012
Mantap..Gan...
Adie said... 18 March, 2012
Kalo mau buat menu kaya Home, Blogroll, tapi bisa dibuka itu perintahnya apa ya Gan ? :-o Tolong di post please... masih bingung cara nambahin itu.. :((
betamanise said... 26 March, 2012
siep gan, infonya,....
PonTren Putri Nurul Qur'an said... 14 April, 2012
bingung :-/
aqiqah surabaya said... 20 April, 2012
Ilmu yang sangat bermanfaat....
sakahayang.com said... 29 April, 2012
makasih sudah share
Mulki Muluc said... 11 May, 2012
mantaf gang.... http://belajarbersama2.blogspot.com/
Ratman Fauzi said... 28 July, 2012
Mantap. terima kasih tatp bagaimana mengubah menu bar yang sudah dipasang agar menjadi dropdown. apakah menubar yang ada harus dihapus??terima kasih .http://sdnantasansegera.blogspot.com

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment