PAY NO ATTENTION TO THE GEEK BEHIND THE CURTAIN!

So Steph asked how I make my blog.

It's totally done by magic. (Shh. Don't tell.) I just found a little pouch in the back of the Apple store one day labeled 'Blog Dust' and all I do is pour a little into my hand, make a wish for something stylish and then blow it onto the screen. VOILA! A blog of my very own!

Magic. Really. Simple as that.

Actually, I code it all by hand. I could never get Dreamweaver to work for CSS.

Way back in September for my one year anniversary (blog-iversary?) I decided to do the major overhaul and I just spent an entire day (or 2, maybe 3, maybe 8, I'm not sure - it's all a little hazy) learning CSS as much as possible just by looking at blogger templates and the source code of blogs that I like the look of. This is also a good resource for learning what all the CSS code stands for.

CSS is not hard at all once you figure out what everything does. The first half of the template gives the ingredients to make up the blog - how the text and spacing should look, how to treat a link, how the header should look, etcetera. The second half of the template takes those ingredients and actually makes the blog - where to put the text, what graphic to call, where to put the Blogger code. Each ingredient on top should correspond with a direction on the bottom. The only thing that sucks is that I've never seen two blogs with the same 'ingredient' code. It seems that everybody does it differently. Which makes it a little hard to figure out at first.

I actually started out with one of the stock blogger templates (Scribe, by Todd Dominey), then hacked the shite out of it to get the container so I could have a plain background for the text and a pattern or gradient on the sides - which I haven't really used in awhile. (I made the patterns from scratch using the offset tool in Photoshop.) When it comes to the coding, you just gotta take one section at a time and not worry about how it looks till you're all done. The template code can smell your frustration, your fear...never let it beat you. I do tend to yell a LOT when making big changes though...

To get the three columns, which I could NOT figure out until B was looking over my shoulder and said 'hey, why don't you just do a this' I used a basic table. It's actually 5 columns, 3 for content and 2 for the spacing. You just figure out how wide you want the container to be (mine's 800px), then take off a few pixels to leave a border (mine's 790) and divide the table into percentages: mine is like, 25%, 5%, 50%, 5%, 25%. Which doesn't add up to 100%, but it works to get it in the container. Not totally reliable, but it does the job. I don't look at it on a PC very often, but I guess it works, right?

Right now, the container is still there, but I just have it the same color as the background. Same for Wonderful Time. The only problem I've had with the container, is that if you use the program Paparazzi (sorry, Mac only) to grab a picture of the site, it only grabs the container, not the patterns on the side. Which is really only a problem if you need to put the site in a portfolio or something...

Then it's just a matter of putting what you want in which column you want and then making the graphics themselves. All this takes is basic HTML tags. I'm anal to the extreme, so this part takes me awhile to get the breaks and spacing right. Also, making every.single.graphic. in web colors will make your life WAY easier when you go to do the link colors and container borders. I like to use this page to get the color codes.

Actually making the graphics takes the least amount of time out of everything. When you're done, as long as you name them the same each time, the code does all the work for you.

Also, all the content in the sidebar has to be changed by hand through the template, and doesn't get saved when you change it. Which sorta sucks. I've toyed with going to Typepad, which lets you categorize and archive things such as that, but that takes money! Blogger's free!

Anyway, I actually have a totally separate bigskystarlettest blog where I play with all the code beforehand. It makes life MUCH MUCH MUCH easier. Less 'OMIGOD I JUST @#$% up my BLOG now what the hell am I gonna do' and more 'oh, so that's what that does' and 'that looks awesome, lets do that'. I have a separate test folder on our server for the images so it doesn't change the real blog. Then, all I do is copy the entire template into the ACTUAL bigskystarlet blog when I end up with something I like.

This time I wanted to get away from having a wide header with content underneath as per usual, so I cleared everything out of the left sidebar and just put the graphic there instead. When I did Wonderful Time, I just put the content in the sidebar instead of in the center and changed the percentages on the table to make the columns the right size. Easy-peasy. Simple cut and paste.

Let me know if you need any help, I'd be glad to take a look at it if you get stuck!