How to create collapsible content?

The Hide and Show DIV elements for HTML content is a great way to clean up your sidebar. It becomes especially handy for those long blogroll lists or anything that clutters up the blog. Just simply click a link to make all the hidden content magically appear and disappear.

Demo:
+/- Click Here to Expand and Collapse

• 125x125 Adspots
• Social Bookmarking Icons Widget
• Link exchange
  

How to use it in Your Blog
Step 1: Adding CSS and Javascript
First, add this code below directly above the tag.

<style type="text/css">
.commenthidden {display:none}
.commentshown {display:inline}
</style>
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

Step 2: Adding the Active Content to be Displayed
Place this code wherever you would like it to appear. Make sure to change the red text to a name that is "unique" to any other name in your template. An example might be "blogroll-dropdown". If you do not give each Hide Show DIV element a unique name the script cannot be used more than once on the same page. The green text is the title of the link that you click on to make the content appear. Replace the code "Expanded Content" with the content you wish to have expand and collapse.

<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')"
>Link Title</a><br />
<div class="commenthidden" id="UniqueName"
>Expanded Content</div>

Step 3: Sample Code
Here is what my code looks like for the demo above:

<a aiotitle="" href="javascript:togglecomments('hideshowdemo')">+/- Click Here to Expand and Collapse</a>
<div class="commenthidden" id="hideshowdemo"><ul><li><a href="http://howhero.com/">HowHero Tutorials</a></li><li><a href="http://widgetsforfree.blogspot.com/2008/09/translate-blog-widget-using-flags.html">Blog Translation Plugin</a></li><li><a href="http://widgetsforfree.blogspot.com/2008/09/make-money-blog-widget-performancing.html">Make Money Widget</a></li></ul>
</div>

[via]

How to add 125x125 ad spots in your template?

All the people who don't have adsense optimised templates don't get dejected. As we all know 125x125 ad spots are the advertiser favorites and even look good. So here is a simple widget which makes you add these ad spots in your blog without any changes in your template code(html).

Step I:
Go to Layout>Page Elements and click on "Add a gadget" (preferably add in the side bar) and select HTML/JavaScript.

Step II:
Paste the following code into your gadget window.

<center>
<table border="0" cellpadding="10" cellspacing="10">
<tr>
<th width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></th>
<th width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></th>
</tr>
<br/>
<tr>
<th width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></th>
<th width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></th>
</tr></table>
</center>

Step III:
Save the widget. Now view your blog, It should appear like this..



Note:
1. When advertisers want to advertise on your site, just replace the code in "red" with the URL of image that advertisers want to display.
2. If you want only 2 vertical ads just delete the following code each row

<th width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></th>

3. Likewise to create 3 columns in each row just add the above code in each row and you are done.

How to add Social Bookmarking Icons below your posts?

A very fascinating thing which a new blogger notice is the social bookmarking icons at the end of each posts. Perhaps it is the best way to increase traffic to your site.
Here is a simple method to add these icons below every post.

1. Go to Layout>Edit HTML and take a backup of your old template by downloading it. Also take the backup of all your widgets(gadgets installed,available under Page Elements) in a text file.

2. Find this

<data:post.body/>

3. Add this immediately after above code.

<!--SOCIAL-BOOKMARKING-ICONS-STARTS-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/><h3>Spread the word...</h3><br/>
<!--DIGG-->
<script type='text/javascript'>digg_url=&quot;<data:post.url/>&quot;;</script><script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
<img alt='Digg It' src='http://i28.tinypic.com/dnlsvt.jpg'/>
<!--Stumble-->
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='http://i30.tinypic.com/rj3yj8.jpg'/></a&gt;
<!--Delicious-->
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='http://i27.tinypic.com/r29dau.jpg'/></a>
<!--Technorati-->
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='http://i26.tinypic.com/1qop34.jpg'/></a>
<!--Twitter-->
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://i25.tinypic.com/e7glsn.jpg'/></a>
<!--Facebook-->
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='http://i26.tinypic.com/14jp07k.jpg'/></a></b:if>
<!--SOCIAL-BOOKMARKING-ICONS-STOPS-->

It will appear like this..



4. To change the icons, just upload the pictures of social bookmarking icons you like to a server which provides a direct link. Recommended: tinypic

5. Replace the URL of uploaded pictures by red colored lines in the above code.

P.S To see a large collection of Social bookmarking icons and other icons, Click here

Still confused.. Watch out!