Selamat Datang di Horeblogging.blogspot.com Surganya Para Blogger Mania, dan Tempat Sharing Seputar Blogging...

Monday, August 18, 2014

Cara membuat Dropdown menu

dropdown menu itu apa sih?
nih contohnya:



Naah tahu kan?dropdown menu berfungsi untuk menghemat tempat, agar lebih ringkas saja.
langsung aja,


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 selected="" value="0">Blog Arsip</option>
<option value="http://horeblogging.blogspot.com/2014/08/cara-membuat-shoutbox-atau-chat-box.html"> Cara membuat shoutbox </option>
<option value="http://horeblogging.blogspot.com/2014/08/cara-memasang-translatorgoogle.html"> Cara memasang translator </option>
</select>

hasilnya akan terlihat 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);">

nih hasilnya dengan 3 menu




ARTIKEL TERKAIT:

No comments:

Post a Comment

Artikel Lain