Monday, December 7, 2009

Bike Garden Open House: I blame the blogroll

It all started because the blogroll had gotten out of hand. It was too long--it dangled down like a monkey tail and made the page look all wonky and out of sorts. I tried fixing it. I tried to compress the blogroll by just listing the names and not the title snippets from posts, but that didn't work because if I took away those snippets, then how would I know when something new was up?

I tried including more of my own posts on the page to balance the look of things, but that didn't work either because it made the page go on, and on, and on. Visually, blog posts are kind of like sandwiches made from leftover Christmas ham: The first three are fine. After that you start to lose interest.

I even (briefly, mind you) thought about editing out some of the blogs. But I just couldn't do it. They are on the blogroll to begin with because they are my favorites. Worse, I even added a few here and there because I couldn't help myself as I kept finding new ones worth reading. The list got longer. The blog got more unwieldy.

So finally, I decided the only thing left to do was to create a new, separate page, just for the blogs. The more I thought about it, the more I liked the idea. I could have a whole page devoted to my favorites, and I could even highlight links to posts I liked. After all, if I get some enjoyment out of reading a post, why shouldn't I point others in that direction?

And as long as I was going to do that...

My friends, what we see here is the result of this kind of misguided, runaway thinking. Two weeks of frantic scrambling and some hastily learned HTML/CSS coding later, and the new Bike Garden blog is open for business.

Some of you have asked for a report on how I created the tabs, so if you want to read the excruciating details, keep on reading. If not, you should skip the next four paragraphs.

I wanted to keep the same web address, so that meant keeping a Blogger platform. However, the templates provided by Blogger just wouldn't support what I wanted to do, so I found a different, free one (they are called "skins"--did you know that? I didn't; sounds a bit gruesome) from a website called Our Blogger Templates, and that was very satisfactory approach. They have dozens and dozens from which to choose, of all make and styles, so if you're looking to update your own Blogger site, it's worth a look. They have FAQ section that explains how to download and transfer the code to your Blogger account, making the switch fairly painless.

I wanted a template with three columns and some tabs, and found one I liked. From there, I was able to customize it without too much trouble for my own look. There were a few things that didn't fit quite right, though, and some that I wanted to subtract and add, and that's where the coding came into play. There is more that I'd like to tweak (such as how to make an extra large image fit in the post box), but I haven't been able to figure out the coding. My brother is coming for a visit over Christmas, however, and I believe he might know a thing or two about HTML. So Jack, if you're reading this, be forewarned. There are some chocolate oatmeal cookies in it for you.

There are some limitations to the new template, most aggravating of which is that you can't move widgets up and down to position them--which means you have to know exactly what you want on the sidebars and in what order before you start. Worse, if you want to add something in the middle later, you have to start all over. And then there was creating all those sub-pages (which all are new blog pages themselves, and which serve the same function as "labels" did on the old format) and the links to the sub-pages, and moving all the widgets and posts...

Oh, and when you first transfer the template coding to Blogger, you may lose some of your existing widgets, such as labels, blogrolls, lists, etc. So I created a dummy page first on an old blog page I no longer use, and stored everything there that I wanted to keep. Then when I lost widgets in the transfer, I was able to re-create them from the dummy. Also, be sure to make a copies of your template from time to as you work with it--saving it in a word file works fine--that way, if you mess up some coding in your tweaking, you don't have to start over from scratch.

It took about two weeks of very late evenings and very early mornings. I had a lot of fun, but I'd rather not do it again any time soon.

Anyway, welcome to the "open house" for the new and improved Bike Garden. Take a look around and tell me what you think. Regular posting will occur here on the home page and be sent off to relevant sub-pages for filing. I'll also probably post other stuff on those pages from time to time, such as interesting news articles I run across that are relevant to the subjects. And certainly, there is the new, sparkly, now-expanded blogroll.

On the "About" page, you'll find a guided tour to each of the subpages, so I'd start there if I were you.

If you do or don't like something, or if something is not working (page too wide, tabs not showing at the top, page jump not working, etc.), please let me know. Everything looks fine on my computer, but for all I know, things could be all cattywampus on your end.

