The Ryndex

Apparently some of the mensch have been wondering how to add delicious content to their blog sidebar. The sidebar is that thing at the side of your blog, where you can put things that you want to be visible on all of your pages.

I’m going to describe how to put your New Years Resolutions into your sidebar. I broke it down into many steps, but it’s really quite simple.

1. Log into blogger. Normally you go straight to “Posting/Create” in order to serve us up some of your fascinating observations on life. This time, however…

2. Click on the Template tag. Hooray! There’s a whole page of Blogger code there, similar to HTML. You can just look at it as unintelligible crap if you like.

3. Copy and past the entire contents of unintelligible crap somewhere safe, such as a text document on your desktop. That way, you can always undo whatever you changed.

4. Back in your browser, open to the Template tag, look for some text similar the following:

<!– Begin #sidebar –>
<!– Sidebar –>
<div id=”sidebar”>

The code following this bit determines what goes in the sidebar.

5. Find something that already exists in your sidebar. For me, it was:

<h2 class=”sidebar-title”>Previous Posts</h2>

Even if you don’t know HTML, you can imagine how this corresponds to the header Previous Posts that is already in your sidebar. Your text may not be the same as mine.

For the HTML-interested, the <h2> tag says to treat the following text as a secondary header and </h2> indicates the end of this text. The class=”XXX” is there to give the web browser hints about the font and colour. Since this is header text, it is automatically given a line to itself.

5. Now here’s one of the best secrets of a software developer: find code that works and copy it. I suggest copy and pasting the text that you found earlier, changing “Previous Posts” to “New Years Resolutions!”.

6. Click on the Preview button. A new window pops up with your changes. Do you see the new header? Hooray for you! But I bet you’d like to see some stuff under the header as well.

7. Back in the template window, put the following text underneath the New Years Resolutions:

<ul><li>Eat more fast food.</li>
<li>Use a daily moisturizer.</li>
<li>Read more books.</li></ul>

Changing the text, of course.

For the HTML-interested, everything between <ul> and </ul> is considered part of an unordered list. The individual items in the list are separated using the <li> tags. Try changing the two ul to ol to get an ORDERED (i.e. numbered) list.

8. Click Preview and verify that everything is in order — I wasn’t too careful to specify exactly where to place these statements. You can figure it out by changing in the Template window and watching the results in Preview.

9. When everything is to your satisfaction, click on the “Save Template Changes” and “Republish”. Everyone wins!