How To Making Blogger Template Part 3

On the previous topics we have discussed how to create a section and widgets. However, we do not discuss how to set the layout of the template. In this post, we discuss it. Therefore, our advice, please read our post back about how to create blogger template, how to create blogger template part 2, html, css.

A. Planning A Template

Before we make a template, it is important to plan a template. However, in general, a template will look like this

From the image we can see, the entire contents of the blog is in the body. All depends on the tastes and needs of each people.

B. Setting the Layout

Because the entire of blog contents are in the body, then we highly recommend you give width: 100% in css code. Consider the following snippet of code body

html code

<body id='bodypart'>...</body>

css code

#bodypart{width:100%;height:auto;background:url("image-url");}

We strongly recommend that you give auto at height. Because each page of your blog is very different. For background, you can insert a picture as background. However, you must accept the consequences of your blog to be slow. A blog content normally located in the middle of the body. You can do this by following

html code

<div id='blogcontent'>
...
</div>

css code

#blogcontent{
margin:0 auto;
height:auto;
width:980px;
}

Components {margin: 0 auto} cause the entire contents of your blog is in the middle the body.

C. Creating a Sidebar

Creating a sidebar at the core is essentially css. Consider the following example

html code

<div id='leftside'>
   <div id='leftsidecontent'>
      <b:section id='leftpart' class='leftpartside' preferred='yes'/>
   </div>
</div>
<div id='mainside'>
   <div id='mainsidecontent'>
      <b:section class='main' id='main' showaddelement='no'>
         <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
      </b:section>
   </div>
</div>
<div style='clear:both'/>

css code

#leftside {
float:left;
width:320px;
height:auto;
}
#leftsidecontent {
width:300px;
height:auto;
margin:10px auto;
}
#mainside {
float:right;
width:660px;
height:auto;
}
#mainsidecontent {
width:640px;
height:auto;
margin:10px auto;
}

This code will display the blog posts located on the right (float: right) and the sidebar is on the left (float: left). What to consider when you involve the float is adding <div style='clear:both'/>, which serves to produce a new line. This method applies to all models of the sidebar, which is different is how the presentation. Consider again the following example

html code

<div id='leftside'>
   <div id='leftsidecontent'>
      <b:section id='leftpart' class='leftpartside' preferred='yes'/>
   </div>
   <div id='left1'>
      <div id='left1content'>
         <b:section id='left1section' class='leftsectionside' preferred='yes'/>
      </div>
   </div>
   <div id='left2'>
      <div id='left2content'>
         <b:section id='left2section' class='leftsectionside' preferred='yes'/>
      </div>
   </div>
   <div style='clear:both'/>
</div>
<div id='mainside'>
   <div id='mainsidecontent'>
      <b:section class='main' id='main' showaddelement='no'>
         <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
      </b:section>
   </div>
</div>
<div style='clear:both'/>

css code

#leftside {
float:left;
width:320px;
height:auto;
}
#leftsidecontent {
width:300px;
height:auto;
margin:10px auto;
}
#left1 {
float:left;
width:160px;
height:auto;
}
#left1content {
width:140px;
height:auto;
margin:10px auto;
}
#left2 {
float:right;
width:160px;
height:auto;
}
#left2content {
width:140px;
height:auto;
margin:10px auto;
}
#mainside {
float:right;
width:660px;
height:auto;
}
#mainsidecontent {
width:640px;
height:auto;
margin:10px auto;
}

result of this code is left sidebar will break down into two pieces, namely left1 and left2. Consider the following figure

That's the core of the adjust layout. The rest, you can give a certain style, through the use of css.

IsalBlog.ComDecember 18, 2011 at 3:40 AM
saya suka dengan blog ini, selalu ada postingan baru, tp yg sy tdk suka bahasanya krn sy tdk tahu bahasa yg kaya ginian, jadinya komentar asal-asalan deh. hehehhe
klo gitu nyumbah 1 klik aja deh buat threelas.com
SintoDecember 18, 2011 at 5:41 AM
keren mbak tapi apa gak bisa pake bhs indonesia soalx kurang ngerti kalau make bhs inggris
UnknownDecember 18, 2011 at 9:18 AM
Untuk mas IsalBlog.com dan Zh!nTho:
Threelas.com telah menyediakan terjemahan yang ada disebelah kiri bawah. silahkan di klik. monggo.
Ristia YuanitaJanuary 3, 2012 at 6:50 PM
Nice post..keep blogging

Get Latest Update Basic Setting Bootstrap on Blogger

Contributors

Threelas

How To Making Blogger Template Part 3

A. Planning A Template

B. Setting the Layout

C. Creating a Sidebar

Sponsor

All Comments

Labels

Join Us On Facebook

Blog Archive