3 Column Layout Generator for Blog

Home 1 Column Layout Generator 2 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 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 3 sliders above to adjust the layout sizes of the page. The css code is dynamically generated in textarea box.

  • Slider1 - adjust overall width of the page
  • Slider2 - adjust the width of left column and left column.
  • Slider3 - adjust the width of the left and middle columns

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