How To: Create Blogger Template From Scratch With CSS

Now we will redesign that table template into CSS layout. To keep this tutorial simple, we use CSS Framework form 960.gs. It contains reset.css, 960.css and text.css. Go to Design, Edit HTML, insert code from those file respectively.


Blogger has special section to put CSS:
<b:skin><![CDATA[
 //section for skin customization in Template Designer
]]></b:skin>
<style>
//CSS goes here
</style>

Example code snippet, take a look how we convert <table> into <div> elements:

<div class='container_12'>

<div id='grid_12'>
<b:section class='header-section' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Bleggar 90&apos;s (Header)' type='Header'/>
</b:section>
</div>
<div class='clear'/>

<div class='grid_3'>
<b:section class='leftsidebar-section' id='leftsidebar' preferred='yes'>
</b:section>
</div>

<div class='grid_6'>
<b:section class='main-content' id='main'>

</b:section>
</div>

<div class='grid_3'>
<b:section class='rightsidebar-section' id='rightsidebar' preferred='yes'>

</b:section>
</div>

<div class='grid_12'>
<b:section class='footer-section' id='footer'>
</div>
<div class='clear'/>
</div>

View example here.

Next: Template from static design. Visit ThemeForrest for beautiful Blogger theme.