Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Create a Simple Blogger Template

Create a Simple Blogger Template

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,085 views

Here’s a nice tutorial I found courtesy of Wajahat Ahmed of BlueKut which you can use. It’s  how to create a simple Blogger template.

Follow these steps:

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

HTML

<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

#container
{
width:900px;
margin:0 auto;
overflow:auto;
}
#header
{
height:90px;
}
#nav
{
height:30px;
}
#main
{
overflow:auto;
}
#footer
{
height:40px;
}
  • Divide your main div (content part) to to 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>
  • Work with an unordered list <ul> tag.
<div id="nav">
<ul>

<li>HOME</li>

<li>PROJECT</li>

<li>TUTORIALS</li>

<li>FACEBOOK</li>

<li>JQUERY</li>

</ul>
</div>

Nav
#nav

{

overflow:auto;

}

#nav ul

{

list-style:none;

height:30px;

padding:0px;

margin:0px;

}

#nav ul li

{

float:left;

margin:10px;

}
Last Codes

HTML

<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


<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>

Hope this helps.

 

Liked It ? Please Share

Comments

One Response | Post A Comment | Subscribe To Comments RSS Feed

  1. wow that’s great! now I can make and modify my own template with this code

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here