Building a Template for Blogger with CSS- Behind the Scenes of TWTME 2.0

So as I said before, the new version of the site is up and I thought I would share the basics and some of the difficulties of redesigning a blogger template since this is also a technically a blog about Web Design. This may get a bit boring for the non computer geek so you may want to skim through it. I'll try to keep it interesting and basic enough so everyone can understand at least the basics.

Why build a template anyway? Well as nice as the default templates are, they are jus that, default. I prefer to have things my way and show a bit of creativity. For anyone who wants to change things up a bit, it's relatively easy to change some of the settings of a default template and end up with something pretty unique. To start you can change all the colors of your blog through CSS at the beginning of the template, in your settings. Adding stuff to a side bar, footer or a picture at the top are all pretty easy with really basic HTML knowledge. For both CSS and HTML the web is the first place to start. You don't really need to know how to code, just how to recognize a few key things and change or copy a few lines of code.

How did I build the template? I built my template from scratch and then incorporated aspects of my current blog template that I like. I started by reading up on CSS since that is the key to building a good template and one that is easily customizable. The layout is pretty simple. Think of it as a bunch of boxes drawn on a piece of paper. I start with a big box which is the "container". The whole blog is built inside this. It facilitates centering everything on the page and makes it look pretty on different screen resolutions. Then inside the container there are four more boxes (called 'layers', made with the

tag in HTML). There is the "header" layer on top, and the "footer" layer on the bottom. In the middle, my template is built with a layer for the content of the site on the left and a "side bar" on the side (DUH!) for navigation, links, etc. Many people who run blogs don't actually use the footer and some people switch the side of the side bar or have two; but the basic design of most blogs is similar to this.

I then layed out the color scheme for the blog in CSS and designed what the side bar would look like. Did a bit of graphics work for the picture of the eyes (mine BTW) and most my design work was done. I incorporated a layout for the posts themselves similar to the previous layout. I thought it was clearly layed out and sharp, so why fix something that isn't broken. The rest of the blog-related content is placed with the help of blogger tags which you can read about in the Blogger Help Section.

Bugs? Over the course of building the design, most the problems popped up around issues dealing with compatibility between browsers. The first problem I had was the IE (Internet Explorer) double margin bug, which was fixed pretty easily with a bit of help from the web. The second was the IE expanding box bug. Also rectified with the help of the net. My last big problem caused all the text of my first post to only start after the sidebars contents ended. Unlike the other bugs this one only happened in Firefox. I call this bug the Blogger Layer Clearing bug. It's caused by some automatic features in the blogger system. I found a workaround also on the net but then realized that because so many people had complained about this, blogger put in a built in workaround. Those were the main bugs although I still have a few issues similar to last one in the archives that I may try to iron out.

Any questions about template design, CSS or web design in general can be directed to me at my e-mail. If you have any suggestions about template improvement or features you would like to see, you can also drop me a line.