How To Create Your Own Basic Blogger Template In Easy Steps Tutorial

In this post I will show you how to design blog template frame with CSS and HTML step by step . CSS helps you to design better and flexible webpage layouts. This is very basic CSS + HTML tutorial, CSS just awesome it adds flavor to the web page.

• For your web layout, divide into four horizontal parts: Hearder, Nav, Main and Footer. Container is the parent div.

Step 1 Web layout divided into four horizontal parts are Hearder, Nav, Main and Footer. Here Container is the parent div.  

HTML CoDE

<div id="container"> <div id="header"> 1 Header</div> <div id="nav"> 2 Nav</div> <div id="main"> 3 Main</div> <div id="footer"> 4 Footer</div> </div>

 

CSS CoDE 

#container { width:900px; margin:0 auto; overflow:auto; } #header { height:90px; } #nav { height:30px; } #main { overflow:auto; } #footer { height:40px; }

Step 2 main (content part) div dividing into two vertical parts are main_left(article part) and main_right(sidebar part)

<div id="main"> <div id="main_left"> Article</div> <div id="main_right"> Sidebar</div> </div>

 

CSS COde

#main { overflow:auto; } #main_left { float:left; width:600px; } #main_right { float:left; width:300px; }

Step 3 Now working with an unorder list tag.

<div id="nav"> <ul> <li>HOME</li> <li>PROJECT</li> <li>TUTORIALS</li> <li>FACEBOOK</li> <li>JQUERY</li> </ul> </div>

#nav { overflow:auto; } #nav ul { list-style:none; height:30px; padding:0px; margin:0px; } #nav ul li { float:left; margin:10px; }

HomE Page

This page should be with multiple article title links with little description, so that reader can quickly find more information. W3C standards specifying <h1> tag use for top-level heading. 
 

ArtIcle PaGe

Here article title is the most important and top level, so title should be in <h1> tag.

Final Code

Take a look at this demo link 

HtMl CODe

<div id="container"> <div id="header"> Header </div> <div id="nav"> <ul> <li>HOME</li> <li>PROJECT</li> <li>TUTORIALS</li> <li>FACEBOOK</li> <li>JQUERY</li> </ul> </div> <div id="main"> <div id="main_left"> Article</div> <div id="main_right"> Sidebar</div> </div> <div id="footer"> Footer</div> </div>

CSS CoDE

<style type="text/css"> #container { width:900px; margin:0 auto; overflow:auto; } #header { height:90px; } #nav { overflow:auto; } #nav ul { list-style:none; height:30px; padding:0px; margin:0px; } #nav ul li { float:left; margin:10px; } #main { overflow:auto; margin-top:3px; } #main_left { float:left; width:600px; min-height:400px; } #main_right { float:left; width:300px; min-height:400px; } #footer { height:40px; } </style>