The Making of TBODC - Part 1

In this four-part tutorial I will be explaining (to the best of my ability) how I designed my blog. But before we begin...

A Personal Rant

The biggest problem with new Blogger themes is the utter lack of support and user instructions. This is why WP people smile largely whenever I mention Blogger themes. At least with WP the people who make the themes include instructions on using them and they offer support. With Blogger themes the only instructions you're likely to get is how to install it and if you have any questions you usually have to put them in the comments on the page and hope someone answers (which nine times out of ten is unlikely).

Theme makers pay attention - if you're going to take the time to make a Blogger theme and release it to the public then be prepared to provide adequate instructions and support for those themes. This "Oh I'm very busy" crap is just that - crap. If you're going to make a product, then offer support for that product.

Ok, I'm done (for now). Let's get on with the show...

Prepare

When I first started this blog I chose the Thisaway template. Blogger offers a variety of premade templates to choose from, but when choosing a template try to opt for the simplest one. This makes tweaking a lot easier. Some templates that are easy to tweak would be Minima, Thisaway (mine), and Simple II.

After countless hours scouring the Web looking for answers on how to tweak this template I found the following sites to be the most helpful:

Blogger Buster
Dummies Guide to Google Blogger (Beta)
Blogging Basics 101
Hackosphere
Blogger Help Group

There are a ton more sites out there, but I only listed the ones where I found the best information and where the site owner actually replied to comments.

And last but definitely not least for a wealth of awesome Blogger tips, tutorials, and coding fun check out Annie's BlogU.

The first thing you need to do if you plan on tweaking your blog design is to get yourself a fair amount of understanding about the coding. Yes, you can easily find tips and tutorials and copy/paste other people's information, but in the end you're not learning anything. And if something goes wrong what are you going to do? Especially if you pasted the code off some yahoos site where he/she never replies to your comments. So at the very least take the time to get to know the basics of your template's coding structure, because not all templates are coded the exact same way.

For example, in my Thisaway template the code for the infamous header looks like this:

#header {
background: url() repeat-x $startSide bottom;
}

In the Scribe template it looks like this:

#main-top {
width:700px;
height:149px;
background:#FFF3DB url() no-repeat top $startSide;
margin:0px;
padding:0px;
display:block;
}

Capiche?

The best place to start would be Tutorials on Blogger Template Design offered by OurBloggerTemplates. This is a pretty decent tutorial and will explain a great deal about the layout and coding of a basic Blogger template. They offer some nice templates there as well so browse around. Unfortunately, their instructions and response time to people's questions is not the greatest.

Next I would like to remind you of a few things that I have found immensely helpful in tweaking my blog and that of my Mom's (she uses a three-column Scribe template which you can view here).

1) Remember to download and save your template code before doing any work on it. Remember to download and save your template code before doing any work on it. Ok, I think two times is enough. Want me to say it again? I didn't think so.

2) Get yourself a text editor. My personal favorites are NoteTab Pro and Notepad++. A text editor comes in handy for saving and opening those Blogger XML templates. And if you make a change that goes badly in your template you can always stick the original code back in from your saved version (as opposed to uploading the whole thing again).

3) Find yourself a screen capture utility. Personally, I prefer FastStone Capture. I have found this utility to be a lot more flexible and user friendly than other capture programs or you could even use PrintScreen on your keyboard (providing it works). Taking screenshots of your blog page and opening them in Photoshop (or whatever image editing program you use) can be a huge help when you're trying to figure out things like color, sidebar width, or how much more padding an object needs.

4) You will need somewhere to host the images you use on your blog. I have my own server, but you may not. I would highly recommend getting your own hosting account though, especially if you plan on having a blog for any period of time.

5) If you do have a hosting space then you should use an FTP program, because it makes the job of uploading your images much easier. I use FireFTP and sometimes SmartFTP. FireFTP is a Firefox add-on that runs right in the browser and it's free. SmartFTP has a trial period and after that it costs $36.95 (USD).

4) Finally, ask questions. Write e-mails. Search the Web. Be persistent. The answer is out there.

Ok, so you now have a few things to do, yes? I know. When are you going to show us the cool stuff? Soon, I promise. But first you must prepare. Just taking some code off a person's page and plastering it in the middle of a whole bunch of other code that looks like the Greek Alphabet is not helping you. You must understand what you are doing.

Because, think about this, wouldn't it be great if you knew how to fix that troublesome header instead of having to scour the Web looking for the answer or waiting on some yahoo to reply to your question? Of course you would!

So get your tools and wander back up to the top of this post and visit those links. Read. Learn. Ask. If you already know most of this then great! Have a cookie.

Next up in The Making of TBODC Part 2, headers, sidebars, and footers - oh my!