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
Saya sudah coba mas tapi kok gaq da efek ya???
How to check sidebar id???
Super!
Thanks!
@ Om Abu Farhan : ini bisa di satuin sama yg TAB WIDGET ?? Jadi Kesimpulnnya .. yg atas 3 widget pke yg tab. dan yg bawah sampai seterusnya pke accordion ini bisa g ???
[...] Accordin – A unique blogger widget from Abu Farhan. This will show or hide your widget on your [...]
assalamualaikum..wr.wb
sangat bermanfaat….. insyaallah berguna bgi saya dan yang lain……
assalamualaikum..wr.wb
sangat bermanfaat….. insyaallah berguna bgi saya dan yang lain…
[...] to read I made modification from previous script Table of Contents for Blogger new style and I used Accordion. Feature of this script [...]
Jazakallah.. Bagus banget tutorialnya, jadi pengen coba. :D
kenapa pada template saya tidak bisa ya mas farhan, saya menggunakan template yang dari draftblogger itu yang perancang template…
saya belum lihat file js nya disana
.assalamualaikum, mas farhan, knp di template saya gak bisa ya mas???
.template saya lightword (versi blogspot), silakan di cek ke blog saya mas farhan..
.mohon pencerahannya, ditunggu lho mas..
.jazakallah khoiron katsiro
[...] Table of Contents for Blogger new style I make new modification from previous script and Now I used Accordion. Feature of this script [...]
jazakallah.. bagus tutorialnya..
Assalamu’alaikum
Postingan Abu Farhan ini, selalu bikin salut.
my God, i thought you were going to chip in with some decisive insght at that end there, not leave it
[...] Accordin: A unique blogger widget from Abu Farhan. This will show or hide your widget on your sidebar. A [...]
thank, nice tutorial
[...] Untuk membaca tutorial lengkap tentang pemasangan The best Accordion, silahkan di baca disini! [...]
Great work bro…i would love to work with blogger’s like you.
Guys check out how to install featured content slider in blogger using jquery (which you see in this blog)
http://www.bloggermint.com/2010/02/featured-content-slider-for-blogger.html
good tutorials, 10x for sharing.
i wanna ask u something. how did you do that script ?
http://all-in-one-blogger-widget.googlecode.com/files/accordionscriptv101-min.js
i looked and again but i never understood. what do they mean in script code? especially the last definitions as initMenu2|location|href|indexOf|blogger|headactive|if|sidebarnameacc1|h2|is||normal|sidebarnameacc2| bla bla …
if you tell me , i’ll be happy :) 10x again …
take care
Makasih banyak infonya
mantab tenan….
kang, saya sudah pasang scriptnya di template saya. tapi kenapa tidak ada perubahan. yang anda bahas kan itu pada template yang anda bahas. tapi bisa ga kalo pake template saya sendiri, gimana caranya. apa kah div id=”sidebar-wrapper” dengan div id=”sidebar” yang anda maksud itu mesti di ganti dengan div id=”sidebarsaya”. mohon bantuannya… terima kasih
wakh keren buanget bu…….ilmunya, langsung ane simpan yah
keren kang abu
ok. manteb tutoriannya…
Can you show me tips for give new recent comment in the post to top.
Thank you a lot
i would rather like to know about the jquery cycle plugin that u have embeded. IF u like to share it then it will be handfull for us. Allah khair kare aap ko.
asw, thx for sharing :)
saya sudah coba step by step tuto di atas, tapi ga jalan, lalu saya lihat source code demo-accordion-v100.blogspot dan saya bandingkan, agak2 beda, akhirnya saya pakai source code dari demo-accordion-v100.blogspot itu, and it works :)
thx
thanks
Good and interesting tutorial. Thanks
Wow…awesome thx ya
walaikumsalam.
wah nice tutorial mas.
lebih mudah diterapkan dan elegan.
di tunggu postingan berikutnya.
great
please go ahead
i follow u
good guys
Assalamualaikum abu-farhan :
*Here another working version of accordion for blogger :
-copy and paste the code below AFTER
Wa’alaikumsalam
“I’m sorry I deleted because the comments to long will disturb to read.”
Your script almost same but have different:
- Will have conflict with other JS framework
- Difficult to implement
- only accrodion no hide and show
:) Never mind its okay…
I feel good after sharing this script to you,sharing always good. Who know we can change the ideas right?
Maybe you are right about that,but it work fine here.
you can see it on action here – http://minimastyles.blogspot.com
I implement many tip and trick on that blog,and all work fine. By the way thank you for reply.
Love to learn more from you nextime…
* i’m not script expert,newbie i guess!! haha…
thanks for tricks.
Salam Brother this is Bilal from Pakistan
Brother Check This PAge
http://www.movies.skpweb.com/2010/01/avatar-2009-pdvd-rip-500-mb.html
There is a side bar widget of Recent Post and other one is upper Widget of Recent Post in Post Body.
Open this page in Opera.
and please Resolve my Problem.
there are some broken tags here.
please fix it
thank, nice tutorial…i will try it…n i will come back to find other tutorials insyaAllah []