Sunday 5 November 2006

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

post signature

No comments:

Post a Comment