*Ganti alamat blogmu dari www.namablog.blogspot.com menjadi www.namablog.co.cc (GRATIS)...

Sabtu, Januari 31, 2009

(27) Comments

Membuat Tab Menu Dengan Dropdown

rhee dhie

Sebenernya tips ini masih sekedar coba-coba, tapi gpp..mudah-mudahan bisa bermanfaat buat kalian semua, he.
Klo kalian liat gambar disamping, mungkin maksudnya dah tau y.. yaitu kita buat yang namanya membuat "Tab View Dengan Dropdown" artinya jika kita pilih salah satu menu, maka akan muncul turunannya. klo diliat dari gambar di samping, tab menu utamanya adalah "DAERAH" tapi klo kita pilih menu daerah tersebut maka akan muncul turunannya seperti "JABODETABEK" " BANDUNG" dll..

mudeng g nih, he3.. yowis klo masih bingung, langsung liat ja deh contohnya disini.. oke,

Fungsi klo kita memakai trik ini yaitu biar lebih simple dan informasi yg kita kasih biar bisa dikelompokkan. kebayang kan klo di tab menu sy tampilin semua kota berjejer ke samping, kan g lucu..iya g..makanya sy pake trik dropdown ini..

pasti pengen kan pake trik ini juga, oke deh..gini tok cara buatnya :

1. Log in di blogger lalu masuk "Layout"---->"Edit HTML" lalu jangan lupa centang kotak "Expands Template Widgets" dan klo bisa back up dulu templatenya biar g terjadi sesuatu yang ngga diinginkan..

2. Cari kode ini ]]></b:skin> lalu setelah itu simpan kode di bawah ini tepat diatas kode tadi :


/* Dropdown Menus Trik Yuwie */
#page-bar li {
float: left;
margin: 0px;
padding: 0px;
}

#page-bar li li {
float: left;
margin: 0px;
padding: 0px;
width: 122px;
text-transform:none;
}

#page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
background: #2B2B2B;
width: 122px;
float: none;
margin: 0px;
padding: 5px 10px 5px 18px;
border-top: 1px solid #C0C0C0;
}

#page-bar li li a:hover, #page-bar li li a:active {
background: #666666;
padding: 5px 10px 5px 18px;
}

#page-bar li ul {
position: absolute;
width: 10em;
left: -999em;
}

#page-bar li:hover ul {
left: auto;
display: block;
}

#page-bar li:hover ul, #page-bar li.sfhover ul {
left: auto;
}


3. Cari kode tab menu yang ada di blog kamu, Misal sy ambil untuk contoh yang gambar di atas :

<ul class='left clearfloat' id='page-bar'>
<li><a href='http://lowongankerjaku88.blogspot.com'>Daerah</a></li>
</ul>

kode diatas adalah "Menu Utamanya"..

4. Nah, untuk membuat turunannya, yang harus kamu lakukan terlebih dahulu adalah menyiapkan link turunannya dengan menggunakan class='cat-item' contoh :

<li class='cat-item'><a href='http://lowongankerjaku88.blogspot.com/search/label/Jabodetabek'>Jabodetabek</a></li>

"Klo kamu pengen turunannya lebih dari satu maka kamu siapkan semua link turunannya, mau satu atau lebih dari satu atau berapa pun..pokonya terserah kamu..yang penting siapin dulu aja link turunannya"

5. Klo semua link turunannya sudah siap, maka langkah selanjutnya yaitu kamu tinggal menggabungkan "Menu Utama" dengan " Link Turunannya", caranya :

<li><a href='http://lowongankerjaku88.blogspot.com'>Daerah</a>
<ul class='children'>
<li class='cat-item'><a href='http://lowongankerjaku88.blogspot.com/search/label/Jabodetabek'>Jabodetabek</a></li>
</ul></li>

Klo link turunannya lebih dari satu, maka tinggal tambahkan aja menjadi :

<li><a href='http://lowongankerjaku88.blogspot.com'>Daerah</a>
<ul class='children'>
<li class='cat-item'><a href='http://lowongankerjaku88.blogspot.com/search/label/Jabodetabek'>Jabodetabek</a></li>
<li class='cat-item'><a href='alamat link'>Tambahan Turunan</a></li>
</ul></li>

Keterangan :

- Warna hitam adalah kode dari "Menu Utamanya"
- Warna merah adalah untuk membuat menu menjadi dropdown
- Warna Biru adalah kode dari "Link Turunannya"
- Warna Merah tua adalah kode tambahan jika kamu ingin memasukkan turunan lebih dari satu
- Khusus Warna Orange klo kamu perhatikan itu letaknya hanya dipindahkan saja, liat di "Menu Utama" lalu menjadi disimpan di bagian akhir.

Bingung y kebanyakan warna..he3.

6. "Udah deh" tinggal di "SIMPAN TEMPLATE"

