2 Column CSS Layout Generator for Blogger

Home 1 Column Layout Generator 3 Column Blogger Layout Generator 4 Column Layout Generator 5 Column Layout Generator

Output

Change class names in HTML code or auto change. Back to default
Include <style> Full HTML code

Editor Panel

side gutters Yes No
Layout unit
px em %
Body font-size
Body font unit
Height
header
px
main body
px
footer
px

Why need the tool

This page is dedicated to develop a tool to generate HTML and CSS code of 3 column layout for blogs in blogger.com. The online editor of blogger provides an option to edit the page in HTML mode. Just paste the code here into the editor, you could easily customerize the layout of your blog in blogger. In the HTNL mode of the editor, you could not link to a CSS file. The CSS code is either put in the block of <b:skin><![CDATA[ CSS code ]]></b:skin> or put in a external CSS file.

Now it's only in Beta stage for this tool. We will work to make the codes generated here  more compatible with the editor of blogger once uploaded.

Here is a demo (3 column) of a blog using codes generated by this tool.

Features

  • Liquid/fix design, no tables, no javascript, pure layers and css.
  • Visual change the width and safe colors, WYSIWYG
  • Cross browser compatibility

Advantages

  • Save the time of design the layout
  • Easy to change the exsisting page
  • Easy to develop muti-view pages like msn or yahoo with the aid of some scripts

How to use

Just drag 2 sliders above to adjust the layout sizes of the page. The css code is dynamically generated in textarea box.

  • Slider1 - overall width of the layout
  • Slider2 - adjust the width of right column and left column.
  • Slider3 - click gutter tab and you can also adhust the width of gutter
    • <

Browser Compatibility

The css code generated by this tool is shown to have compatibility with the following browsers. You are welcome to send me the feedback if your browser have passed the test.

  • IE 7.0, 6.0
  • Firefox
  • Chrome
  • Safari