Make an Archive Page in Blogger

I'm working on Sharondipity Photography. In the process I wanted to put the archive in a blogger page that was visible only when the Archive Page link was clicked. This is how I made an Archive Page.

Before you begin, save your template by going to Dashboard | Design | Edit HTML | Download Full Template. Now you are ready.

1. Go to Dashboard | Design | Page Elements. Now click on  Add a Gadget. It doesn't matter where, because you are going to make this gadget disappear everywhere except your Archive Page.

2. Locate your CSS Style Sheet. The very last part you will see ]]></b:skin>. You will place this code directly under it:

<b:if cond='data:blog.url != "YOUR ARCHIVE PAGE URL"'>
<style>
#BlogArchive1{
display:none;
}
</style>
<b:else/>
<style>
#Blog1{
display:none;
}
</style>
</b:if>

Save.

3. Go to Dashboard | Posting | Edit Pages | Create a Page. Leave it blank...just give it a title. Archives will do nicely. Publish page | Save and Publish | Choose Blog Sidebar or Blog Tab | View Page. Copy the Archive page URL that is in the address bar. It should look like http://YOUR BLOG.blogspot.com/p/archive.html.

4. Go back to your CSS style sheet and paste that URL in the above code. Save your template!

Now, when you are on your home page, you will only see the Archive link either in your sidebar or blog tab. When you click on it then the archives will be visible.

Page Jumps

Hi Annie! Just wondering.. how would you make a link in a blog which in it will take you to that part in a blog? Don't get it? Here's what I mean..
For example, "Steps on Baking Pastry:" There will be list of the steps first then, the steps. For ex., you click "Step 8: Putting it in the Microwave", it takes you to:
"Step 8: Putting it in the Microwave
Put it there for 3-5 minutes until...."
?? Just wondering.. Would be glad if you answer back!


Instead of reinventing the wheel, I found this wonderful tutorial.
Jumping Inside Pages - HTML Tutorials

Hyperlink image to open new window

How do I make the picture link to an external site, but have it open into a new window?
 
Some think this is not a good idea. This post is not addressing that. This is simply a post on how to open an image that is linked to another site in a new window.

This is the code that does that:

<a href="URL" title="TITLE"><img src="IMAGE URL" border="0" width="xx" height="xx" alt="Description"></a>

And here is the code with the information plugged in:

<a href="http://seaside-sharon.blogspot.com/" title="Seaside Sharon"><img src="http://farm4.static.flickr.com/3117/2489901121_35e9239f99.jpg" border="0" width="254" height="45" alt="Seaside Sharon header"></a>

Here is the result of using that code.

Troubleshooting the Label Cloud

I just figured out something that may be baffling others. I was looking at my photography blog, Sharondipity Photography, and noticed that my label cloud was not there. PFFFFTTTTT....gone.

If you have installed the label cloud and have problems, this may be the reason why. Quotation marks. Make sure that you don't have quotation marks in any labels. If you do, go through and remove them.

Another thing. At least one of your labels have to be in more than one post. Otherwise it won't work. I don't know why. I just know that is the way it is.

A Program to Create Your Own Tab Menu Graphics

Hi Annie!
Wanted to tell you I found a free download of a software to create tabbed menus, which generates the code too. It's really neat. I used it to make all the tabs.


My friend, hillgrandmom, from Life on a Hill, sent me a link to CSS Tab Designer. So, I took a look at her blog. It made lovely little tabs. After you make your new tabs to match your blog, you can add them using this tutorial: A Tab Menu for Your Very Own. How exciting is that?

Related Posts

Have you ever wanted a feature under your post that shows related posts from your blog? I found this way to do it from JackBook.com. It was originally designed by Hoctro with modifications by JackBook. This uses labels/categories that you already have in place to show Related Posts by Category.

There are two steps to this hack. But before you begin, be sure to save your template!

Step 1: Go to your Dashboard | Layout | Edit HTML | check Expand Widget Templates and locate this code:

<data:post.body/>

Step 2: Place this code after the code you just located:

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<!-- ***http://hoctro.blogspot.com***Jan,2007**** -->
<!-- ***Related Articles by Labels - Take Two*** -->

<!--
Modified by JackBook.Com to make it easier to use.
1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it's no more.
-->

<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<div id='hoctro'>
Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u> | <u><a href='http://www.jackbook.com/' title='Related Posts on Blogger Modified by JackBook.Com. Read More?'>Jack Book</a></u>
</div>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Save your work and all is done.

