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
170 Responses to “The Best Accordion for Blogger user”
Leave a Reply
PLEASE DONATE MY BLOG
Social Network
Syukron akhi, informasinya sangat membantu sekali
Alhamdulillah, syukron akhi,,informasinya sangat membantu
nice posts helpful for a new blogger
thnkz for sharing this helpful tips
nice widget good jquery effect
i’m impressed with that Nayak
i cannot find the script, why? it’s just the first line and the second and the third are in different locations..
sorry wrong post. i mean the hide widget post. excuse me
wow! cool this tips. Thanks for the tips :D
[...] CSS3 and HTML based social share widget in five different variant from our Bloggermint labs. 7. Accordin: A unique blogger widget from Abu Farhan. This will show or hide your widget on your sidebar. A [...]
[...] The Best Accordion for BloggerThis Script to make all sidebar have accordion effects [...]
We’re a bunch of volunteers and opening a brand new scheme in our community. Your web site provided us with helpful information to paintings on. You’ve done an impressive job and our whole group might be thankful to you.
Good stuff! Stumbled upon your post while doing some research about this topic. You are definitely an authority in the subject. I’ll have to use this.
Mississauga CondosCambodia toursyears since the Taliban were driven from Kabul, Nato’s ambassador says there have been big improvements in
Het is grappig, dat soms de meest eenvoudige tips vaak de beste
Penthouse Frankfurtbest e-cig 2011ml 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, Widg
We still cannot quite believe We can often be sort checking important points entirely on your blog post. Our neighbors and i are sincerely thankful for your personal generosity also giving me possibility pursue our chosen profession path. Wanted material I became through the web-site.
pekerjaan yang hebat , blogger yang mengharumkan nama bangsa , saya berharap bisa seperti anda tapi bagaimana mungkin? :D
scip ini apakah dapat di pasang di blogger template baru om.,,
Seharusnya bisa karena blogger baru widgetnya masih sama
Ini pakai “Expand template widget” atau tidak?
Nggak perlu expand
Mau tanya. Mengapa di http://www.multinewsindonesia.cc.cc/ walaupun script-nya dipasang tidak bisa dipakai?
kamu pasang 2 jquery dalam satu template jadi conflict
@ Admin : kalo bisa, kirim artikel yang bahasa indonesia ke farhansyafiqfadhillah@gmail.com. Tolong, saya belum mengerti
makasi om ini sangat bagus menurut anda n apakah blog ini juga terdaftar dalam facebook.,,
kalo terdaftar aku juga ikut jadi followernya.,,
senang berkunjung kembali , tempat ini Langganan untuk setting Blog dan PR valid baru :D