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:widget
id=’ALIST’ locked=’false’ title=’List Title’ type=’LinkList’>
<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:widget
id=’ALIST’ locked=’false’ title=’List Title’ type=’LinkList’>
<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.