Jquery Tab Menu Accordion versi 2

Jika anda ingin menjimatkan ruang dibahagian sidebar, anda boleh mencuba Jquery Tab Menu Accordion seperti yang boleh dilihat pada demo di sini(sila klik). Pada Jquery Tab Menu Accordion tersebut, anda boleh masukkan berbagai jenis widget seperti Shout box, Top Post,Recent Post, Recent Comment, Top Commentator dan sebagainya mengikut citarasa anda sendiri. Jquery tab menu accordion ini semamangnya sangat menarik dan mudah kerana anda hanya perlu meletakkan cursor mouse pada title tab menu tersebut.

Untuk memasang Jquery tab menu accordion sila ikut beberapa langkah yang mudah dibawah.

Langkah 1

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.

Copy dan paste kod di bawah pada content HTML/Javascript.


<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="http://javscript-code.googlecode.com/files/menuaccordion.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>

p/s:

Untuk mengubah warna background title box, title font dan background accordion box, sila edit kod yang di bold dengan warna biru.

color: #ffffff;  ( title font )
background-color:#F80680; ( background title box )
background-color:#F4F4F8; ( background accordion box )

Untuk memasukkan widget seperti Shout box,Top Post,Recent Post, Recent Comment, Top Commentator dan sebagainya, gantikan teks Masukkan kod disini. dengan kod widget yang anda inginkan.

Edit teks Tajuk, 1 Tajuk 2, dan Tajuk 3 dengan title yang anda inginkan.

Langkah 2

Akhir sekali, klik Save.
Jquery Tab Menu Accordion versi 2

Salam maal hijrah...
Menarik ni, nanti aku cuba...
ringan tak benda ni?

kalau aku guna satu kod,bila klik, dibuka pada tab lain, agak2 fungsi ni berkesan tak?ker aku kena buang code tu?

@izaSalam kembali.

boleh saja guna. Tak payah buang kod tu. Tapi, apa-apa hal, kena test dulu.

kod ni memang jadi..tapi kenapa yang keluar cuma dua tab je :) please :)

Nescafe ais
delete

@alfi

Cuba alih tab tu ke tempat lain

cmne erkk nak letak kat ruang (masukkan code) nak letak link ke entry yg lain??boleh kerr..tulun ajar plzz

Nescafe ais
delete

@kue

Contoh kod: Recent Comment

<script style="text/javascript" src="http://sites.google.com/site/testingsahaja/recentcomments.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = false;var showposttitle = false;var numchars = 40;</script><script src="http://URL disini.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Gantikan kod yang atas ni denagn teks Masukkan kod di sini

@Nescafe ais

boleh guna yang ini kerr??kue nk bt yg link ke entry kite yg lain..pakai nih gak kerr

@kue

ni contoh untuk recent comment. Yang tu kena pakai kod widget recent post atau popular post.

Cuba cari kod tu. Try search kat atas tu

nes mntak kod utk top commentor xde ke ...hehe

Neskepi ais
delete

@Kazen

Check sini bro

http://maribinablog.blogspot.com/2009/08/membina-widget-top-commenters.html

@Neskepi aiscam mane ek nk wat bloglist @ senarai bloggers kt static page selain buat link satu persatu

@Kazen

Boleh rasanya kut. Tapi leceh sikit. Aku tak pernah try lagi. Nak kena buat link list pada Add A Gadget tu. Lepas tu save dulu kat sidebar macam biasa. Lepas tu kena copy kodnya dalam script template, paste pada static page.

Salam tuan tanah
TQ untuk info ini,buat dan menjadi.

@Aku Dan TeksiTq untuk anda juga sebab sudi singgah sini.

haha pnjg cerita nmpknye...cam nk ade tutorial bru jerk...ak dh nmpk sebelah kiri blog tue

@Kazentu test jer. Ingat nak try masukkan shout box kat situ.

Rasanya, nak senang, memang kena masuk manual link list tu.kehkeh

@Kazen
Ko try pasang benda kat sebelah kiri ni dalam blog. Nnati aku bagi link untuk Demo kat blog ko. Amacam bro?

@KazenAku tukar dulu iconnya. Nanti dah siap aku ifon kat blog ko ok.

@Nescafe ais bro camne nk letak ads kt header cam kt blog nie...blog ak kan kosong je ats tue

dah cuba, memang menjadi!
kalau nak tambah tab sendiri pun boleh kan?

Salam Tuan, Terima kasih saya dah cuba pakai menarik juga :)TQ Jom Singgah "Cerita daripada sebuah kehidupan - akuanakpahang"

@Nescafe ais

ada 2 soalan.

1.napa tab bawah sekali tak terbuka?dah puas aku edit tp tak nak keluar jgk.code apa yg tertinggal agaknya?

