I have fixed a bug that caused multiple instances of this hack to interact with each other and some other IE problems. I have tested it in both Firefox and IE. One extra note about installation – if you put this code into your template more than once at a time (for multiple lists) you must change the id=”ALIST” (bold in the code) to id=”BLIST” on the second list, etc.
I received the request for this hack via email, and since I thought it shouldn’t be too hard and could prove very useful, I went at it. Plus I actually had some time today to use on this kind of thing 😉 To get a link list in Blogger BETA that has a title you can click to show/hide the list, add this code to your template:
<b:includable id=’main’>
<script type=’text/javascript’>
//<![CDATA[
if(typeof(rnd) == ‘undefined’) var rnd = ”;
rnd = Math.floor(Math.random()*1000);
rnd = ‘id-‘ + rnd;
document.write(‘<a href=”#” onclick=”tmp = document.getElementById("’ + rnd + ‘"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;”>’);
//]]>
</script>
<b:if cond=’data:title’><h2><data:title/></h2></b:if>
<script type=’text/javascript’>
//<![CDATA[
document.write(‘<\/a>’);
//]]>
</script>
<div class=’widget-content’>
<script type=’text/javascript’>
//<![CDATA[
document.write(‘<div id=”‘ + rnd + ‘” style=”display:none;”>’);
//]]>
</script>
<ul>
<b:loop values=’data:links’ var=’link’>
<li><a expr:href=’data:link.target’><data:link.name;
</b:loop>
</ul>
<script type=’text/javascript’>
//<![CDATA[
document.write(‘<\/div>’);
//]]>
</script>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>
Then go to the ‘Page Elements’ area to customise the title and links in the widget.
The following code is identical except that it leaves the title of the widget alone and adds instead a little [+/-] for show/hide functionality:
<b:includable id=’main’>
<script type=’text/javascript’>
//<![CDATA[
if(typeof(rnd) == ‘undefined’) var rnd = ”;
rnd = Math.floor(Math.random()*1000);
rnd = ‘id-‘ + rnd;
document.write(‘<a href=”#” onclick=”tmp = document.getElementById("’ + rnd + ‘"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;” style=”float:left;margin-right:5px;”>[+/-]<\/a>’);
//]]>
</script>
<b:if cond=’data:title’><h2><data:title/></h2></b:if>
<div class=’widget-content’>
<script type=’text/javascript’>
//<![CDATA[
document.write(‘<div id=”‘ + rnd + ‘” style=”display:none;”>’);
//]]>
</script>
<ul>
<b:loop values=’data:links’ var=’link’>
<li><a expr:href=’data:link.target’><data:link.name;
</b:loop>
</ul>
<script type=’text/javascript’>
//<![CDATA[
document.write(‘<\/div>’);
//]]>
</script>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>
Why is this not a one-click widget? Blogger does not yet allow us to define alternate widget types (such as link list) in one click.
32 Responses
Stephen:
Thanks, this is perfect and just what I was looking for…except there is a small problem.
I tried out the hack, creating and adding a short link list at the top of my left sidebar. The plus/minus feature works great when viewing the blog in Internet Explorer, but in Firefox, the +/- symbol is incorporated into the link list Title Bar and you cannot see it, so you would not realize it’s there.
In IE, the +/- symbol is visible above the title bar, which is perfect.
Is there a tweak you can do in the code, so that the Link List appears the same in both Firefox and IE?
Thanks again,
Alex
P.S. In my blog, I used the second of the two codes you provided within my template, because when I tried the first, the title bar could not be read at all (in Firefox I mean– the type was too dark against the blue title bar background).
Using the second code, the title can be seen in Firefox, but as I mentioned, the +/- symbol at the top left corner of the title bar gets “lost” to the eye.
Another preference:
By default, it seems the links for this +/- list are being displayed. I would prefer it if by default they were not displayed, so the visitor could choose to display them or not. If they are all displayed right away, it sort of defeats the purpose.
I wonder if you can set the default behavior by adjusting the code?
Again, I thank you very much for rising to this challenge and I think the hack will prove to be useful not only for me, but also for many other blogger beta bloggers.
Have a great day,
Alex
I agree with Alex. It would be better to have the list hidden as the default setting. It would then be a very useful hack. Is there a simple way of modifying the code to achieve this?
Agree with Alex too
I have updated the hack so that the links are defaultly hidden.
hi, how if i want to use more than 1 link list?
i try to paste the code twice, but when i click the second list’s title, the first list is open………
Dear Toar:
I learned the following while implementing the hack.
If you are going to paste the code twice, when pasting the 2nd time you must change the name at the top of the widget code from “AList” to something else (e.g., “Blist”).
The template will not allow you to add widgets with the same name…
I have now created many link lists in my blog using this nice hack, and they are working great in Firefox. However in IE the links sometimes get stuck and don’t open.
Help!
Thanks,
Alex
Dear Toar:
I learned the following while implementing the hack.
If you are going to paste the code twice, when pasting the 2nd time you must change the name at the top of the widget code from “AList” to something else (e.g., “Blist”).
The template will not allow you to add widgets with the same name…
I have now created many link lists in my blog using this nice hack, and they are working great in Firefox. However in IE the links sometimes get stuck and don’t open.
Help!
Thanks,
Alex
This is a bug in the code… I will fix this soon… have exams this week, but hopefully I’ll get to it soon :)vj
I’m attempting to use this and it seemed to work fine. But, after putting in more than 2 widgets with the code, it wont’ open the lists properly. It seems like it will only open 2 correctly, then the next one will jump to a previous list when opened. (I think it is the same problem as in the previous comment.) Is there a way to work this bug out? Like I said, I really like the hack and want to use it for my extensive lists of links. Thanks.
peace…
annie
http://www.bloggeruniversity.blogspot.com
Sorry, I didn’t see the last couple of comments on your site until after I had posted. But, to let you know, the problems seem to be on IE, it is working properly on Firefox. I’m going to try Alexander’s suggestion, but it seems that blogger already gave them each a different name. (ie LinkList1, LinkList2…)
Hope your exams go well!
well i hope you pass your exam well…..
cause i’m very confused with this hack.
i’ve tried alex’s suggestion but not working for me to…..
i’ve some scenarios…..
when using two linklist, it work fine in IE, but not in Firefox,
but when i put the linklist in different sidebar (or in footer/menubar) then it will work….. but sometimes it won’t too…..
anyone ever tried to experiment with the placement of the linklist? is it have effect?
sometims it’s work in IE, and sometimes it’s work in Firefox……..
pls, check it at my blog
http://pretoarsapada.blogspot.com/
Hi:
I think my comment above was misunderstood. I wasn’t saying that changing the link list names when pasting the code into the template would solve the problem with the link list not opening correctly in Internet Explorer. The two things are unrelated (I also have been having the problem with the “+/-” link lists in IE and am anxiously waiting for Singpolyma’s fix).
What I was explaining to Toar is that if you want to place the code in more than one place on the template, the link list name has to be changed in order for Blogger Beta to allow it.
I tried placing the “+/-” links I created using this hack in different places within my blog, trying to avoid having two such lists right next to one another. This seemed to help, but doesn’t solve the problem of the link lists not always opening correctly, especially in IE but sometimes in Firefox also.
I hope Singpolyma (Stephen) does well on his exams and is not too tired to figure out a solution for all of us afterward 🙂
Alex
I’m with you Alex. I think Singpolyma is our only hope! But, I understand the pressure of exams. UGH.
At first I thought it worked in Firefox, but it doesn’t. What it seems to do is open every other widget correctly. Odd.
peace…
annie
i assume your exams are over…..
congratulation!
second congratulation is for your update on this hack……
it work fine now 🙂
thanks man!
Singpolyma/Stephen:
Thanks for the fix!!
Links now working in Firefox and IE.
Hope you did great on your exams…
Merry Christmas and Happy New Year to you
Alex
Stephen, thanks for a early Christmas!
Stephen:
Again thanks for the great hack… it continues to work very well.
I’m wondering, can this hack be used to create expandable/collapsible link section for my blogroll?
The blogroll uses javascript and updates automatically each time I add a website to it. Since my blogroll is getting quite long it would be helpful to also make it expandable/collapsible.
And I would like to add other blogrolls in the future as “+/-” links.
Alex
@Jordan – I think that can be arranged. Watch this space 😉
why did you randomly generate an id? i guess it’s not so strict. is it better to use getTime() instead?
@sun, li — Not sure on your question. The JavaScript randomly generates an id so that we don’t have to bother making sure it’s unique. string+random-number == 99% unique.
i wrote a method here, maybe it’s better than the random-number-solution.
@Li — I don’t understand what your problem is with my system. It works just fine, no one has reported a problem with it. I don’t doubt that yours works too… but whatever. If you want to write something that already exists, be my guest.
Stephen,
imagine if you have 100 such widgets on the site, your generation of unique ids can most likely conflict. i just believed your way not 100% strict.
Its not working. look at this blog
http://about-searchengineoptimization-seo.blogspot.com/
What i did was, i went to Expanded-widget mode >> pest the given widget code and saved it. Then went in page-element and added link. BUT ITS NOT WORKING. HELP ME
@milan — try this wizard
ya men its working now. What was going wrong?
Using the wizard is just cleaner — less opportunity for human error 🙂
Really Mr nice guy??!!!! then why your hack installing peek-a-boo HTML widget is not working???
look at this: http://about-searchengineoptimization-seo.blogspot.com/
why am i getting this error command when i paste the code into my template, “The widget with id ALIST is not within a section (actual parent element is: b:includable.) Every widget should be in a section.” anyone, help? thanks!
Your peek-a-boo HTML widget has worked great for me, thank you! Now I’m wondering if there’s a way to manipulate the code so that the widget defaults to showing and then hiding if you click on the +/-. Is this possible?