Cara Membuat Dropdown Menu di Blogger
08 April 2008
Leave a Comment
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?
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?
Postingan Menarik Lainnya :
Trik Blogger
- List Dofollow Backlink .EDU & .GOV High PR
- Cara Menampilkan Status Off & Online Yahoo Messenger
- Mengganti "Older Posts" Dengan Angka
- TIps Merawat Ponsel, HP Agar Tetap Awet
- Cara Mudah Pasang Widget WOWZIO
- Membuat Related Post / Artikel atau PostingTerkait Pada Blogger Dilengkapi Dengan Scroll
- Buat Kalender
- Pasang file .swf / flash di Blogger
- Membuat Scroll To Top pada Blogger
- Menghilangkan Navbar Blogger
- Memproteksi Blog dari kegiatan pembajakan artikel dan source code
- Membuat read more.. pada posting blog
- Setting Domain Blogspot di co.cc
- Cara Pasang Flash di Blogspot
- Highlight pada Script/Kode di Postingan
- Tips Mengedit HTML Blogspot
- Cara Menghilangkan Tanda Tang dan Obeng
- Pasang Widget Translator di Blogspot
- Cara Menampilkan / Pasang Emoticon di Kotak Komentar
- Highlight Author Comment
- Menampilkan Recent Comments (Komentar Terbaru)
- Cara Membuat Menu Vertikal (Vertical)
- Cara Membuat Menu Tab View Dengan HTML di Blog
- Mengganti Kotak Komentar Haloscan menjadi Commentbox Blogspot
- Membuat Kotak Komentar Blogger di Bawah Postingan
Blogging
- List Dofollow Backlink .EDU & .GOV High PR
- Cara Membuat Blog Gratis Dan Mudah
- Index
- Menjadikan Blog sebagai Ladang Penghasil Uang
- Google Panda Adalah Eliminasi Blog Tidak Bermutu
- Memaksimalkan Posisi Di Mesin Pencari Google
- Membuat Spoiler Gambar Di Blog
- Template Blogger Gaya Facebook
- Template Blogger Gaya Twitter
- Membuat Visitor Online Tampak Banyak
- Cara Membuat Blogspot
- Membuat Iklan PPC Berjajar
- Membuat Auto Search Engine Content di Blogger
- Menjadi Nomor 1 Di Mesin Pencari Google
- Cara Meletakkan Tombol Facebook Share Dalam Postingan Blog
- Cara Dapatkan Link Favicon
- Top 15 Most Popular Social Bookmarking Websites
- Membuat Blogger Versi Mobile
- Cara Menampilkan Status Off & Online Yahoo Messenger
- Menambah Backlink Dengan Berkomentar
- Menambah Backlink Dengan Berkomentar
- Mengganti "Older Posts" Dengan Angka
- Share List Backlink Forum PR0 - PR9
- TIps Merawat Ponsel, HP Agar Tetap Awet
- Cara Mudah Pasang Widget WOWZIO
0 komentar »
Leave your response!