Tag Archive: Menu Pulldown


Kustomasi Menu Pulldown

Postingan tentang Kustomasi Menu Pulldown ini masih berhubungan dengan Cara Pembuatan Menu Pulldown dan Menentukan Lebar Menu Pulldown yang dapat dilihat pada blog Tips Trik Blog ini. Kustomasi kali ini akan menambah efek warna pada font dan background sehingga menjadikan tampilan menu pulldown ini akan menjadi lebih menarik dan atraktif.

Format default menu pulldown adalah seperti telah diposting pada Cara Pembuatan Menu Pulldown, yaitu seperti di bawah ini.

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

Nama/Judul Menu

Nama_link_1
Nama_link_2
Nama_link_dst

Untuk memberikan efek warna pada font dan background adalah dengan menambahkan atau menyisipkan kode seperti di bawah ini.

style=”color:kode_warna_font; background:kode_warna background

kode_warna_font >> diganti dengan kode html warna untuk font sesuka kita

kode_warna_background >> diganti dengan kode html warna untuk background sesuka kita juga.

Misalkan kita menginginkan warna font merah dengan background orange maka kodenya menjadi seperti di bawah ini.

style=”color:#B40404; background:#FF8000

Untuk kode-kode html warna dapat dilihat di sini.

Sekarang kita sisipkan kode tersebut ke dalam form menu pulldown sehingga selengkapnya menjadi seperti di bawah ini.

<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size=”1” style=”color:#B40404;background:#FF8000″>

Nama/Judul Menu

Nama_link_1
Nama_link_2
Nama_link_dst

Contoh hasilnya seperti di bawah ini. – My Blog -All About of My LifeSepeda Antik JuwanaTips dan Trik BlogBisnis InternetTips dan Trik KomputerTips n Trik Internet

Kita dapat memberikan efek warna yang berbeda untuk setiap isi menu dengan menyisipkan kode tersebut, contohnya seperti di bawah ini.

<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size=”1” style=”color:#B40404;background:#FF8000″>

Nama/Judul Menu

<option value=”http://alamat_link_1/"style=”color:#B40404;background:#088A08″>Nama_link_1
<option value=”http://alamat_link_2/"style=”color:#B40404;background:#0B0B61″>Nama_link_2
<option value=”http://alamat_link_dst/"style=”color:#B40404;background:#610B38″>Nama_link_dst

Anda dapat berkreasi dengan warna yang lain sesuka hati.

Contoh hasilnya seperti di bawah ini. Anda dapat mencoba untuk berkreasi sendiri sehingga dihasilkan kombinasi warna yang lebih baik dari pada yang saya contohkan (maklum saya kan bukan seniman).

– My Blog -All About of My LifeSepeda Antik JuwanaTips dan Trik BlogBisnis InternetTips dan Trik KomputerTips n Trik Internet

Selamat Mencoba bagi yang ingin mencoba!!

(sumber : Blogging Tutorial, Free Template, & Site Info)

Baca juga yang ini.

  1. Cara Pembuatan Menu Pulldown
  2. Menentukan Lebar Menu Pulldown
  3. Mendulang Dollar dari Buyblogreviews.com
  4. Mendulang Dollar dari Blogsvertise.com
  5. Mendulang Rupiah dari Kumpulblogger.com
  6. Rename Recycle Bin
  7. Tips Membuat Readmore

Iklan

Menentukan Lebar Menu Pull Down

Sebelum mengenal tips menentukan lebar Menu Pull Down ini, Tips trik Blogspot begitu penasaran bagaimana caranya agar antara menu pull down yang satu berukuran sama lebar dengan menu pull down yang lain sehingga akan terlihat lebih estetis. Tanpa tips ini, menu tersebut akan mempunyai lebar yang relatif tergantung dari panjang pendeknya isi menu tersebut.

Bingung, ya? Saya juga bingung menyusun kata-kata yang tepat untuk menjelaskan ini. Untuk lebih jelasnya mungkin kita perlu mengetengahkan studi kasus (wah kayak kuliah saja).

Namun sebelum “mengintip” tips berikut, sebaiknya baca tips membuat pull down terlebih dahulu, di sini, karena memang tips ini merupakan kelanjutan dari tips tersebut. Silakan di baca dahulu, ya!!! (bagi yang belum mengetahui saja, lho)

Langsung saja, di sini Tips Trik Blogspot akan memberi contoh dua menu pulldown dengan posisi atas dan bawah, seperti di bawah ini.

– My Blog – All About of My LifeSepeda Antik JuwanaTips dan Trik BlogBisnis InternetTips dan Trik KomputerTips n Trik Internet

– Friends-Friends -Adbrite-CatoerAmazing LifeAmsterdam TodayAnasku Tips BlogAni’s BlogAntokAntoni RizalAppfreewareArdy’sArifudin’s BlogsiteArzuAtmo BlogAyu RengganiBamperXIIBandank BarengBella CellBidik.ComBieBisnis Online BNIBlogs TutorialBlogger HolicBlogging Tips CollectBloggingismylifeBlognya IkhsanBlue BlogBola SinemaCelebrity FemalesCelotehCeplas CeplosComputerShopDanaDavidDhanieDian SugiantoElfridaEnsiklotipsErwin BlogFhiaFundayHarmi CahyaniHenry YuarsaHensenHeruHikariannaHow ToIGW TeamIlmu GrafisImam-Simple Is BeautifullIndaInternet InfoJhonaJogja WikiJokoJunior’s BlogKubenci SekolahMaking MoneyManiak MusikMbeumMecca dan MedinaMustraysNewbie FreakNidya-CindraNugroho IpamOciet LebenPinay WahmPrayogaQoriRacoen-Hotspot PatiRauf WeblogRini ASRobbie AlcaRuri AndariSaiee DrisSarie-Dear AllSetrasariputraSexy MOMSuhandiTamrinTeknik SipilTeronkThe Indigo Of RepublicaThyaTiar’s BlogTips For FamilyTips Internet BisnisTopijramiaTrik ATMTutorials ComputerTyoUyakWaraYasin MarineYonk-QZee

