Peek-A-Boo widgets are useful when the widget content is too long. You can hide the content of the widget and let your visitors click on the widget title to show the content of that particular widget. This will make your sidebar short and sweet.
I’ve seen Peek-A-Boo widgets in certain blogs, but it lacked visitor attraction. I wanted to add certain effects to these widgets to make it more attractive. For eg: the way in which the content is shown and hidden. So I did some research in the net and came to know about the toggle effect. Yes, we can use toggle effects to make the sidebar widgets Peek-A-Boo.
Follow the steps given below to make your sidebar widgets Peek-A-Boo.
Log in to Blogger. Go to Layout > EditHTML. Check Expand Widget Templates.
Add the javascript given below to the <head> section of your template.
<script src=’http://deepakpensieve.googlepages.com/prototype.js’ type=’text/javascript’></script>
<script src=’http://deepakpensieve.googlepages.com/scriptaculous.js?load=effects’ type=’text/javascript’></script>
The above javascripts are Prototype and Scriptaculous. If you’ve already added it to your template while applying some other hack then no need to add it now.
Add the code given below to the CSS area in your template, just above ]]></b:skin>:.
.collapsible {
cursor: pointer;
}
You might be having lot of widgets in your blog. Any widget can be made Peek-A-Boo. The method is the same for all widgets. But for explanation I’ll be using the Link List widget. The widget must be there in your blog to apply this hack. So if you haven’t added the widget then go and add the widget and come back.
Find the portion of code given below.
<b:widget id=’LinkList1′ locked=’false’ title=’WIDGET TITLE YOU GAVE’ type=’LinkList’>
<b:includable id=’main’>
<b:if cond=’data:title’>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<ul>
<b:loop values=’data:links’ var=’link’>
<li><a expr:href=’data:link.target’><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>
Add the codes highlighted in red at the right places as shown below.
<b:widget id=’LinkList1′ locked=’false’ title=’WIDGET TITLE YOU GAVE’ type=’LinkList’>
<b:includable id=’main’>
<b:if cond=’data:title’>
<h2 class=’collapsible’ onclick=’new Effect.toggle(“linklist”, “blind”);’><data:title/></h2>
</b:if>
<div class=’widget-content’ id=’linklist’ style=’display:none’>
<ul>
<b:loop values=’data:links’ var=’link’>
<li><a expr:href=’data:link.target’><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>
Save Template.
As I said earlier, any widget can be made Peek-A-Boo. Method is the same as mentioned above. The only thing that changes is id. id must be unique. No other widgets must be having same id as another widget. ie: In this tutorial I used “linklist” as id. No other widgets must be having the same id name as “linklist”.
Try it on your blog and tell me how good it is. Do contact me if you have any doubt. You can also contact me if you’re confused and stuck in the middle of the hack. Leave your comments and URL of your blog so that I’ll be able to know who all are using this hack. It will also help the visitors to check how the hack is working in various blogs.