2. aku nak letak url bloglist kat menu bar dan senarainya kat ruangan post entry.ada tak cara yg serupa mcm senarai blog kat sidebar?supaya setiap kali blogger up date blog,kita akan tahu. Kalau ada caranya,tlg la buat tutorial.aku amat perlukannya...aku tak nak yg biasa2 tu.tak best.

@iza

1. Mungkin ada problem pada template. Aku dah try pasang benda ni kat template lain. Takder masalah.

2. Yang tu kena buat manual sebab kat post tak boleh letak script. Ada script yang tak boleh run.

@Nescafe ais bro add ak kt fb then bg kod kot msg

http://www.facebook.com/profile.php?id=1794016568

@Nescafe ais

1. aku dah cuba buang satu gadget iaitu exchange banner,mgkin code nya sama dgn ruang banner contest kot.skrg ni ok la,dah terbuka.

2. kalau buat manual, maksudnya statik la kan.kalau up date, tak ada apa2 perubahan la..
Ok,thanks..

@Nescafe ais

Lagi satu, gadget ni tak boleh buat 2 dalam 1 blog sebab 1 akan terbuka, satu lg tertutup terus.
kalau nak buat dua, ada tak kod yang nak kena tambah atau nak buang?
aku ada 2 side bar,ingat nk bagi balance la antara kedua-duanya..

dh wat box, tapi x tau camner nk letak banner yg byk2 tuh kat dlm... leh tlg?

reply kat sini leh bagitau dh reply comment?

www.mamaaerish.blogspot.com

TQ

mslhnyer kat kod widget tuh... mana nk tgk kod widget yer?...

@eB@mamaAerish'n'Aed

Cuba search kat atas tu untuk cari widget

@Iza

Nak pasang tab accordion yang sama boleh, tapi dia punya ID mesti unik. Tak boleh sama. Kalau sama, tab yang lagi satu akan jadi error

dah buat...
menarik
tq ye bg tutorial ni

@Nescafe ais

Ko bagi la ID yg unik tu, aku mana tau ID apa yg unik, nanti aku nak pasang 1 lagi...
reply la, nanti aku datang jengok komen lama...

saya da cuba..thnks..tapi kenapa ada 2 tab ja?????

Kalau nak buat tab camni gak tapi untuk pegi ke page yang laen boleh tak? kne buang code yang mane? :)

thanks, tapi bpleh tau ndak , gimana cara dapatin kode widged nya?

da lame sy crik bnda alah ne

da buat ni..n then da buat tutorial for sharing..I ade credit sma blog ni

nice... nak try gak

suke banget mende ni..dha buat n mnejadi pun..cume kekadang tu nmpk mcm dia takmo berkelip2/sliding lak ...nape jadi gitu ek Nes ?
TYVM

amek ye yang ni?
thanks :)

ayai!!! cane nk follow ni????

Terima kasih :) http://anis-diyana.blogspot.com/2011/02/tutorial-jquery-tab-menu-accordion.html

dah bubuh gak...tp 2 jek..hehehe

tab terakhir tak kuar tp xpelah, thanks!

Boleh tanya. boeh x kalau buat tab tu melintang. dan bukak pun melintang.?

salam kenal dulu.
trims kawan informasinya saya suka pergerakannya sangat elatis cuma setiap "Masukkan kod disini" diakhiri dengan </div>

tq sgt2 dah berjaya yehaaaa!!!

This comment has been removed by the author. - Hapus

kite dh pasang 3 tab ni.tapi mmg betul satu lagi tak blh buka.dulu iza ada mta bro bgkan ID unik tu.tlg ye bagi tak sbr nk apply huhu

maaflah reply di entri lama lama.mahu tanya nie. contohnya : follower widget. kita mahu cari kat mana kode dia..kene bukak dekat edit html n copy kode dia la ehh ?nescafe tak kesah tgglkn komen di mana2 entri blog kami..kami da buat da benda ni jadi..cuma tu jer persoalan yang ada..terima kasih

http://no92a.blogspot.com

Salam, saya nak tahu mcm nak tambah tab kt header ye?

hm..error?
tab yang ke-3 tu jadi tersorok dalam tab-2.
huhu..

tertinggal.. script /div?

@ПодтверждаюSori bro. Javascript yang dalam google site tu saya dah remove. Sebab tu efek nya tak jadi. Nak kena hostingkan semula javascript tu

kenapa sy buat dia terus terbuka erk?tak tutup pun?? :(

salam..boleh tolong tak..saya dah buat tab menu tu tapi cam mana nk letak isi dalam setiap tab

Macam mana nak letak this thing dekat blogskin/classic template? balas di blog sya jika boleh :)

Okey, takpe, dah tawu dah, anyway, good job :)

nice info..jadi!!..cuma nakc ari code utk blog achieve lagi ..huhu