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 must be put in the block of <b:skin><![CDATA[ CSS code ]]></b:skin>

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. Note the code here is not able be used in the blog in live.com although it works well in its offline Windows Live Writer. The reason is live does not accept the syntax {position:relative} when uploading the HTML code.

Features

• Liquid 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 4 sliders above to adjust the layout sizes of the page. The css code is dynamically generated in textarea box.

• Slider1 - adjust the left and right margin of the page
• Slider2 - adjust the width of right column and left column.
• Slider3 - adjust the width of the gaps and hence influence the width of left and right columns
• Slider4 - adjust the width of the gaps and have influence to the width of all 3 columns. But only have limited band for adjustment.

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