Oh, and the photo at the top of the post? That's my next project: It's time to order seeds, y'all.


  1. Excellent results!
    You have shamed me - perhaps enough to work on my own blog - or perhaps just enough for me to think about working on my own blog.

    Either way - Well done!

  2. Well I love the look but you've scared me off of adding tabs! I've been wanting tabs as well and I keep thinking that eventually Blogger will add them. But back to your new look - it's very crisp and I like it alot.

  3. In the line of code that is your picture, you'll find s400.

    Change s400 to s640 which embiggens the pic.

    Only 640 works, unless you want to go smaller. Then use s288.

  4. Nell Jean--Perfect! I was looking in the wrong place and you pointed me in the right direction. I got the picture to size to fit by tweaking within the "400" range for height--I sized it up to "500" and then upped the width to "340". It still looks a little stretched out, but I can play around with images until I get the size and proportions I like, and then code the individual posts form there. Thanks a billion.

    John---It's snowing up your way, I see. Seems to me a good day to sit by the pinon fire.

    Jean--I was kind of scared, too, and had some panicky moments, but it's been worth it. Plus, now I feel all smart. :-)

  5. P.S. Nell Jean--Maybe I should send _you_ the chocolate oatmeal cookies...

  6. Susan - I like this, a lot. You've given me lots of food for thought for my next blog revamp.

    One question though, are you double posting on both the main page and the appropriate blog for the post you've written? Or do you have a more automated way of doing it?

  7. I wish I could remember where I read it, but the advice is to keep the ratios of text area & sidebar proportional when you increase the text area, and to decrease the background area by an equal amount. I played around with mine for a quite a while on a test blog before I got it the way I wanted it.
    I like your new look, and it's very user-friendly. I thought about using tabs, but I decided to stick with a simpler thing.

  8. This is exactly what I want to do, but I know it'll end up consuming my life for weeks. Do I do a new blog template, or research a new book, or create syllabi, or sleep.... Yours looks lovely, though!

  9. Susan, your experience is going to help others, and now that you've shared, you've done that too. I like the idea of a blogroll page. Maybe I'll do it too someday. I'm on Wordpress so it's totally different.~~Dee

  10. The recipe, anyhow.

  11. VP--It is and isn't automatic. I click on the "jump" after I post, and go to the main post. Down at the bottom is a "Create Link." I click on that and it gives a drop down of my subages. I select the one I want and it shoots it over there. However, at that point, all you see is the link on the subpage, so I add a photo to it to spruce it up a bit. It's not bad, but it is a couple of extra steps.

    MMD--Thanks for the tip; I'll try that out. I may come to regret that tabs, but right now the process doesn't seem too burdensome.

    Benjamin--sleep is optional, at least in my book. Good luck on the research. Sounds interesting so far.

    Dee--I have been the beneficiary of others' generosity on the blogosphere, many times over (including yours), so i am only glad to do the same.

    Nell Jean--Done! I'll make some this weekend and do a post about it.

  12. Door prizes? Where are the door prizes and cookies? Open houses should have door prizes and cookies.

  13. Hi Susan- the new layout looks fantastic! I think I may need to take a hint and streamline mine a little again.

  14. The new design is fabulous and gets a 10/10 from me! From time to time I mess about with mine, but only within the confines of Blogger... which does leave a lot to be desired. I tried using Wordpress, but didn't like how you have to upload photos on there. I do like the simplicity and ease of use of Blogger, but wish that they had more templates and other ways to really personalise the blog. I live in hope!

  15. Thanks Susan - that's very useful.

    I really want to introduce some tabs to my page so I can gather the useful information that creeps in on my blog from time to time into a more sensible list than what Blogger Labels allows you to do. I've got lots of resources on public planting looking for a sort through and home too.

    Your solution goes a long way to meeting that aim.

    However, I also like to change my widgets and images on my sidebar a fair bit, so it looks like these 'skins' wouldn't be too good for that.

    I think I've got a lot more pondering and learning to do over the winter!

  16. Jan and Heather--thanks!

    Les--see my reply to your comment about wooly aphids.

    VP--sent you a suggestion via email for how you might pull off the extra pages on your blog...


Note: Only a member of this blog may post a comment.