09 April 2008

(11) Comments

Cara Membuat Dropdown Menu

Kendhin

Apa sih dropdown menu itu?
Dropdown menu yang seperti ini itu lho :


Nha udah tahu kan? Dengan dropdown menu kita bisa mnghemat space/ruang di blog kita, karena dengan ukuran yang kecil seperti itu bisa menyimpan link dan text yang banyak. Itu bisa diisi dengan arsip, blogroll dll.
Gimana? Mau mencobanya?
Gini nih caranya :


Login ke blogger, trus masuk ke menu "Page Element" trus pilih Add page elements --> HTML/JavaScript. Kemudian masukkan script berikut ini di kocat "Content"


<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>


Text yang berwarna merah adalah link. ganti text2 tersebut dengan link2 kamu.
Text yang berwarna biru adalah tulisan yang ditampilkan. Itu juga harus km ganti.

Contohnya seperti ini :


<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://trik-tips.blogspot.com/2008/01/membuat-menu-horizontal.html"> Cara Membuat Menu Horizontal </option>
<option value="http://trik-tips.blogspot.com/2007/12/cara-membuat-search-engine.html"> Cara Membuat Search Engine </option>
</select>


maka hasilnya akan seperti ini :



untuk menambahkan menu lagi, tambahkan kode seperti ini :


<option value="Links 2">Text 2</option>


sebelum kode </select>

Link dalam dropdown menu di atas jika di klik akan membuka link di halaman yang sama. Ini cocok untuk Arsip dan link-link yang masih berhubungan dengan blog tsb.

Ada satu tipe lagi yang jika diklik linknya maka akan membuka window baru tanpa menutup blog kamu. Yang ini cocok untu Blogroll atau Friend link.
Cara mambuatnya seperti diatas tapi ganti kode berikut


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


ganti dengan kode ini :


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


hasilnya akan seperti ini :



Gimana? Bisa nggak?

Trik dan tips yang berhubungan :




Artikel yang Berhubungan :



Jumlah Komentar = 11
Bamsyul said :
16 July, 2008
thanks sarannya
24 July, 2008
baguszzzzzzzzzzzzzzzzzzzzzzz
Eko said :
27 July, 2008
Keren brow,
brow kok q blajar blog g bs 2 gim to,q dah bt blog tp bgung cr mskin link ?Misalnya kyak dblog u dbwah da tlisanna copryct google,and da menu search na bgt cr bt na gim to?Hehe maaf gue pemula jd q hrus byk bty dunk,hehe
mynurya.Blogspot.Com
q ksh ptunjuk ya brow
bajoel said :
29 July, 2008
Wah, terima kasih banyak atas semua tips2 dan trik2nya, saya sangat terbantu dengan artikel di blog ini... THANKS BERATTTT....
04 August, 2008
tes
klik said :
11 August, 2008
thanks infonya
Hafidz said :
15 September, 2008
Thank's
16 September, 2008
:f
riyan said :
23 October, 2008
tips and triknya keren lohhhh.. tapi kok tips untuk comennya gak tampil yahhhh...??? :D
Andre said :
24 October, 2008
Hebat kang kendhi ini.... jadi bagus deh blog kita-kita. smilenya gak ada yang jempol dua ya? hehehehehe
sms love said :
25 October, 2008
great men...but how we enlarge size..cause it is so litle

Post a Comment