+/- (hide/show, expand/collapse) Labels

I'm on a label enhancement mission. Maybe my drop down menu label method didn't do it for you. Good news! Here is another option for you label makers using the infamous +/- method. This is simple, simple, simple.

Step 1 - Without expanding your widgets, find this code in your template:

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

Step 2 - Replace that line with this code:

<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>

TaDa! Label those posts!

EDIT: 08/16/08 - In order for this to work, you have to have a label widget in place. And you have to have posts labeled. So, go to your dashboard | layout | page elements | add a gadget | Labels before trying this code.

A Cool CSS Navigation Menu

Widgets For Blogger said...
Annie,
Do you have a post or could you make a post about how to make a menu like yours so that when you hover over an image you get an effect like yours?

Top row: static - Bottom row: active

I have been asked by a couple of people for this, so today I decided to do a little post. First, I want to give all the credit to this wonderful site, Web Designer Wall. I go to that site and get lost in all it's beauty. I just drool over all the cool design features. (Makes for a wet keyboard.) You can read their complete instructions on Advanced CSS Menu.

This is accomplished with a little bit of graphic making and code placing. First with the graphic making. The Web Designer Wall gave great instructions on making your graphics. So, instead of me going over it again, I would suggest reading it there.

That brings us to the code placing. This is a two part process.

1. You will want to place the code in the CSS style sheet. I am showing the the code I used to place the menu in BlogU. That way you can compare with WDW to see any differences, and what the differences do.

/*Roll over feed
-----------------------------------------------*/
#menu {
list-style: none;
padding: 0;
margin: 0;
width: 500px;
height: 50px;
background: #ffffff;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span{
display: block;
}
#menu .home {
width: 144px;
height: 58px;
background: url(home.png) no-repeat;
left: 10px;
top: 25px;
}
#menu .home span {
width: 86px;
height: 14px;
background: url(/home-over.png) no-repeat;
left: 28px;
top: -20px;
}
#menu .about {
width: 131px;
height: 51px;
background: url(about.png) no-repeat;
left: 180px;
top: 18px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(about-over.png) no-repeat;
left: 44px;
top: 54px;
}
#menu .rss {
width: 112px;
height: 47px;
background: url(RSS.png) no-repeat;
left: 350px;
top: 24px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}

The orange: change the values for your own images sizes.
The blue: change these values so it fits where you want it. This is simply trial and error...and patience.
The purple: this may have to be changed to fit in your sidebar, depending on the width of your sidebar, or if you put it below your header, that width.

Of course, the style sheet is where you do all of your...ummm...styling, so there may be other changes you want to make.

2. Now you will have to put some code in a widget. Choose HTML/Javascript (my most favorite widget) and put the following code in:

<ul id="menu">
<li><a href="YOUR BLOG URL" class="home">Home <span></span></a></li>
<li><a href="YOUR PROFILE URL" class="about">About <span></span></a></li>
<li><a href="YOUR FEED URL" class="rss">RSS <span></span></a></li>
</ul>

The orange: changes here are only to paste your own URL's in the appropriate spot.

Attention Classic Bloggers: Put the widget code in your template between <MainOrArchivePage> and </MainOrArchivePage>. Please note, I haven't actually tested it in Classic, but it looks like it will work fine. Let me know.

That will create the menu. It takes some skill with Photoshop or GIMP, but it is worth the effort!

Remove "Newer Posts" and "Older Posts"

Love your new site. Is there a way to remove "Newer Posts" and "Older Posts" from the bottom of the page. I'm creating a website with a menu bar and I don't want it to display the posts I use to link to the menu bar. Thanks.



Happily this is an easy fix. This also removes the Home link from the bottom of the page. (It is the #blog-pager part of the code.)

Find this code in your template:

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

#blog-pager {
text-align: center;
}

And replace with this code:

#blog-pager-newer-link {
display: none;
}

#blog-pager-older-link {
display: none;
}

#blog-pager {
display: none;
}

If, by chance, you wish to return to the original state, simply reverse the process.

Peek-A-Boo Posts from Labels (from my inbox)

I feel a little guilty trying to take you up on an offer of help you made so long ago, but it seems like Ramani has not answered questions about this in a while and I thought perhaps you would have a sense of what's going on. I really would like to get this hack operational on my blog, but I cannot make it work. I keep getting a message about b:includable elements not being permitted in widget 1. I've checked and rechecked and re-re-checked that I'm putting everything in the correct place. Any other thoughts about what might be wrong here?
Thanks very much,
Emilie


