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.


{ 67 comments.. read them below or add one }

iza iza 9:35 PM
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?
Nescafe ais Nescafe ais 10:40 PM
@izaSalam kembali.

boleh saja guna. Tak payah buang kod tu. Tapi, apa-apa hal, kena test dulu.
alfi alfi 12:19 PM
kod ni memang jadi..tapi kenapa yang keluar cuma dua tab je :) please :)
Nescafe aisNescafe ais 2:22 PM
@alfi

Cuba alih tab tu ke tempat lain
kue kue 8:10 PM
cmne erkk nak letak kat ruang (masukkan code) nak letak link ke entry yg lain??boleh kerr..tulun ajar plzz
Nescafe aisNescafe ais 8:30 PM
@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
kue kue 9:30 PM
@Nescafe ais

boleh guna yang ini kerr??kue nk bt yg link ke entry kite yg lain..pakai nih gak kerr
Nescafe ais Nescafe ais 9:33 PM
@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
Kazen Kazen 11:59 PM
nes mntak kod utk top commentor xde ke ...hehe
Neskepi aisNeskepi ais 1:13 AM
@Kazen

Check sini bro

http://maribinablog.blogspot.com/2009/08/membina-widget-top-commenters.html
Kazen Kazen 1:30 AM
@Neskepi aiscam mane ek nk wat bloglist @ senarai bloggers kt static page selain buat link satu persatu
Nescafe ais Nescafe ais 1:56 AM
@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.
Aku Dan Teksi Aku Dan Teksi 1:58 AM
Salam tuan tanah
TQ untuk info ini,buat dan menjadi.
Nescafe ais Nescafe ais 2:00 AM
@Aku Dan TeksiTq untuk anda juga sebab sudi singgah sini.
Kazen Kazen 2:00 AM
haha pnjg cerita nmpknye...cam nk ade tutorial bru jerk...ak dh nmpk sebelah kiri blog tue
Nescafe ais Nescafe ais 2:13 AM
@Kazentu test jer. Ingat nak try masukkan shout box kat situ.

Rasanya, nak senang, memang kena masuk manual link list tu.kehkeh
Nescafe ais Nescafe ais 2:14 AM
@Kazen
Ko try pasang benda kat sebelah kiri ni dalam blog. Nnati aku bagi link untuk Demo kat blog ko. Amacam bro?
Nescafe ais Nescafe ais 2:30 AM
@KazenAku tukar dulu iconnya. Nanti dah siap aku ifon kat blog ko ok.
Kazen Kazen 3:18 AM
@Nescafe ais bro camne nk letak ads kt header cam kt blog nie...blog ak kan kosong je ats tue
cicakgirl cicakgirl 12:14 PM
dah cuba, memang menjadi!
kalau nak tambah tab sendiri pun boleh kan?
farah jaamat farah jaamat 1:40 PM
thank jd laa..hihi
akuanakpahang (AAP) akuanakpahang (AAP) 6:52 PM
Salam Tuan, Terima kasih saya dah cuba pakai menarik juga :)TQ Jom Singgah "Cerita daripada sebuah kehidupan - akuanakpahang"
iza iza 12:21 AM
@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.
Nescafe ais Nescafe ais 12:37 AM
@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.
Kazen Kazen 1:39 AM
@Nescafe ais bro add ak kt fb then bg kod kot msg

http://www.facebook.com/profile.php?id=1794016568
Iza Iza 11:13 AM
@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..
Iza Iza 11:44 AM
@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..
eB@mamaAerish'n'Aed [email protected]'n'Aed 5:24 PM
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
eB@mamaAerish'n'Aed [email protected]'n'Aed 5:31 PM
mslhnyer kat kod widget tuh... mana nk tgk kod widget yer?...
Nescafe ais Nescafe ais 7:43 PM
@[email protected]'n'Aed

Cuba search kat atas tu untuk cari widget
Nescafe ais Nescafe ais 7:44 PM
@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
Pensel Kontot Pensel Kontot 5:07 PM
dah buat...
menarik
tq ye bg tutorial ni
iza iza 10:26 PM
@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...
:Cikgu Akim: :Cikgu Akim: 12:15 AM
saya da cuba..thnks..tapi kenapa ada 2 tab ja?????
Syira Bieber ♥ Syira Bieber ♥ 8:22 PM
Kalau nak buat tab camni gak tapi untuk pegi ke page yang laen boleh tak? kne buang code yang mane? :)
noraim noraim 8:19 PM
terima kasih :)
chindy utami chindy utami 12:22 PM
thanks, tapi bpleh tau ndak , gimana cara dapatin kode widged nya?
dean dean 11:13 PM
da lame sy crik bnda alah ne
beaty beaty 12:10 PM
da buat ni..n then da buat tutorial for sharing..I ade credit sma blog ni
aibaks aibaks 9:25 AM
nice... nak try gak
Ummi Hanie Ummi Hanie 5:17 PM
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
Anna Cullen Anna Cullen 7:32 PM
amek ye yang ni?
thanks :)
NadiRah NadiRah 8:25 PM
ayai!!! cane nk follow ni????
Anis Diyana Anis Diyana 11:34 AM
Terima kasih :) http://anis-diyana.blogspot.com/2011/02/tutorial-jquery-tab-menu-accordion.html
Yastro Yastro 11:28 AM
dah bubuh gak...tp 2 jek..hehehe
uwmaisarah uwmaisarah 5:05 PM
tab terakhir tak kuar tp xpelah, thanks!
Bro Azqar Bro Azqar 12:05 PM
Boleh tanya. boeh x kalau buat tab tu melintang. dan bukak pun melintang.?
TIPS BLOGBEGO TIPS BLOGBEGO 8:00 PM
salam kenal dulu.
trims kawan informasinya saya suka pergerakannya sangat elatis cuma setiap "Masukkan kod disini" diakhiri dengan </div>
||aLeaSaRa|| ||aLeaSaRa|| 1:26 AM
tq sgt2 dah berjaya yehaaaa!!!
||aLeaSaRa|| ||aLeaSaRa|| 3:42 PM
This comment has been removed by the author.
aleasara aleasara 3:59 PM
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
gaung gaung 4:30 AM
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
™ﻔﯽﺬﺍﻧﺍ ™ﻔﯽﺬﺍﻧﺍ 10:38 PM
Salam, saya nak tahu mcm nak tambah tab kt header ye?
Подтверждаю Подтверждаю 3:25 PM
hm..error?
tab yang ke-3 tu jadi tersorok dalam tab-2.
huhu..

tertinggal.. script /div?
Nescafe ais Nescafe ais 8:31 PM
@ПодтверждаюSori bro. Javascript yang dalam google site tu saya dah remove. Sebab tu efek nya tak jadi. Nak kena hostingkan semula javascript tu
zareliqa afiqa zareliqa afiqa 4:26 PM
kenapa sy buat dia terus terbuka erk?tak tutup pun?? :(
ZieShop ZieShop 12:27 PM
salam..boleh tolong tak..saya dah buat tab menu tu tapi cam mana nk letak isi dalam setiap tab
asa banie asa banie 12:02 PM
Macam mana nak letak this thing dekat blogskin/classic template? balas di blog sya jika boleh :)
asa banie asa banie 12:04 PM
Okey, takpe, dah tawu dah, anyway, good job :)
Cik Tieka Cik Tieka 11:51 PM
nice info..jadi!!..cuma nakc ari code utk blog achieve lagi ..huhu