With some more inspiration from this man, and some help from this post I have created alternate versions of my peek-a-boo links lists and peek-a-boo HTML widgets. These ones, when expanded, are a 200-pixel-high box with a scrollbar. For those extra-long lists 😉
Link List (Click Title to Expand)
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. This code should go inside the section for your sidebar. Then, after saving, go to ‘Page Elements’ to customise its contents.
<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;height:200px;overflow:auto;">');
//]]>
</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>
Link List (Click [+/-] to Expand)
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. This code should go inside the section for your sidebar. Then, after saving, go to ‘Page Elements’ to customise its contents.
<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;overflow:auto;height:200px;">');
//]]>
</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>
HTML (Click Title to Expand)
HTML (Click [+/-] to Expand)
19 Responses
Excellent!
I knew you’d be able to turn around something like this… and fast!
Hey, they don’t call you the “Technical Blog” for nothing! 🙂
Your hack is like finding another gift in my stocking…
Merry Christmas, my friend,
Alex
P.S. By the way, have you ever done a post on how you set up your ingenious comments system? I like the fact that you have Blogger security along with Haloscan capabilities, in addition to the very cool, “see as you type feature” on the main page….
The closes thing to this comment system that you’ll find for Blogger BETA is http://singpolyma-tech.blogspot.com/2006/12/comment-forms-and-blogger-beta.html
this hack is useful for my blogroll…..
thanks man!
Peek-a-Boo Link and Scrolling in PopUp Windows
Hi,
Thank you for your hacks and the information for the “Confused”.
I have recently implemented your “Peek-a-Boo Link List” and “Peek-a-Boo and Scrolling” hacks on my New Blogger blog. It works perfectly well. These hacks are so useful and neat. Thank you!
I wonder if it is possible to also have the “Peek-a-Boo” and “Scrolling Box” features with the Link Page Element instead of only the List Link Page Element of New Blogger. With the Link Page Element, the listed links open in PopUp Windows. The possibility to open my listed links in PopUp Windows is very useful to me.
Can you help me?
Alain
@Alain — not sure I understand. You want to have each link open in a new window? Yes, I can do that… mmm… yet another version of this hack. Do you want with or without scrolling on that one? (Perhaps I should just make a wizard for it…)
Peek-a-boo links lists versions with each link opening in a new window
Hi Singpolyma,
Thank you for taking into consideration my needs.
Yes, I want to have each link open in a new window. (Like with the “Link” Page Element of New Blogger). Is this clearer?
If you give me the choice between 1) with scrolling or 2) without scrolling, I would prefer the scrolling option. But, I certainly could make use of both options: with and without scrolling.
Wizard? Not sure of what you are planning! The codes, installation notes and references for the “Confused” provided on your technical blog have worked just fine for me so far. The KISS principle is what will work best for me.
Happy New Year 2007!
Hi Singpolyma,
I have implementes your “Peek-a-boo and Scrolling Link List Hack” in my blog with nice results, but I have some questions:
Can I choose beetwen “with scrolling” and “without scrolling”?
How can I use the same hack for other sidebar widgets like “HTML/Javascript”, “Feeds”, “Labels”, “Archive”, etc…?
Thanks.
Hi Singpolyma,
I have implementes your “Peek-a-boo and Scrolling Link List Hack” in my blog with nice results, but I have some questions:
Can I choose beetwen “with scrolling” and “without scrolling”?
How can I use the same hack for other sidebar widgets like “HTML/Javascript”, “Feeds”, “Labels”, “Archive”, etc…?
Thanks.
Hi Singpolyma,
I have implementes your “Peek-a-boo and Scrolling Link List Hack” in my blog with nice results, but I have some questions:
Can I choose beetwen “with scrolling” and “without scrolling”?
How can I use the same hack for other sidebar widgets like “HTML/Javascript”, “Feeds”, “Labels”, “Archive”, etc…?
Thanks.
@Diario — Please see this page for answers to your questions 🙂
Peek-a-boo links lists with each link opening in a new window-Wow!:Thanks for your response to my request. I have missed your postPeek-a-Boo Widgets related to this particular variation of Peek-a-boo links lists. I was mainly watching for potential developments from the comments’ thread in this post. I really enjoy the two variations (standard and scrolling) of this specific widget and the automatic installation «in just a few clicks» feature. These two widgets work perfectly well on my blog so far. Ooooh Yes, that’s the way I like it.! Thanks Stephen for the extras (the standard widget + the installation wizard).
hi stephen….
i have been using some of ur hacks with my blogs,
recently i change my blog template and try to use ur peekaboo linklist & html, but i got some problem….
in my blog it’s not peekaboo, its just displayed like usual….
do u know where’s the problem is?
sorry…..
the problem has solved…. my mistake 🙂
Hi Stephen, I think there’s a bug. After implementing peek-a-boo (linklist, labels), they seem to take their style direction as links instead of h2 in Firefox. They’re fine in IE, Safari and Chrome. Love them in all other ways. Thanks.
Hi Stephen,
I think there’s a bug. After implementing these, in Firefox they seem to take their style direction from links rather than h2. They look fine in IE, Safari and Chrome.
I’m also having difficulty implementing these when I “add element” at Blogger on the layout page. I haven’t been able to get them to work for video bars and slideshows. Any suggestions on what I’m doing wrong? Or do they only work on List, Label, HTML types and not on Video, Bloglist, etc.? Or, are Video, Bloglist, etc. types to be done with the HTML?
I love them, by the way.
Thanks,
Sunny
thank you thank you !!!! I spend many times to find that, i know it was called peek a boo in english…
Hello, singpolyma,
I appreciate your greasemonkey script.
‘Blogger del.icio.us publishing and post categorizing helper (with trackback) for the new Blogger’
It’s very convenient script!!
I tried to use it.
It’s work well on old post editor.
But unfortunally it’s not work on new post editor.
Then I modified your script for working on new post editor.
Now it’s working well.
Could I distribute it?
Best regards,
JoongSeob Vito Kim
Yes, definitely! I don’t recall what license that script specifically is under, but IIRC it’s nominally CC-BY-SA. Feel free to license your modifications under any Free Software license and release them. Please let me know when you do so I can link to you!
Thank you again!
Your script is very nice.
I uploaded modified version script to greasemonkey userscript.org
http://userscripts.org/scripts/show/108908
And
http://www.dorajistyle.pe.kr/2011/08/send-trackback-with-blogger_04.html
It’s information about this script page. (This page written by Korean language. But you can find a translation widget on my blog. It works well.:D)