BBP Week #3 - Sidebars, Buttons, and Backgrounds

Last week, we introduced the scary assignment of investigating a new header design. How did you do? I confess, as you've likely noticed, that I didn't work up the nerve to change mine yet. I've had a nasty sinus and gland infection, which made me not want to do ANYTHING. But also, I'm chicken. The header I have is safe. It works. I don't want to mess with a good thing. But what if I'm missing out on a great thing? If you're like me and hesitating to dip in, I highly encourage you to take the plunge. Save your current header. Work up a few options. Create a post sharing those options and asking for input. You can always change your mind and go back to the old header.

This week, keep working on those headers, but also start thinking about your sidebars, buttons, and backgrounds. Be sure to stay consistent with your color theme. Try not to incorporate more than 4 colors into it if possible.

First, before you even start hunting for the perfect background, you need to back up your current template. This is easily done by going into your dashboard and clicking "Template" and then "Edit HTML" Here's the easy part: click on "Save Template". Now, here's the hard part: remember where you save it. You back this up so that when you royally screw up your template, you can always go back to where you started. But there will be no royal screw ups. This is easy stuff. Honest. You'll do fine.

Free Templates
If you want to skip the idea of designing this stuff yourself ( which is very understandable,) here are some sites with free templates for you to consider:

• Cutest Blog on the Block
• Gisele Jaquenod
• LeeLou Blogs
• Becoming Jane

Okay, the last one has nothing to do with templates, but I love that movie. I hit 'stop' when they begin running away together since I can't stand an unhappy ending. I am then able to watch it happily, over and over again. But I digress.

Each website should have some pretty easy to follow directions. Most will likely have you switch your current template to Simple before adding the changes. Change everything without fear because you've already backed up your original. No worries. If you mess it up, you can go back as if it never happened by uploading what you downloaded.

Keep in mind, most free templates have sidebar designs that don't scroll with your blog. They look pretty, but not necessarily professional. Also, you will have very little sidebar options with these templates.

Sidebars
If you have lots of stuff to share in your sidebars, consider using a 3-column blog. Readers don't want to be overwhelmed when they visit your site, so don't do it if you don't need it. But if you have lots of goodies and topics to share with them, a 3rd column can be a great way to organize your content and separate the ads and blogger details from a table-of-contents column. This is easily added by going to "Template", "Customize", and then "Layout". Choose your favorite option.

Go through your sidebar and be sure all of your links work. You might break this into chunks spread over any days so that you aren't overwhelmed all at once. Delete things that aren't relevant to your blog's purpose. Delete things that are ugly. If it is unattractive, but you really want to keep it, find a way to make it attractive.

Blogger labels are often forgotten, but they are extremely helpful to your readers. Imagine a new reader stumbles across your blog and loves a post. They want to find more information on that same topic. Your labels in the sidebar and at the bottom of each post quickly direct them to similar topics. They spend an hour sipping coffee with you and come back for more. Make it easy. Use your labels. Take a look at your label button in your sidebar. Is it pretty? I personally love my cloud label organizer in my sidebar. Do you like what you have? If not, change it.

Look for ways to simplify your sidebar content. Rather than sharing buttons for every blogging friend you have, consider creating a blog post with lots of links and a button to link to that post.

Backgrounds
If you have a dark post body with white letters, it's time to stop. It is hard on the eyes and often unattractive. There are some cool exceptions that are worth the eye-strain. If you think you are one of the exceptions, then you should keep it because you like it and that counts for a lot. Otherwise: Stop it. Just stop. Change your post body to a white or light background that is kind to your readers.

As for the whole blog background, which shows on the outer edges of your sidebar, you don't want a wild, distracting background. A nice way to create some texture and richness without distractions is to use a background pattern creator. I like Pattern Cooler, which is insanely easy to use. At first, it took me a minute to see past the colors in the patterns listed. Once you choose your pattern, you can tweak the colors to be exactly what you want with the click of a button. After choosing your favorite pattern and colors, click download and save it to your computer.

To put this on your blog, upload to a free hosting service, such as PhotoBucket. After creating an account, all you have to do is click on the "upload" button and choose the file you downloaded to your computer. Once it is uploaded, you can resize it if you'd like. I click on "resize" and then choose the box that says "percentages". I shrank this pattern to 35% and then saved it. Photobucket gives different linking options, but click on "direct link" to add to your blog code.

To add the new background pattern, go to Template, Customize, and then Background. It will show you right where to upload your new image file.

If you use the Oooooold blogger templates, like Minima, add your new background like this:
Here is the only part that requires "code", but you only need to click and paste. No new nerd languages required! Using Blogger's new Simple Template, go into "Template" and click on "Edit HTML". Click on "Edit Template". A note will pop up telling you that this is a bad idea. It probably is. But you don't have to save anything you don't like. It will be okay. Click "Proceed".

Now, click anywhere inside that gobbledy-gook. Next, on your keyboard, press the Control (Ctrl) button and the "f" key at the same time. Type in: body {background:  (or you can just copy that bit and paste it in the search (find) box. 

Immediately after that part, there should be a color code, such as #ffffff. Leave one space after this and paste in url(http://yourdirectlinkhere.jpg)  Obviously, the part in the parenthesis needs replaced with the REAL direct link that you have waiting for you at photobucket.

Now, click on Preview to see if you screwed it all up or if it's how you like it.  If it's a mess or you change your mind, all you have to do is hit cancel or close the window. Either way, nothing changes unless you click "save".

Buttons
Next week, we'll discuss having a personal blog button. This week, the buttons we're talking about are actually topic headers. Consider organizing your sidebar by topic. Think about creating simple button headers (keep in mind the width of your sidebar before creating them in picmonkey or Gimp) with titles such as:
About Me
Friends
Recommended Sites
Contact Info
Affiliates
Archives
Highlights

These can be organized with text or with buttons that you create in picmonkey. Have at it!


Clean up your sidebar
Share your new header ideas
Play with backgrounds
Organize your sidebar with headers or buttons





Now, let me see what you've been up to! Link up if you're participating in the Summer Blog Beautification Project!

An InLinkz Link-up