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

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