Tutorial: Jquery Accordion Tab Menu (2)

Assalamualaikum, Salam Sejahtera. :)
Bismillahirrahmanirrahim..

(sebenarnya tak adala sampai goyang tapi qihah tersilap capture lol)

CLICK HERE FOR LIVE PREVIEW

Dulu qihah pernah guna  Jquery Accordion Tab Menu ni di blog. Tapi dah tak guna dah.. hehe. Benda ni sesuai untuk pengguna Mozilla Fireffox dan Google Chrome. Tapi, kalau anda guna tablet/ipad/phone via web, benda ni dia dah terbuka siap2. tak payah hover. Tak tahu kenapa.. memang camtu kot. hehe. Codes asal daripada afiqah. Kebaikan benda ni adalah menjimatkan ruang sidebar anda. Kalau blog yang ada banyak widget kat sidebar tu, boleh la cuba :)


TEMPLATE DESIGNER - denim, minima, simple template, Picture Window dan lain-lain
1. Sign in Blogger, Pergi ke bahagian Layout
2. Pilih Add a gadget ambil HTML/JavaScript.
3. Copy codes di bawah ni dan pastekan di ruangan tersebut.
4. Selepas dah habis edit, boleh SAVE :)

CLASSIC TEMPLATE - blogskins etc.

pandai-pandai cari codes sidebar anda dan pastekan di ruangan sidebar :b (lebih baik tak payah bagitau)

<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);

NOTA TAMBAHAN: kalau nak tambah lagi tab dia, tambah je codes ni kat bawah semua tu ok?

<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>

Paham? kalau ada apa-apa error boleh tanya di comment bawah atau di Facebook saya. adios! Assalamualaikum