Emilie, I think Ramani probably is busy with his new baby. If I remember right, they had a baby not long ago. So, I took a look at Ramani's post and tried it in a practice blog. I got the same message as you. I played with it a bit and was able to make it work. With only one change. I will outline the steps here.

Open your Dashboard | Template | Edit HTML | and check Expand Widget Templates. After the <head> tag place the following code:

<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
</script>

That was the change I made from Ramani's code. I don't understand it so much, but it works. The rest is the same. You can read the rest on Hackosphere or expand this post for the second part of the instructions.

+/-

Your widgets are expanded from the instructions above. Now look for blog-posts and add the code in red.

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>


<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

Add an Image as a Clickable Link (From My Inbox)

My question today, is how I can add small pictures which link to other websites ('badges', I think they call them) to my blog - there are a couple of links that I would like to have on there to show my support for some other websites and organisations and things but all I seem to be able to do is to either add another picture or else add a link list ... no way to add a badge/picture that is a link


This is a simple piece of code that makes any image, button or badge an active link.

<a href="URL OF TARGET LOCATION" >
<img src="URL OF IMAGE"></a>

This is an example of how to put the BlogU chicklet in a sidebar or post:

<a href="http://www.bloggeruniversity.blogspot.com" >
<img src="http://h1.ripway.com/anniebluesky/-blogu.png" height="15" width="80">
</a>

You'll notice that I have added sizes to the example code. That is to help the browser load your page quicker.* To find the size of an image, right click on the image and chose to View Image. This will open a new window with your image. The dimensions are on the top title bar.

*For more information on making your page load faster, take a look at How to Optimize Web Pages for Faster Loading

EDIT 06/07/08: A nice tip from AceK - It's a good idea to put the alt tag IE alt="name of picture" in case pic is unavailable, text will show instead of just an x. You can also use the code below to prevent the blue border spoiling the picture.
border="0"

Table of Contents 100 posts +

Once again, I'm thanking my friend, Hans, for coming up with an answer to a problem I had. I had exceeded the 100 post limit for my old Table of Contents. Hans figured out how to fix that and kindly wrote this post,
Beyond the 100 post limit. So check it out and get a limitless TOC for your blog!

Add a Google Search Engine to your Blog

You can add a great search engine to your blog with Co-op - now with Custom Search Engine. Customize it the way you want. Tell it to search only your site, or any sites you specify. Pick the badge that speaks to you! Place the code in your sidebar. Wonderfully simple!!

A Widebar Category Cloud and Sidebar Background Colors (From My Inbox)

Annie, i just discovered you and Girl, you are amazing! N one makes CSS understandable but you manage to :)
I've retired my yummy PSYCHO template because I can't use it with new Blogger and it's impossible to change. So, I learning to design my own and finding your BlogU so great. I have a couple of questions for you, if you have time, before I get started tweaking my template.

1) How did you make your category cloud one big space above the two sidebars?:)

Use a Widebar to hold your category cloud! And while you're at it, set your sidebars apart with a different background color.

2) Could I create background images for the sidebars? Or how would I make them a different color than the main part?

I hope you can answer these, but if not, I totally understand you're flooded with "help me" emails.

Blessings,
Heidi



1. How did you make your category cloud one big space above the two sidebars?

