Design a blogger template from scratch

Step 3 - The Basic Structure

1. This is the basic visual structure of a template containing :
   • Header-Wrapper (Header)
   • Content-Wrapper
     • Main-Wrapper (Posts' section)
     • Sidebar-Wrapper
   • Footer-Wrapper (Footer)
   
   
2. The adopt that in our structure, for each one we must create a separate DIV section, like this :
   

   	<div id="outer-wrapper">
   		<div id="header-wrapper">
   
   		</div>
   
   
   		<div id="content-wrapper">
   			<div id="main-wrapper">
   
   			</div>
   
   			<div id="sidebar-wrapper">
   
   			</div>
   		</div>
   
   
   		<div id="footer-wrapper">
   
   		</div>
   	</div>
   

   
   
3. Copy/Paste the above code between in your BODY section, between the body tags.
   
4. Save your Template.
5. Return to your blogger account (in Edit HTML) and choose Browse to find your template (test.xml) and then upload it.
6. Reload your blog page (xxxxx.blogspot.com). What you must be seeing now is nothing but a blank screen.
7. Are you ready to start filling the void? If so, proceed to the next step.

 

<< Previous Step

Next Step >>