Jika kita perhatikan lebar kedua menu pull down tersebut tidak sama karena memang lebar menu nya akan tergantung dari panjang pendeknya isi menu tersebut.

Untuk membuat agar lebar kedua menu pull down tersebut sama adalah dengan menyisipkan kode seperti di bawah ini.

style=”width:lebarpx”

lebar diganti dengan angka yang menunjukkan lebar menu dalam satuan pixel yang dapat disesuaikan dengan kebutuhan, sebagai contoh, misalkan kita menginginkan lebar menu 200 pixel maka kodenya seperti di bawah ini.

style=”width:200px”

Perlu diketahui bahawa format default Menu Pull Down yang pernah ditulis pada blog ini, di sini, adalah seperti di bawah ini.

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

Nama/Judul Menu

Nama_link_1
Nama_link_2
Nama_link_dst

Maka untuk menjadikan lebar menu menjadi 200 pixel maka harus disisipkan kode style=”width:200px” sehingga selengkapnya menjadi seperti di bawah ini.

<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
style=”width:200px” size=”1” name=”menu”>

Nama/Judul Menu

Nama_link_1
Nama_link_2
Nama_link_dst

Setelah disisipkan kode tersebut kita dapat melihat hasilnya yang lebih enak dipandang mata dari pada sebelum disisipkan kode tersebut.

– My Blog – All About of My LifeSepeda Antik JuwanaTips dan Trik BlogBisnis InternetTips dan Trik KomputerTips n Trik Internet

– Friends-Friends -Adbrite-CatoerAmazing LifeAmsterdam TodayAnasku Tips BlogAni’s BlogAntokAntoni RizalAppfreewareArdy’sArifudin’s BlogsiteArzuAtmo BlogAyu RengganiBamperXIIBandank BarengBella CellBidik.ComBieBisnis Online BNIBlogs TutorialBlogger HolicBlogging Tips CollectBloggingismylifeBlognya IkhsanBlue BlogBola SinemaCelebrity FemalesCelotehCeplas CeplosComputerShopDanaDavidDhanieDian SugiantoElfridaEnsiklotipsErwin BlogFhiaFundayHarmi CahyaniHenry YuarsaHensenHeruHikariannaHow ToIGW TeamIlmu GrafisImam-Simple Is BeautifullIndaIndo TransInternet InfoJhonaJogja WikiJokoJunior’s BlogKubenci SekolahMaking MoneyManiak MusikMbeumMecca dan MedinaMustraysNewbie FreakNidya-CindraNugroho IpamOciet LebenPinay WahmPrayogaQoriRacoen-Hotspot PatiRauf WeblogRini ASRobbie AlcaRuri AndariSaiee DrisSarie-Dear AllSetrasariputraSexy MOMSuhandiTamrinTeknik SipilTeronkThe Indigo Of RepublicaThyaTiar’s BlogTips For FamilyTips Internet BisnisTopijramiaTrik ATMTutorials ComputerTyoUyakWaraYasin MarineYonk-QZee

Semoga bermanfaat bagi yang membutuhkan!! Hasilnya juga dapat di lihat pada blog ini.

(sumber : Kang Rohman)

Baca juga yang ini

  1. Cara pembuatan menu pull down
  2. Mendulang Rupiah dari Kumpulblogger.com
  3. Mendulang Dollar dari Clixsense.com
  4. Membuat Readmore
  5. Tampilkan Versi Windows Pada Desktop

Cara Pembuatan Pulldown Menu

TIPS MEMBUAT MENU PULLDOWN. Pulldown Menu lebih simple dan memakan ruang sidebar yang lebih sedikit. Cara penambahan linknya juga mudah. Pulldown bisa digunakan untuk Daftar Blogroll, Daftar Link, Previous Posting, dan sejenisnya. Walapupun sering diulas pada banyak blog dan website, tidak ada salahnya TIPS DAN TRIK BLOG ini mengulasnya kembali, siapa tahu dapat membantu para new blogger.

Formatnya sebagai berikut :

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

– Nama/Judul Menu –

Nama_link_1
Nama_link_2
Nama_link_3

Cara menambahkan linknya dengan menambahkan di bawah link_3 atau menyisipkan di antara link-link yang ada.

Sebagai contoh riilnya, seperti di bawah ini

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

– My Blog –

All About of My Life
Sepeda Antik Juwana
Tips dan Trik Komputer
Tips dan Trik Blog
Bisnis Internet

Tampilannya menjadi seperti ini.

– My Blog – All About of My Life Sepeda Antik Juwana Tips dan Trik Blog Bisnis Internet Tips dan Trik Komputer

Langkah-langkahnya :

1. Login di blogger, sehingga masuk di halaman Panel Kontrol (Control Panel), seperti di bawah ini.

2. Pilih blog Anda yang ingin dimodifikasi, kemudian klik layout dan klik Elemen Halaman.

3. Klik Tambahkan Sebuah halaman baru (Add New Page Element).

4. Kemudian tambahkan HTML/JavaScript, seperti gambar di bawah ini.

5. Setelah itu ketik seperti format di atas.

6. Setelah selesai Simpan Perubahan.

7. Selesai.

Selamat Mencoba.

Yang bertalian Membuat Menu Pulldown-Catoer, Membuat Menu Pulldown di Sidebar-Afatih, Membuat Menu Pulldown-Wynwira, Membuat dropdown menu-Pernak-pernik Blog.