Blogging Tip : Create Expandable Label Summary

The script adds an expandable label summary to your blog. The advantages are:-
a- It has a toggle feature to hide the text once displayed.
b- Very useful for site having problems with space constraints.

To implement the feature, from the blog Dashboard, go to Layout> Edit Html. Click the box next to “Expand Widget Templates”.

Copy the code below and place it right between the closing b:skin tag and the closing head tag.



<style type='text/css'>
.texthidden {display:inline}
.shown {display:block}
</style>
<script type='text/javascript'>
document.write('<style>.texthidden {display:none} </style>');
</script>
<script type='text/Javascript'>
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=='shown') {
whichpost.className='texthidden';
}
else {
whichpost.className='shown';
}
}
</script>

Alternatively, you may also copy the script here.

Then, cut this code below and paste it in between any two "b:widget" tags, save the template.

<b:widget id='Label10' locked='false' title='Categories' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><a href='javascript:void(0);' onclick='expandcollapse("MYLABELS1")'>[ /-] <data:title/></a></h2>
</b:if>
<div class='widget-content'>
<div class='texthidden' id='MYLABELS1'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Or else, you may copy the above code here.

That's it, you're done. Note - You may change the position of the above widget to your liking in your Page Elements. I mean by dragging on the widget itself.