coba liat hasilnya, udah ada belum turunannya..he3..

Perlu diperhatikan :

"Trik ini hanya akan berguna buat kamu yang sudah memakai "Tab Menu" di blognya, jika belum memakai tab menu, maka trik ini g akan bisa dipakai"

Selamat mencoba kawan..dan klo triknya ngga bisa, mohon maaf..soalnya masih coba2..hihihihi

Suka dengan artikel TRIK Yuwie,.? Masukin aja email kamu di kotak di bawah ini untuk berlangganan trik terbaru secara GRATIS langsung ke email kamu.


Makasih y dah mu baca, jangan lupa baca yang lainnya juga y di bawah ini :



27 Yang Kasih Semangat Ke Artikel "Membuat Tab Menu Dengan Dropdown"
Anonim said :
1 Februari 2009 pukul 00.48
Komentar pertama ah. Boleh juga buat nambah menu2 yg penting niih.
admin said :
4 Februari 2009 pukul 17.42
Wah... info bagus nih. Dr dulu dah kepingin bikin kenu dropdown kyk gini tp msih belum berhasil2. minta pencerahannya dong, cz sy blm pasang tab menu. thnks ya infonya :)
Anonim said :
5 Februari 2009 pukul 17.48
sip
Indra said :
9 Februari 2009 pukul 11.05
tolong dong bantuannya...
kok punyaku antara turunan punya celah yah aturnya gimana biar g ada celah seperti contoh
www.indra-ea.blogspot.com
nyaman said :
23 Februari 2009 pukul 13.35
aku coba buat tab menu dengan mengikuti "Membuat Tab Menu Dengan Dropdown" ko' menu down nya malah muncul tulisan kesamping ya, jadinya seperti tab menu
Anonim said :
11 Maret 2009 pukul 03.28
sama-sama kawan
kunjungin donk web saya...he.....
Anonim said :
11 Maret 2009 pukul 03.30
sama-sama
Anonim said :
13 Maret 2009 pukul 15.07
BRO,TIPS KAMU BERMAMFAAT,THANKS!
LC said :
27 Oktober 2009 pukul 13.16
Terus cara bikin TAB MENU nya gimana? Soalny q msih PEMULA...
Ramdhan said :
20 Maret 2010 pukul 17.31
Sip..
otto maggot said :
9 April 2010 pukul 14.07
seep
Anonim said :
14 Juli 2010 pukul 10.44
makasih, krang mu terjun ke lapangan! moga berhasil yes!
Anonim said :
9 November 2010 pukul 16.53
ay pembohong nian blog ne ...

bro .... yang uji coba tuh jangan di post ke ya ... :P
15 Januari 2011 pukul 14.45
nice info..

prediksi bola internasional ??
www.worldsoccerpredictor.blogspot.com
Unknown said :
23 Februari 2011 pukul 17.44
terima kasih atas ilmunya,klo ada lagi tolong informasikan....
johan said :
6 April 2011 pukul 17.21
mantap postingannya blognya juga inovatif
sikodokjail said :
10 April 2011 pukul 05.41
Mksie ats infox...

jngn lpa follow
Yuni Tisna said :
28 Juni 2011 pukul 12.07
gimana sih cari kode tab menunya?
Vi2N said :
7 Oktober 2011 pukul 09.30
klo buat "tab menu dropdown" di blog yg blum memakai tab menu gmna??
semut merah said :
20 Oktober 2011 pukul 07.24
thanks bgt postingannya..udah dicoba tapi masi lum bisa..tolong kasi saran di http://www.pintar-ngeblog.co.cc/
NamiKaze said :
2 Mei 2012 pukul 23.20
Thx inponya sob, tap masih bingung nih,. visit back ya
i Post said :
13 Juni 2012 pukul 17.32
coba dulu gan hehehehe
Unknown said :
17 November 2012 pukul 18.43
nice info gan..

jgan lupa kunjungi
http://neocybertechno.blogspot.com
4 Desember 2012 pukul 22.44
ane izin nyoba dulu sob. :)
jangan lupa mampir ke blog ane ya sob.

best regards.
www.galaxy-ilmu.com
30 Desember 2012 pukul 06.17
Nice tutorial sob..kapan-kapan bakal saya terapkan nih di blog saya.

Nice blog & Thanks :)
Fika said :
3 April 2014 pukul 21.17
oke Gan ... ane berhasil bkin DropDown Turunan'a ... thanks you ...
Unknown said :
7 April 2015 pukul 19.31
Makasih atas i fonya
Bagi yg ska Anime kunjungi http://animebhsindo.blogspot.com/

Posting Komentar

Setiap komentarmu akan sangat berarti sekali buat trik yuwie agar bisa menjadi lebih baik untuk kedepannya. Thanks a lot..

Gabung donk di followers