Wednesday, March 16, 2011

Home » » Tutorial : Gobok sliding @ Tab menu accordion

Tutorial : Gobok sliding @ Tab menu accordion

salam bahagia,


Gobok sliding ni nama yang ibu beri.. tapi kalo dalam tips blogger, di panggil  Jquery Tab Menu Accordion  Smile

kodnya adalah :


<style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #ffffff;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#F80680;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>
<div class="msg_list" id="secondpane">
<h5 class="msg_head">Tajuk 1</h5>
<div class="msg_body">
Masukkan kod disini.
</div>
<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">
Masukkan kod disini.
<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">
Masukkan kod disini.
</div>
</div>



kome buleh ubah item2 yang diwarnakan kuning tu…
 
color: #ffffff;  ( warna font )
background-color:#F80680; ( background title box ) – background tajuk
background-color:#F4F4F8; ( background accordion box ) – background gobok
 
 
untuk blogspot :
1. log-in dashboard > design > Edit HTML > Add a Gadget > HTML/JavaScript
2. masukkan kod di atas.. masukkan kod untuk tiap gobok/kotak.. edit apa2 yang patut…
3. save
 
untuk wordpress :
1. log-in dashboard > Appearance > Widgets > Text
2. drag widget Text ke widget area pilihan kome, selalunya kita pilih di sidebar lah.
3. masukkan kod di atas.. masukkan kod untuk tiap gobok/kotak.. edit apa2 yang patut…
4. save


sekian, harap2 membantu.. Winking smile

note:

Kome buleh ajer nak tambah jadi 5-6 slide tu.. tak semestinya 3. dan ada masanya gobok ni tak bergerak @ slide.. tak tau apa kah sebabnya.. tapi most of the time, dia memang akan dok diam2.. bila kita halakan kursor/pointer mouse baru dia terbuka. sangat2 menjimatkan ruang.

credit kepada maribinablog


salam kasih sayang,
.

kalo suka dengan n3 ni, sila tekan yer..!!

Comments (9)

Loading... Logging you in...
  • Logged in as
m@m@ t0meLL's avatar

m@m@ t0meLL · 726 weeks ago

nk tnye la,klu kate nk letak pic,camne nk dpt kn kode nye yek?dh try tp xjd
bee dah try tak jadi lah kak yong ..bee buat semua gobok tu terbuka je tak gerak tutp2 langsung huhu..cam mana kak yong ? bee teringin nk gobok nih uwaa
yezza....gobok sliding ni mmg fevret la kkyong...cume tu lah,sesekala takmo slide2 lak dia...org lain nmpk slide,kite lak xnmpk...hehe...dan cara buatnye pun x serumit yg serupa dgn gobok ni sebelum ni..ape ke name ntah...
ngeee... cikgu Yong.. pergh.. :p
okeh kak..
Jguery memang best.. =)
1 reply · active 732 weeks ago
wadud,
kakyong pun tak abis belajor lagi pasal jquery ni... :p
rajin cikgu kakyong mengajor yer...entah bila la anak murid malas (sayalah) nak practise kat blog die..hehe..
1 reply · active less than 1 minute ago
mizzura,
bila angin nak mengubah2 dah mari.. buat jer...
oh ...dah ada tutorial nih terima kasih kak..
1 reply · active less than 1 minute ago
cuba bee jgn tidak.. ;)

Post a new comment

Comments by

Disclaimer

Ini adalah blog peribadi. Semua catatan @ penulisan juga adalah hak milik peribadi dan pandangan penulis, kecuali dinyatakan sumbernya.

Tidak dibenarkan mengambil tulisan @ idea di sini tanpa kebenaran. Sila minta izin yer kalo nak amik idea @ tulisan di sini.. tapi tolong ler.. usah le amik keseluruhan n3.. penat tau teman memerah otak mencari idea.

Kalo kome main rembat jer n3 teman ni, memang teman tak halalkan.Jika sekiranya teman ade terjumpa mana-mana blog yang menampal tulisan dari blog ini tanpa pernah meminta kebenaran, tuan blog tidak akan teragak2 untuk request supaya n3 tersebut di'remove'.
. .