2008-07-25

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.

1 comments:

ghing said...

wow!.. I didn't know we can do that.. thanks for that one!..

Post a Comment

1. Comments posted must be accompanied by names or pseudonyms.
2. Anonymous posting and those containing profanities will be rejected.
3. Comments are moderated due to spam problems. I have to approve the comment before it will show up.

:)) ;)) ;;) :D ;) :p :(( :) :( :X
=(( :-o :-/ :-* :| 8-} :)] :-t b-( :-L