Kuroi KENSHIN
KUROI KENSHIN
HTTP://FARANYMBOBOIBOY.BLOGSPOT.COM
posted by Fara_nym | Hyoukurona Saturday, 12 January 2013 @5:12 pm 3 comments
Tutorial: Jquery Accordion Tab Menu
Assalamaualaikum!*peace upon to you!*

ha hari ni Fara nak ajar korang cam mana nak buat Jquery Accordion Tab Menu
(ala yang bila sentuh pastu dia keluar gadget! >.<) tengok gambar bawah ni!

sorry gambar buruk! >.<

ok ,korang ikut langkah2 yang fara tunjuk ni ye!(creadit tu adik kihah)

1.dashboard-->layout--> add gadget-->html/java script..

2.copy code ni paste kat html/java script!
<style type="text/css">
.accTab {width: 225px;padding: 1px;}.accTab2 {padding:3px;display:block;height:17px;width:225px;background:#fff;-webkit-transition-duration:.8s;-moz-transition-duration:.8s;overflow:hidden;}.accTab2:hover {height: 150px;}tfqh01{font-family:consolas;padding-top:1px;font-size:12px;color:#000;text-align:center;text-transform :uppercase;background: #FFC2DA;
letter-spacing:2px;height:16px;display:block;-moz-transition: 0.5s;-webkit-transition: 0.5s;}</style><div class="accTab"><div class="accTab2"><tfqh01>hover here</tfqh01><div style="font:10px arial; height:150px; overflow:auto;margin-top:2px;">ISI. you can put anything at here. Contact me? shoutbox? ads? ~ whatever and ever.</div></div></div><div class="accTab"><div class="accTab2"><tfqh01>Tajuk</tfqh01><div style="font:10px arial; height:130px; overflow:auto;margin-top:2px;">Isi 2</div></div></div>
*225 ni ada dua kan? ni lebar dia. So, kalau nak ubah lebar dia, ubah dua dua ni okay? jangan satu je.. nanti *nampak pelik. 
*150 ni pun ada tiga, kalau nak ubah, ubah tiga2 ok? Yang ni untuk hover dia. ruang/panjang/tinggi kotak tu selepas hover.
*#FFC2DA ni untuk background tajuk dia. Boleh ubah kepada codes warna yg lain. boleh cari di SINI. Kalau tak nak yang plain, boleh tukar kepada background bergambar
*Tajuk dan hover here. tukar kepada perkataan anda sendiri
*ISI tukar la kpada2 pun. kalau nak letak gadget, paste je dalam tu ok?
CARANYA : Tukarkan background : #FFC2DA; kepada background: url(URL GAMBAR);
 ok tu je sorru lah ada yg cacat! assalamaualaikum

Labels:


FARANYM | HYOUKURONA 2017