Jquery tab menu atau kotak auto scroll

Assalamualaikum dan salam sejahtera buat pembaca belog ini. Trimazz aku ucapkan kerana sentiasa sokong belog ni, terharu! KUIKUIKUI. Banyak jugak ya yang bagi pandangan pasal entry sebelum ni, yang pasal belog aku ni berubah. Walhal, korang suka tengok chibidle tu je, HAHA.

Apapun, aku ucapkan trimaz jugak kat korang sebab komen dan like entry- entry sebelum ini. Lain kali aku buat freebies chibidles lagi ek? ( saja nak bodek ). Oh, kalau nak, boleh klik kat menu free tu untuk tengok freebies yang aku dah buat. :)

By the way, hari ini ( ingat kejap...yipyip..yipyip..OH, 5 MEI 2011 ), aku baru je balik dari Kudat, Sabah. Tahu ke kat mana? HEHE. Tak apalah, tak penting. Penat gila but still aku cuba untuk memenuhi permintaan tuto ni. Sebelum ni, ada jugak yang tanya kat shoutbox dan formspring tapi busy then lupa, HAHA sorry!

So, memandangkan dah ada yang tanya lagi, aku buatlah k. Kasihan, soalan- soalan sebelum ni tak dijawab.

Kotak auto scroll? Memandai je aku bagi tajuk, HUHU. Akeylah, kita teruskan tuto ni k. YIPYIP T3T

First, sila Log in ke dashboard blog korang then pergi ke Design--add a gadget-- html/ javascript.

Sudah? Copy code kat bawah ni terlebih dahulu.

<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:black;

margin:1px;

-moz-border-radius: 35px;

border-radius: 35px;

}

.msg_body {

padding: 5px 10px 15px;

background-color:white;

}

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

<center>

Isi di sini </div>

<h5 class="msg_head">Tajuk 2</h5>

<div class="msg_body">

Isi di sini

</div>

<h5 class="msg_head">Tajuk 3</h5>

<div class="msg_body">

Isi di sini 

</div>

</div>

Dah copy ke ni? Akey, sekarang korang paste code kat atas ni kat kotak gadget korang k. Jangan save dulu! Korang kena ubah laa.. HEHE. Akey, meh aku terangkan sikit k.

Semua tulisan yang dah kena warna merah tu je yang korang tukar. Yang lain jangan nak memandai, huhu.

1. #ffffff : warna tulisan korang.

2. Black : warna background tajuk tab korang.

3. white : warna background body tab korang. Nak letak transparent pun boleh, automatik akan sama warna dengan warna sidebar korang :)

4. Tajuk 1, 2, 3 : Pandai- pandailah letak tajuk yang korang nak. Aku mana tahu, HAHA.

5. Isi di sini : Code widget yang korang nak letak.

Kalau korang nak tambah tab lagi, just copy code

 <h5 class="msg_head">Tajuk</h5>

<div class="msg_body">

Masukkan kod disini.

  tu selepas ayat masukkan code di sini tu. Akey? Macam tu, tab yang keempat akan terbina, Gila skema ayat. Haha. Akey, itu je kot. ^^