Follow the instructions on this post: A Widebar - Fluid Style which creates a new page element. You can add the label cloud there. (here is how to get the cloud My Category Cloud...Finally

2. Could I create background images for the sidebars? Or how would I make them a different color than the main part?

First, create a Variable definition:

Variable name="sidebarbgcolor" description="Sidebar Background Color"
type="color" default="#fff" value="#eeeeee">

Make the color anything you want.

Second, put the above code in the

/* Variable definitions

area of your template.

Third, to your #sidebar-wrapper add this code:

background:$sidebarbgcolor;

That will change the color of the sidebar.

Tweaking Permalink in Blogger Beta

Post Pages give each of your posts their own unique web page, in addition to appearing on your blog's front page. The advantage to that is your readers are able to link to this particular post.

Here is another good question from a reader, Shrish. He wondered if it is possible to take this hack,Tweaking Permalink in Blogger, and use it for Blogger Beta. To re-hash from that post, in blogger posts, if you hoover over the timestamp a small popup will come up that says 'permanent link'. Unless someone is familiar with all the fine details of blogger, they won't find this link. This is a disadvantage. But, you can easily add the text 'permalink' to that time stamp to Blogger Beta too. First you must open Dashboard/ archiving/ check: Enable post pages. Return to Dashboard/ Template/ Edit HTML/ check: Expand Widget Templates. Locate this code and insert Permalink (with a space in front):

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 comment<b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span> <span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/> Permalink</a>
</b:if>
</b:if>
</span> <span class='post-icons'>

You can see how to do this on Classic Blogger here: Tweaking Permalink in Blogger

My New Obsession...Ma.gnolia BlinkList

I have realized something about myself in the last few weeks...I'm fickle. And I apologize for this. Why it took me so long to realize, I don't know. On the other hand, maybe I'm not fickle! Maybe I can just admit when I find a superior application. I believe the superior program I have found is BlinkList. I know I went on and on about Ma.gnolia in this post, My New Obsession... Ma.gnolia. Then one day I received this comment:

Mike said...

May I ask what made you go with Ma.gnolia vs. BlinkList? We are always hard at work on making our service better and better and I would greatly appreciate your feedback.

I left this response:

annie said...

@Mike, In all fairness, I have not tried BlinkList. It was brought to my attention a few days before your comment! I have been looking at it, and have an account. So, I will do a comparison to Ma.gnolia. What I have found so far that I like...the way it displays the links on a page. This seems faster than Ma.gnolia. I absolutely love the cloud and the fact I can display it on my blog. I will be looking into that, and it may be the deal breaker. I haven't looked much further...my time is getting away from me lately, but I will get into the goodies of BlinkList as time permits. Does it save the page as Ma.gnolia does, even if the page goes down? That is a feature that I like. Another feature Ma.gnolia has is 'Ma.gnolia Roots' which I find handy and fun, with the little badge displaying the number of times that page has been marked on your site. And, last, but not least, I love the easy feel of Ma.gnolia. The layout is easy on the eyes. BlinkList is close, but doesn't quite hit the "Zen-ness" of Ma.gnolia. I will look at them both, and decide which features are more important to me. I do feel that BlinkList is in the same ballpark as Ma.gnolia. It will be close.

I never received a response from Mike, which I didn't care for, since he said he would appreciate feedback. But, we all have a life, and perhaps his took over. After waiting for a response, I went ahead and tested BlinkList.

To answer to my questions...

• I don't think it saves the page as Ma.gnolia does - a feature I love, but may be only something to slow down the site. And BlinkList is much faster than Ma.gnolia. In the scheme of things, I would rather have speed over saved pages. If the page is that important, I usually copy it myself.
• I like the way the links are displayed on the page on BlinkList. There are more per page and you can readily see how many 'blinks' it has. A blink is when someone bookmarks that page.
• It does not have a feature similar to 'Roots' in Ma.gnolia. As cute as that is, it is really only a novelty...eye candy. I like the magnolia flower.
• I still don't believe it carries the Zen feel of Ma.gnolia, but it does not have a busy feeling either. It has a simple design that is intuitive and easy to move around in.
  

One feature it has that I absolutely love is the 'Cloud'. I can't help it. I love clouds. To me they are such a great way to get around. Now I have two clouds on my blog. One That is for BlogU labels only, and clicking on a word in the cloud will open a page with all the posts with that label. The other, which presently is located in my footer, is for all my bookmarks, and clicking on a word there will open a page with all my bookmarks labeled with that word.

OK. My vote is in for BlinkList. I have moved my bookmarks from ma.gnolia to BlinkList and am quite pleased with it so far.

Beta Blogger - Clickable Header

Due to a huge demand for clickable headers, I'm writing a post to explain how to make your header clickable in Beta Blogger.

Since you want a clickable header, I'm guessing that you already have a header image and it is hosted on a web hosting account. You will need the URL of this image later.

First you will make a 'division' to hold the image and position it in your blog in the CSS style sheet between the <head> </head> tags:

#imageholder {float:right;}

To make it clickable add this code after the <body> tag:

<div id="imageholder">
<p><a title="Your blog title" href="yourblog.url">
<img border="0" src="image.url" alt="title of image" />
</a></p>
</div>

I have tested this in a practice blog and it works! With that being said, if you have a problem, let me know.

Classic Blogger - Clickable Header

Due to a huge demand for clickable headers, I'm writing a post to explain how to make your header clickable in Classic Blogger. (Did I miss the memo that clickable headers are the new cool Blogger thing to do?)

This is an easier method than for Beta Blogger! Since you want a clickable header, you probably already have a header image and it is hosted on a web hosting account. You will need the URL to put in the below code.

<div id="header">

<a href="your blog.url">
<img src="image.url" border="2">
</a>

<p id="description"></p>

</div>

And, that is it. Clickable header express!

Blogger Beta: Hide/Show, Expand/Collapse labels

After a request to get the 'Hide/Show, Expand/Collapse' hack to work with the label widgets in blogger beta, I figured it out. Here is what I came up with.

1. You must implement the first two steps from Hide/Show, Expand/Collapse - Navigation Element.
   
2. Now open "Template/Page Elements" click on "Add a Page Element". Choose "Labels/Add to Blog". Save changes and close. (This element is temporary...we only need it to find some code, then we will delete it later.)
3. View your blog and right click anywhere in the blog. You want to "View Page Source".
   
4. In the 'Source' page, find <div class='widget-content'> (we'll do something with it in a minute):

   
   <div class='widget-content'>
   <ul>
   
   <li>
   
   <a href='http://annie-flower.blogspot.com/search/label/beta'>
   beta</a>
   
   (1)
   </li>
   
   
   <li>
   
   <a href='http://annie-flower.blogspot.com/search/label/how-to'>
   how-to</a>
   
   (1)
   </li>
   
   <li>
   
   <a href='http://annie-flower.blogspot.com/search/label/test'>
   test</a>
   
   (1)
   </li>
   
   <li>
   
   
   <a href='http://annie-flower.blogspot.com/search/label/trial'>
   trial</a>
   
   (1)
   </li>
   
   </ul>

5. Open "Template/Page Elements" click on "Add a Page Element". This time choose "Configure HTML/JavaScript". Now is where the third part of Hide/Show, Expand/Collapse - Navigation Element comes in. Add this code to the 'edit html box':

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

6. Fill in your 'UniqueName' in the 2 areas. Give it a title. For example "+/- Categories".
7. Copy the code you found in step #4 and paste it between the <div> and </div>

   
   <div class="commenthidden" id="UniqueName"> PASTE CODE HERE </div>

8. Save changes and close.
9. Now you can open the 'Label Element' we made in #2 and "Remove Page Element".
   

I believe that should do it! It worked on my test blog. I ended up with a 'Hide/Show, Expand/Collapse' section of my sidebar that displays labels/categories for my blog.

Also see: Hide/Show, Expand/Collapse - Navigation Element

Table of Contents - another method

In this post, A del.icio.us way to make a previous post list, I explained how to add a Table of Contents to your blog. The method used del.icio.us as it's backbone. And it works well, especially for those that haven't switched to Blogger Beta. Well, I have switched, and it doesn't work quiet as seamlessly as before. I have to go through a few more steps.

Hans, from Beautiful Beta, has figured out a different, more streamlined, method of making a Table of Contents. I'm going to detail it here, because unless you are very familiar with beta, you may be lost.

First open your dashboard and go to Template/Edit HTML. Check the box to 'Expand Widget Templates'. Scroll down until you find:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

<!-- navigation -->
<b:include name='nextprev'/>

<!-- feed links -->
<b:include name='feedLinks'/>
</b:includable>

Replace with:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts'>
<!-- on a label page, add a header saying 'Contents' -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "archive"'>
<h2 class='date-header'>Contents</h2>
</b:if>
</b:if>
</b:if>
<!-- Start loop for displaying posts here -->
<b:loop values='data:posts' var='post'>
<!-- Date-headers are only displayed if on main, item or archive page -->
<!-- If on label-page, then no date-header -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
</b:if>
</b:if>
</b:if>
<!-- Here we start displaying the posts. -->
<!-- If we are on a label page, only the posttitle is displayed -->
<!-- On other pages the entire post is displayed -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "archive"'>
<a expr:href='data:post.url'><data:post.title/></a><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!-- If on item page display comments -->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

<!-- navigation -->
<b:include name='nextprev'/>

<!-- feed links -->
<b:include name='feedLinks'/>
</b:includable>

That is the first part of the process. The second part involves putting a link in your sidebar. In Blogger Beta, open Dashboard/Template/Page Elements, then open 'Add a Page Element'. Select the 'Link List' widget. Give your widget a title in the top box, and name your link in the bottom box. (Something like Content, or Post List.) In the 'New Site URL' add this link:

http://yourblogURL/search/label/?max-results=999

Make sure you replace yourblogURL with your URL. And that is it. All except for visiting Hans and thanking him for such a wonderful hack!!