[How To] Add (+/-) expandable/collapsable label widget to blogger[Tutorials]

0
205
views
Hey Bloggers,Today i’m gonna share very Nice hack for blogger to make your lables widget collapsable/expandable.Sometimes we have a long list which takes long space on our Blog.hows it if only intrested people in lables can only see the lablesvwith just one click.
SO the tutorial for How to add (+/-) expandable/collapsable lables in Blogger goes here…

Login to your Blogger Dashboard
Click on Design->Edit HTML (Backup first)
(you must add lable widget first)
Without expanding widgets
search for the code

<b:widget id=’Label1′ locked=’false’ title=’Labels’ type=’Label’>

Replace it with

 <b:widget id=’Label2′ locked=’false’ title=’Labels and Feeds’ type=’Label’>
<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(&quot;’ + rnd + ‘&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;” style=”float:left;margin-right:5px;”>’);
//]]>
</script>[+/-]
<script type=’text/javascript’>
//<![CDATA[
document.write(‘<\/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: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>
</li>
</b:loop>
</ul>

<script type=’text/javascript’>
//<![CDATA[
document.write(‘<\/div>’);
//]]>
</script>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

 Just preview and save this…..enjoy….happy blogging

Leave a Reply