Design Your Blogger's Template

Someone requested me to share few tips in Web Designing. With the rapid technology updates, what you've have learned that is quite complicated few years ago, maybe as simple as 1, 2, 3 at this time. Knowledge in HTML may be something valuable about 10 to 15 years ago in web designing/developing. But with the rapid growth of web designing technology, HTML now is just part of High School curricullum. There's a lot of free HTML tutorial on the internet and knowing the basic is very much enough to start blogging and make money from it. But to some, having a unique blog design can be fun to look at. I can only share few tips on how I design my blog layout here in bloggers.com and the rest is yours to explore.

PART ONE;
The regular blogger's template has 4 sections: The header, main (with the Blog Posts), sidebar and footer.

click for larger view

Lines 010 and 320 are the body-tags. All your code has to be between these two tags.

Lines 020 and 310 are the div-tags for two wrappers, the wrapper called "outer-wrapper" and the wrapper called "wrap2". In CSS you can define fonts, colors, and other styling for these wrappers. We'll look into CSS later in this tutorial.

Lines 080 to 120 contain the header. As you see, there is a div-wrapper (080 and 120), section-tags (090 and 110) and the widget that contains the header itself (100).

Lines 130 to 270 contain the content. Content means here: blog posts and sidebar. There is a div-wrapper called "content-wrapper" (130 and 270), and inside this wrapper there are 2 more wrappers: the "main-wrapper" (140-180) and the "sidebar-wrapper" (190-240).

Inside the main-wrapper we find the main-section (150 and 170) with the Blog-widget (160). This widget contains your posts.

Inside the sidebar-wrapper we find the sidebar-section (200 and 230) with an Archive-widget (210) and a Profile-widget (220).

And finally we have a Footer (280-300).

In the stylesheet you will find the following code:

#outer-wrapper {
width: 660px;
padding: 10px;
....... }

#main-wrapper {
width: 410px;
float: left;
....... }

#sidebar-wrapper {
width: 220px;
float: right;
........ }

The outer-wrapper has a width of 660 pixels that has a padding of 10 pixels. Everything that is inside the outer-wrapper stays 10 pixels from the border. This leaves 660 - 20 = 640 pixels for main-wrapper and sidebar-wrapper. The main-wrapper has a width of 410 pixels, and floats to the left.The sidebar-wrapper has a width of 220 pixels, and floats to the right. Together, main-wrapper and sidebar-wrapper have a width of 410 + 220 = 630 pixels. In the middle there is a space of 640 - 630 = 10 pixels. If you want to squeeze in a second sidebar, we have to do something to create space.

PART TWO
To add a second sidebar you have to add it to the CSS, and make it fit into the page.

Step 1: Backup the template.

Step 2: Make your right-sidebar unique.
Change lines 190 and 200:
190: div id='right-sidebar-wrapper'
200: b:section class='sidebar' id='right-sidebar' preferred='yes'

In your CSS style-sheet, change "#sidebar-wrapper" to "#right-sidebar-wrapper".
If you save your template now and view your blog, it should look okay.

Step 3: Add a left sidebar by adding new lines of code:
131: div id="'left-sidebar-wrapper'"
132: b:section class="'sidebar'" id="'left-sidebar'" preferred="'yes'/"
133: /b:section
Now save your template, and take a look at the Page Elements tab.

You can see there is a new section, just below the header and above the posts. But it is not at the left side of the screen jet. Therefore, you have to add some CSS.

Step 4: Add CSS for the left sidebar.
In your CSS-style sheet, add the following code:
#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

The sidebar-section is now to the left, but your right-sidebar is suddenly below your posts. It is because the width of 2 sidebars and a main-section counts up to 840pixels, and that is more than the width of the outer-wrapper (660 pixels).

Step 5. Change outer-wrapper and header-wrapper width.
In your CSS-stylesheet look for the #header-wrapper and #outer-wrapper definitions, and change the width from 660 to 860.

Step 6. Add a page element.
Now finally, add a page element to your left sidebar.

If you want to change the color or design of your background layout, review the structure in PART ONE and find out which wrapper's background would you like to change. You can usually get free background layout design on the interet. Try searching the word "background code generator". Explore your blogger's template features and match colors to your chosen background design. Give it your own style. Have a great day to all.