The Best Accordion for Blogger user
December 14th, 2009
Bismillah, Alhamdulillah
After long time this widget (Accordion for Blogger) I’m not release, some blogger ask me about the script at my sidebar. For that I release this script for you all.
Many blogger already make this but none of them user friendly for new blogger.
This script very useful to everyone, specially for those who have a lot of content on their sidebar and spend much time thinking where to place new stuff.
The method I developed is from Simple JQuery Accordion Menu, I just found it very useful and decided to adapt that technique to Blogger platform. This tutorial will bring you a very easy to implement way to make accordions out of your sidebar widgets, here are some features of my method:
- Easy to install.
- No need to edit html in Sidebar part.
- Freedom to set which widgets will show or hide.
- Have two type, first is Accordion and second is Only hide/show
- After implementing, Widgets are normally edited from Page Elements section.
The Final Result
If you want to see it working please check the live demo.
Demo using Template from Choen if you want you can download here Grid Template
From Demo First Sidebar using Accrodion and Second sidebar Toggle Show/Hide
Step 1 – Installing jQuery Library
This script needs the jQuery JavaScript library, if you already have it installed, you can skip this step, if you dona’t have find this :
</head>
Replace with this
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>
</head>
Step 2 – Installing the Script
Ok now that you’ve made sure that you have jQuery
installed, you need to install the script, find this :
</head>
replace with this :
<script type='text/javascript'>
var sidebarnameacc1="sidebar";
var accordionside1=true;
var sideshow1=new Array(0,0);
var sidebarnameacc2="sidebar2";
var accordionside2=false;
var sideshow2=new Array(0,0);
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/accordionscriptv101-min.js' type='text/javascript'/>
</head>
Customizing
As you have noted you’ll get a few lines that can be customized, those are:
var sidebarnameacc1="sidebar";
var accordionside1=true;
var sideshow1=new Array(0,0);
sidebarnameacc1 is your first sidebara’s id, it is generally just sidebar, but just in case you have a different id you can learn from This post
accordionside1 –> True mean it will be accordion type, false mean
Hide or Show Contents, you can try from Demo.
sideshow1 = number for your chosen widgets to Show, usually if you
have advertisement you want to always show when load with this variable you can
select the widgets.
0 = first widget at your sidebar
1 = second widget at your sidebar and so on
if only one for first widget like this
var sideshow1=new Array(0,0);
if only one for second widget like this
var sideshow1=new Array(1,1);
if two for first and second widget like this
var sideshow1=new Array(0,1);
if many you can add like this
var sideshow1=new Array(0,1,2,3,4,5);
Ok Finish only that the step if you want to give Style you can continue on
step 3
Step 3 – Only for Advanced Users : Placing the styles on your CSS
I give “headactive” class to make different when Content show or hide, you
can change waht ever you want for that template I use this style.
find this in your template :
]]></b:skin>
[/html]
replace with this :
[html]
.sidebar h2.headactive {
background-color: #d77218;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}
.sidebar2 h2.headactive {
background-color: #d77218;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}
]]></b:skin>
ok Only that I hope you can use for your blog
129 Responses to “The Best Accordion for Blogger user”
Leave a Reply
it’s nice mas abu
sayangnya saya ga’ pake blogger. Pusing sama eit kode html-nya.
Salam kenal.
keren Abu, sangat menarik, suatu saat saya akan mencobanya, saya baca2 dulu, insya Allah kalo sudah tau sedikit2 tar tak cobain, terima kasih sahabatku mas Abu Farhan! kapan2 datang ketempat saya ya..
wah sayang sekali abu, klo utk script yg TAB sidebarnya utk nyesuain border active tabnya biar pas sm template blog ane gmn abu?
jd ga bisa dipake dong abu di blog ane
ia susah ngeceknya kalau kebanyakan script yg dipake
hehehe…
saya masih bingung pake script ini, maklum pemula…
mau belajar dulu
jd solusinya gmn abu?
agak susah emang karena pas aku debug yg ganggu ga kelihatan. karena byk bgt script yg dipake, padahal dalam script ku dah pake Jquery noconflict jadi ga mungkin conflict dg mootools.
assalamu’alaika abu….afwan datang lg neh dgn pertanyaan, mudah2an ga cape y ngeladenin ane…hehehehe, scriptnya sdh saya pindah di closing body tapi malah muncul warning unresponsive script abu
@mas beben: hehehehe….maaf bawel neh mas, mungkin mas jg bisa bantu saya, pengen lebih simpel aja blognya mas biar ga terlalu panjang
Wa’alaikumsalam
jQuery nya ga selesai dipanggil karena ada script yg menghalangi, jadi hanya perintah jquery awal aja yg terlaksana, dimana semua sidebar menutup semua. Ini kemungkinan karena byknya script yg lain yg kemungkinan mempunyai function yg sama
assalamu’alaikum..
om Abu kok kagak bisa
kok pas diedit tulisannya gini
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type “script” must be terminated by the matching end-tag “”.
tolong bantuannya, terima kasih
maklum newbie
Wa’alaikumsalam, kalau ikutin semua petunjuknya harusnya ga ada masalah, sudah banyak yg pake script ini lancar2 aja
sudah om Abu, tapi masih gitu..
ada peringatan kayak diatas gitu >,,<
mungkin salah ngopi script klik tombol “view source” baru copy isinya
sudah sama persis om abu, kagak ada yang beda..
duh duh bingung ane..
kalau dah ngikuti aku ga ngerti lagi salahnya ap, karena semua org lancar2 aja sih masukan scriptnya
udah saya pasang lg abu, tp ga jln scriptnya, tolong di liat y…jazakhalloh khoir
Wah maaf blog lumayan berat, karena byk bgt scriptnya.
disana ada pake dua JS framework besar ada Mootools dan jquery.
kenapa ga bisa jalan karena posisi jquerynya di dalam sidebar. jadi bagusnya yg tab accordion letaknya bukan sebelum closing head tapi sebelum closing body Insya Allah bisa
ni masalahnya apaan sih si suschenko???
penasaran…heuheuhue
o iya abu di klik aja gambar kartunnya nanti cboxnya akan bergeser ke kiri, ok nanti sy coba pasang lg accordionnya…sukron
assalamualaikum pak abu, berhubung kebanyakan postingan antum berbahasa inggris ana sempat mengira bahwa antum bukan orang indonesia. akhirnya berkomentar dalam bahasa inggris (padahal bahasa inggris saya sedikit belepotan) di ulasan tentang page navigation. Saya sendiri baru mulai blogging sekitar 3 bulan ini. Mengenai widget acordion ini apakah benar tidak akan membuat loading ke blog saya jadi berat. Karena saya sedikit ragu2 untuk memasangnya. disamping belum terlalu perlu …. Mengenai page navigation, blog yang saya follow cinema3satu.blogspot.com juga mempergunakannya dan berhasil. Karena itu saya sangat heran mengapa tidak berhasil ketika saya pasang di blog saya…..
assalamu’alaika kang abu…gmn kang bisa di bantu abu knp script TAB nya abu bisa jln di blog saya tp script ACCORDION nya ga bisa? mohon pencerahnnya abu…sukron
wa’alaikumsalam, coba pasang aja accordionnya nanti ana cek. CBOX nya nutupnya gimana tuh, ganggu liat sidebar
Nice …… kang. Nyoba ah buat convertan template ku. heheheheehehehe
he..he.. singgah juga, oh iya maaf tuh Link nya tertutup karena accordion, nantilah kalau dah ganti theme baru ane buka Insya Allah.
ini udh lama bgt bro,…gw udh liat di http://www.ajax-codex.blogspot.com kemana aja….!!!!!!
Maaf Accordion menu lebih lamaaaaaaaaaaa lagi sebelum ada blogspot itu. Tapi Accordion yg saya gunakan adalah “CARA MUDAH MENGGUNAKAN ACCORDION DI BLOGGER” bukan accordion secara umum, kalau Accordion menu sih dari dulu juga sudah ada cuman susah digunakan.
Lagian blog itu aneh aja ga bisa bedakan AJAX, JQUERY dan JAVASCRIPT.
Blog tersebut masih gunakan ddaccordion.js yg sangat panjang dan ga lengkap funsinya.
Dalam template itu sudah pake jquery tapi utk acccordion masih pake ddaccordion.js khan sangat buang2 fungsi yg ada di jquery.
Lihat aja dalamnya sangat sulit menggunakan ddaccordion.js itu dalam blogspot.
jadi sebelum komentar baca baik2 dulu Artikelnya.
Assalamualaikum terima kasih …Kang Abu Farhan….mau dicoba diblog saya…tapi saya baru 3 bulan ngeblog…kalau ada yang kurang paham sudi kiranya dibantu…..semoga ilmu yang diberikan mendapat pahala…amin
Wa’alaikumsalam, semoga bermanfaat.
awalnya saya pake script yg Tab abu dan bisa jln scriptnya, cm krn bordernya kelebaran jd saya hapus saya ga tau cara ngerubahnya biar sesuai sm template blog saya, lalu saya coba yg accordion tp ga bisa jln scriptnya
tapi utk script yg sidebar jQuerynya bisa jln di blog saya abu, tp sayang pd active tab nya ada bordernya yg terlalu lebar ga sesuai utk tamplate blog saya, gmn cara menghilangkan bordernya abu?
Ini script mana yg dipake Accordion atau Tab, kalau make script dari saya baik Accordion atau Tab harus pilih salah satau karena ga bisa bersamaan.
assalamu’alaika abu…..tetap ga bisa abu, wah padahal keren bgt scriptnya, sayang ga bisa jln di blog saya
Wa’alaikumusalam, maaf karena terlalu byk script blog anda susah saya ceknya, kayaknya ada yg js conflict dalamnya.
Al Hamdulillah i have got new tutorial again. Jazakumullah akh abi farhan []
Alhamdulillah, I hope it will be useful for you and others, Waiyyakum ya akhi.
Tampanya Anda benar2 bekerja keras untuk ini, salut dan sukses selalu buat karya2nya :)
assalamu’alaika abu, scriptnya ga bisa jln di blog saya abu, mohon bantuannya. Saya mo tanya:
1. stlh jQuery kita download apakah harus di Run? jika iya gmn caranya?
2. apa bedanya step 1 dg step 2? afwan bhs inggris saya agak pas-pasan abu…hehehehe
3. jika id sidebar sy adlh ’sidebar’ apakh angka 1 di sidebarnameacc, accordionside & sideshow hrs sy hilangkan?
klo abu farhan berkenan bisa kiranya pertanyaan saya abu jwb via email jg susan_prabowo@yahoo.com, jazakalloh
Wa’alaikumsalam
1. Karena blog anda sudah ada jquery jadi ga perlu lagi step 1
2. Step 2 itu memasang script accordionnya, jadi wajib di laksanakan.
3. Angka 1 nya wajib ditulis karena itu variabel, jadi untuk anda bisa sana persis dg tutorial skr.
Wah ini dia yang sudah lama saya cari kang,mudah,elegan,simple and ga’terlalu banyak embel-embelnya.Saya akan coba di bloig saya mudah-mudahan berhasil.
subhanallah kang…ternyata ketemu juga ni disini….makasih kang…salam kenal ni dari negeri kinanah…
mantap ni kang….masyallah…kerennya…mw dipasang di blogspot ah…
kang abu farhan
saya udah pake di blog saya yg satunya nih buat proyek dan bener bagus
kemarin baru mau tanya cara buat yg open hidenya kek gini
yang dibuka satu yang lain nutup
eh sudah dibuatin
matursuwun wae lah :D
dan kemarin pake navigasi om abu juga tapi pas tak pasang kok ternyata ada widget by om abunya gede banget jadi ane lepas… lago males mau utek utek host script segala wkwkwk
oke sekian laporannya
dan makasih untuk acordionnya mantep pisan :D
kalau pengen ngilangin bisa tanya ke choen deh atau denny, ane persilahkan deh ilanginnya.
iya mas begitu tahu scriptnya manggil jadi males buat host..biasa lagi konsen ma post aja hahaha :)
lihat aja blog saya yg gak ada gadget sama sekali om
wkwkwkw … makin tua makin pusing dengan code hehehe
dasar tua luh…wkwkwkw kabuuuurrrr
its a nice template. I can not work ad templates that I drive posts
bro…
code-codenya disimpan dimana?
maaf saya kurang paham
thx..
Ikuti aja petunjuk di atas, cukup sampe Step dua aja udah selesai
one more important request
My blog was blocked by google and I got mail like that” Your blog at http://paisavassool.blogspot.com/ has been reviewed and confirmed as in violation of our Terms of Service for: SPAM. In accordance to these terms, we’ve removed the blog and the URL is no longer accessible.” What i do plssss send me reply as soon as possible..
I don’t know about that, sometime problem occur if you make Spam comment to other blog or your blog not follow TOS of blogger. You can ask to blogger about this ?
Great! Simple and very useful! You did an awesome work, as always. Congrats!
Thanks for coming here, I just make modification for your template please check my comment in your blog
terima kasih atas tips dan triknya mas…mungkin lain kali saya akan pasang di blog saya yang blogspot. tapi untuk sementara saya bookmark dulu halaman ini.
—————————————————–
sekedar tambahan untuk topik yang berbeda:
mau tanya. gmn cara buat halaman statis? maksudnya gini. di halaman salah satu posting di blogspot, mau kita jadikan satu halaman penuh tanpa header, sidebar, footer dll. jadi yang tampil pada saat posting tadi dipanggil cuma data:post.body aja yang keluar.
—————————————————
terima kasih
mantab gan…
keren mas..dicoba ah
mas klo template wp yang pnya mas kek gini.. dmn ya ? hehheh ..maaf klo melenceng dr topik..
Silahkan download di http://www.wpthemedesigner.com/ pilih blogstarter
mas klo template wp yang pnya mas kek gini.. dmn ya ? hehheh ..
maaf klo melenceng dr topik..
Oh this is simply awesome Abu ! so I see you have been busy down in the laboratory eh? heheee, this came out perfect ! Kudos !
M.
Thanks, yes now for finishing my dissertation
harus sabar neh nunggu satu2 biar hacknya keluar semua. jadi sering2 berkunjung kesini ya om abu :D
oh ya menanggapi ada yang pengen makai semua amazing widget punya abu, sedikit saran aja. pilihlah widget yang sesuai dengan blog anda, jangan terlalu ramai, orang malah jadi enggan berkunjung karena loading akan menjadi berat. pilih yang usefull namun menarik.. :D
betul abu?
nice great menu friends, i like that. I will learn in here ^.^
bagus banget tutornya,makasih ea^_^
Hhmmh..finally I found the best site to be refference, heheh..! This is a great blog Brother..! Salam kenal…
Wa’alaikumsalam
Nice posts. I like it.
terimakasih sy selalu mempraktekkan script-nya mas Abu,keren..
terimakasih, bapak…atas tutorial accordion for blogger.
mohon dukungan dan sarannya untuk blog saya.
salam dari Balikpapan, kal-tim
wah aku dah pake trik yg dr Mrs.annie (blog university), lebih smooth euy kalo pake accordion yah BOS, gitu dong bos via display memostingnya. Selain dibaca para blogger seluruh dunia..kan kalo up to date aku tau…ekekkekeke bravooo accordion…eh BOS ABU FARHAN
Ya benar ini bisa juga digunakan kayak punya Annie tapi punya Annie ada kekurangan :
1. Terlalu sulit dipake, tiap Widget harus di setting manual
2. Transisi tidak smooth
3. Hanya Show dan Hide bukan Accordion
sebenarnya kalo mau smooth tinggal mengkombinasikan ama jquery bawaan dari google. Tapi sayangnya ana gak bs script, tp dah coba pasang jg sih yg hide/show dg menggunakan trik tag id unique name. Hahaha…mksdx tuh sama fungsinya dg annie buat buka dan tutup bos, bkn accordionnya ( kalau accordion mah saya jg gak tahu apaan tuh ).. hsuahsuhauhsuhauhs
Bro… saya sudah coba script dipostingan ini, hanya saja kenapa kok belum terlihat seperti apa yang ada dipostingan ini ya..,
Mohon pencerahannya bro..
Blog anda sudah pake Script Auto Tab dari script saya sebelumnya jadi ga bisa pake ini, ga bisa dalam satu sidebar dua script sekaligus
Thanks pencerahannya… btw saya punya blog lain yaitu http://blackpulsy.blogspot.com, tetapi tetap tidak juga bisa.
Mohon pencerahannya sekali lagi.. maklum masih newbie.
yg itu blognya belum dipasang Jquery
Thanks again bro..setelah install Jquery langsung bisa. Ada satu lagi neh bro.. kalau seperti yang di blog ini apa yang musti disetting?
Semua script dari 2 blog saya banyak menggunakan dari blog Anda bro..
itu menggunakan Accordion False
Rasanya semua widget yang Abu buat ingin saya tampilkan di blog saya tapi saya takut blog saya jadi berat nggak ketulungan.
Saya boleh request nggak? saya ingin menampilan top comentator dengan avatar mereka, biar mirip ama yang di wordpress…
Ya dipilih2 aja yg berguna utk visitors, kalau accordion ini ringan bgt krn filenya kecil. Page Navi yg baru juga sangat ringan karena file lbih keci dari sebelumnya dan ga membaca semua JSON file seperti hack lama.
Top commentator belum aku keluarkan, karena itu yg bikin berat karena harus baca semua komentar, jadinya belum dikeluarkan karena ga perlu2 bgt. Blogger belum ngasih Avatar di jsonnya jadi belum bisa
wah bisa belajar script disini…:)
Wow. nice tutor abu. Can we PM Through Yahoo? You can check my Email for My YM ID
Thank’s for come here. Added, please check your YM
http://www.chandra-unikom.co.cc/2009/12/template-for-blog.html
datang ke blog saya, ayo..
follow saya, dan saya akan follow anda, komentarin blog saya, dan saya akan komentarin blog anda.
terima kasih.
Hati2 di banned blogger karena dianggap spam, anda menulis komentar yg sama dimana2
Hi i want full Installation code for Photo Gallery slide show for Posting pictures in blog post..like http://celluloidtamil.com/ blogs post.. pls update soon.
Thats Gallery using Smooth Galllery you can learn here http://smoothgallery.jondesign.net/
Thats using mootools you can check my http://www.abu-farhan.com/tag/falkner/ template using that gallery. I think many blogger already make tutorial for that.