Customizing Blogger templates: Part 1

Before we jump into editing the html for our blog let’s get some great tools.
Personally I use Firefox as it is the preferred browser of many web designers. Internet Explorer is a designer’s nightmare.
Type ‘internet explorer quirks’ into your search engine, I got 1,010,000 results.

Once you have Firefox installed, get the Web Developer add-on and install it also.

So what does it do? It makes editing your template via the html easier.
WebPages and your blog are made up basically of Hypertext Markup Language(HTML) and  Cascade Style Sheets(CSS) code.

This is the html code that makes up a div, a div could be likened to a box.
<div id="main-wrapper" >
Text and Images can be added inside the box.
</div >

And this is the CSS code, this tells your browser how big the box should be and what to do with the elements inside it.

#main-wrapper {
  width:64%;
  float:$endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

Sometimes identifying the divs and page elements can be difficult this is where the Web Developer tool comes in handy.
This will be explained in Part 2