The Body Section of the Blogger Template Code

>> Browse templatesMoney tips22 comments

Blogger Template Design: Tutorial 8

In this tutorial, I'll explain the basic structure of the Body of the code so that you get the idea on how it works with the rest of your code. The code is located in Section 3 of the Blogger Template Code Structure. This is the main part of the Blogger template code that retrieves the data to be displayed on your blog. It's basically the core part that makes your whole blog functions. The code that sets how it appears on your blog is the CSS Styling code.

Refering back to the tutorial Blogger Template Code Structure, the Body code is in Section 3 as shown in the image below.


Shown below is the Body code copied exactly from the Blogger Edit HTML page with the 'Expand Widget Button' unchecked. I do not want to include the complete code by checking the 'Expand Widget Button' for 2 reasons. First, it's not necessary to do this. You actually don't even have to know what goes on inside the complete code to be able to design a properly working Blogger template. That's all been done 'automatically' by Blogger, which is the beauty of using this new Blogger template as oppose to the old classic ones. Second, by looking at this simpler version of the code, you'll be able to grasp easier the main idea of how all the containers in the template are laid out.


<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Testpage Two (Header)' type='Header'/>
</b:section>
</div>

<div id='content-wrapper'>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-wrapper -->

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='Blogger Template | Bordr' type='Text'/>
</b:section>
</div>

</div></div> <!-- end outer-wrapper -->
</body>


For simplicity, ignore the code in light grey. They are either comments or 'default' codes to make things work properly that doesn't need to be tampered with. The core part of the codes can be sectioned into 4 parts:
  1. Header (in red)
  2. Main (in green)
  3. Sidebar (in red)
  4. Footer (in brown)
You'll see in the above that all the codes are first wrapped in the body tag, followed by the outer-wrapper tag, then the wrap2 tag. These wrappers are used to group the containers together so that they can be easily editted together. Using wrappers also make placing the containers much easier especially if you want to use additional sidebars or extra containers (such as a banner or linkbar containers as in most of my templates). In the explanation below, I'll only refer to the outer-wrapper as the larger wrapper without referring at all to the wrap2 wrapper. They're just the same (I'm not even sure why the wrap2 is there in the first place).

Inside this large container, you'll see 3 wrappers - header-wrapper, content-wrapper, and footer-wrapper. They are positioned vertically with the header-wrapper being at top and the footer-wrapper being at the bottom. It's simply because in the code, the header-wrapper is called first, followed by the content-wrapper, and finally the footer-wrapper. At this point, you don't even have to know what's inside the content-wrapper - this makes it much cleaner and easier as oppose to not having the content-wrapper and having to deal with the main-wrapper and sidebar-wrapper together all at once. It'll be a big mess then.

Because the outer-wrapper is the largest wrapper, you have to make sure that the widths of all the other wrappers inside it is less or at least equal to the outer-wrapper's width. But, if you add borders, that'll add extra pixels to whichever wrapper that you're adding the borders too. So be careful when adding borders!

Adding a new wrapper (container) in between any of these wrappers is easy. Just paste in a wrapper code (see below for example) and rename it with a new name, say a banner-wrapper. The preferred='yes' command will make an 'Add Page Element' button that'll allow you to create new widgets.

<div id='banner-wrapper'>
<b:section class='banner' id='banner' preferred='yes'>
</b:section>
</div>


Adding a wrapper only creates a new container, or block, in your blog. In doesn't set how it's going to look or where it's going to be located. To customize how it looks and where it's located in the blog, you NEED to tweak the CSS codes.

Inside the content-wrapper, you have the main-wrapper and sidebar-wrapper. To have these two wrappers side-by-side as commonly seen in blogs, you have to set the widths of these 2 wrappers such that it's equal or less than the width of the content-wrapper. Plus, you have to add certain commands in the CSS Styling code so that they'll sit next to each other. Otherwise, they'll just fall vertically on top of one another. Typically, you need to use the 'float:left' command for this. See some template examples to check more on this. If you want to add more sidebars, say a 3-column template, you simply need to add more sidebar-wrapper code (in blue). Read more in Tutorial 10 to know how to add or change sidebars.

Once you've understood the basic idea behind the Body code, it's easy to see now why the common structure of the Blogger template code looks the way it is (see below for a 3-column example). If you want to rearrange or add new containers or wrappers, what you simply need to do is to modify the Body of the code. It's that easy! But then, you have to tweak the CSS code to set how it's gonna look in the blog.


***************************************
Next Tutorial:
More explanation about the Body section of the code is given in Tutorial 9.

22 comments:

Mai Trâm November 01, 2008 10:02 pm  

What a well-written article! This is what I need to know. Thank you.

Marie Beausoleil November 11, 2008 2:14 pm  

I'm using one of your templates at http://ofbooksandwriting.blogspot.com and I love it. However, no one can add comments. Could you please help me?

SostyPasha February 01, 2009 3:13 am  

interesting article (Y)

KALINAGO ENGLISH April 17, 2009 11:55 am  

Hi,

Am very happy with my template and have read through your tutorials however I am having a problem with what shows up for each post when I share a link elsewhere.

With the previous template, the first few lines of text would appear as an intro, however now it is taking a random piece of text from one of the sidebars.

I've combed through the template, gone through each section of the settings and cannot find where or why it is doing this.

Could you please help?

Thank you, Karenne

Ashley December 29, 2009 10:58 am  

If there anyway to get the header and header wrapper out side of the outer wrapper?

TamoenBemberria March 13, 2012 8:13 am  

I am struggling to get a template with this structure. could you give me your CSS code for my template. I tried a lot. I would appreciate it sooo.

Zheng junxai5 July 20, 2015 12:48 am  

2015-07-20 zhengjx
hollister kids clothing
michael kors
cheap ray ban sunglasses
toms shoes sale
ray ban sunglasses uk
pandora charms sale clearance
michael kors uk outlet
true religion
true religion sale
cheap oakley sunglasses
coach outlet
ed hardy outlet
hollister outlet
michael kors
kate spade outlet
ray bans
michael kors outlet online
ray ban sunglasses
air max uk
louboutin
true religion jeans
air force pas cher
chanel bags
kate spade
longchamp
fitflops shoes
michael kors handbags
polo outlet
prada outlet store
ray-ban sunglasse
mcm backpack
pandora jewelry sale
coach outlet store online
louis vuitton borse
ray ban glasses
oakley sunglasses outlet
coach factory
longchamp outlet online
tory burch shoes
cheap soccer jerseys

Meiqing Xu September 01, 2015 8:33 pm  

1592meiqing
hollister,hollister co,hollister jeans,hollister.com,hollister ca,hollister clothing
oakley sunglasses
michael kors outlet
nfl jerseys
michael kors
true religion
michael kors
louis vuitton outlet
hollister co
michael kors outlet
oakley sunglasses wholesale
oakley vault
ugg australia
cheap uggs
coach outlet
rolex watches outlet
hermes birkin bag
louis vuitton outlet
toms shoes
fitflops clearance
louis vuitton
coach factory outlet
michael kors handbags
nike trainers uk
mont blanc pens
kate spade handbags
celine outlet
michael kors handbags
coach factory outlet
coach outlet

mmjiaxin November 20, 2015 6:02 pm  

abercrombie and fitch
barbour jackets
indianapolis colts
chanel handbags outlet
minnesota vikings
ralph lauren outlet
michael kors outlet sale
ralph lauren outlet
louis vuitton outlet store
rolex watches,rolex,watches for men,watches for women,omega watches,replica watches,rolex watches for sale,rolex replica,rolex watch,cartier watches,rolex submariner,fake rolex,rolex replica watches,replica rolex
michael kors handbags
longchamp handbags
boston celtics
nike outlet store
oakley outlet store
ugg boots
tory burch outlet online
uggs outlet
ugg outlet store
cheap wedding dresses
mm1121

Mycar Carrier November 28, 2015 8:36 pm  

packers movers Chennai
packers and movers in noida
packers and movers ghaziabad
packers and movers indore
packers movers gurgaon
packers and movers in kolkata
packers and movers in mumbai
packers and movers Pune
packers and movers in Hyderabad
packers and movers Bangalore
packers movers faridabad
packers and movers in Delhi
packers and movers in lucknow
packers and movers kolkata
packers and movers delhi
packers and movers mumbai
packers and movers pune
packers and movers faridabad
packers and movers indore
packers and movers chandigarh
packers and movers chennai
packers and movers bangalore
packers and movers raipur
packers and movers patna
packers and movers lucknow
packers and movers noida
packers and movers bhubaneswar
packers and movers ghaziabad
packers and movers gurgaon
packers and movers thane
packers and movers navi mumbai
packers and movers hyderabad

柯云 December 09, 2015 9:02 pm  

2015-12-10keyun
canada goose
oakley store
official coach factory outlet
coach outlet online
michael kors outlet clearance
louis vuitton bags
discount ugg boots
ugg outlet
nike running shoes for men
ugg boots
louis vuitton purses
hollister
adidas superstar shoes
michael kors outlet
coach outlet online
abercrombie
christian louboutin shoes
uggs outlet
michael kors outlet online
louis vuitton outlet stores
ugg boots sale
abercrombie fitch
discount jordans
ray ban sunglasses outlet
ugg boots
abercrombie
replica rolex watches
ralph lauren
louis vuitton handbags
gucci outlet
coach outlet online
ralph lauren sale
christian louboutin
cheap ray ban sunglasses
canada goose outlet store
oakley sunglasses wholesale
rolex watches
canada goose sale
michael kors outlet
north face jackets

Kiên Huệ January 20, 2016 2:16 am  

This time I feel stressed, I go online to find the article to read. I happened to read your article, it's nice and emotional. I love it. descargar facebook , descargar facebook , descargar facebook gratis , baixar whatsapp plus , descargar whatsapp gratis , descargar whatsapp , whatsapp descargar , descargar mobogenie gratis , descargar mobogenie gratis , mobogenie

Nguyễn Hưng January 22, 2016 1:18 am  

You are a very good person, I think. I feel your views very interesting and creative, I have learned a little from it. I will use it in my life. descargar facebook gratis , baixar whatsapp gratis , baixar whatsapp gratis , descargar whatsapp , descargar gratis whatsapp , descargar whatsapp , baixar mobogenie gratis , descargar mobogenie gratis , mobogenie descargar

chenlili April 13, 2016 6:55 pm  

2016-4-14 xiaobao
michael kors handbags
jordan 3
fitflops
coach outlet
michael kors handbags
louis vuitton outlet
christian louboutin shoes
abercrombie & fitch
louis vuitton handbags
jordan 4 toro
jordan concords
nike roshe runs
christian louboutin shoes
nike roshe run
coach outlet
louis vuitton handbags
air jordan pas cher
coach outlet online
louis vuitton outlet
coach outlet
insanity workout
christian louboutin sale
nfl jerseys
polo ralph lauren
ray-ban sunglasses
cheap jordan shoes
nike air huarache
oakley sunglasses
ray ban outlet
kobe 9
ray ban sunglasses
mont blanc pens
michael kors outlet
toms
michael kors
rolex submariner
nike outlet
ralph lauren polo
true religion outlet
louis vuitton outlet online

John May 24, 2016 7:05 am  

louboutin shoes
ray bans
stephen curry shoes
ed hardy outlet
michael kors outlet clearance
louis vuitton outlet online
adidas nmd
oakley sunglasses
ed hardy uk
michael kors uk
michael kors outlet online
chaussure louboutin
rolex watches uk
michael kors outlet online
oakley sunglasses outlet
new balance outlet
hollister uk
ray bans
tiffany jewelry outlet
true religion outlet store
adidas gazelle
adidas supercolor
hollister sale
nike blazer
michael kors handbags outlet
jordans shoes
micahel kors
nike air max
buy red bottoms
tory burch outlet online
dior sunglasses
prada outlet
designer handbags
2016524yuanyuan

chenlina August 05, 2016 7:57 pm  

ray ban sunglasses outlet
tory burch handbags
timberland outlet
coach canada
coach factory outlet
longchamp handbags
nike basketball shoes
louis vuitton outlet
air jordans
rolex watches outlet
adidas nmd
louis vuitton outlet
oakley sunglasses
ray ban sunglasses outlet
lebron 12
kate spade handbags
coach factory outlet
toms shoes
insanity workout
cartier watches
polo ralph lauren
michael kors outlet
beats headphones
louis vuitton outlet
jordan concords
oakley sunglasses
replica watches
coach outlet
michael kors handbags
michael kors outlet
christian louboutin sale
coach outlet store online
tory burch outlet
celine handbags
oakley sunglasses wholesale
michael kors outlet clearance
christian louboutin shoes
beats headphones wireless
true religion
cheap oakley sunglasses
chenlina20160806

xjd7410@gmail.com September 29, 2016 8:51 am  

20160930 junda
louis vuitton handbags
hollister sale
ferragamo shoes
nike tn pas cher
chrome hearts sunglasses
burberry outlet
tory burch outlet
coach outlet online
michael kors outlet
kate spade handbags

raybanoutlet001 October 23, 2016 7:01 pm  

asics shoes
michael kors handbags
michael kors handbags wholesale
michael kors handbags
omega watches for sale
supra shoes sale
kobe 9 elite
nike free 5
armani exchange outlet
kobe 9

hoxn Ln November 09, 2016 12:47 am  

such as an oddly handbag replica shaped fish-themed watch called the Andrew Logan Jellyfish, now sell for in excess of $20,000, not a bad return on Replica watches UK an original $30 investment.Although Swatches proved a fad, it was a lasting one, and their success sustained the Swatch Group’s Rolex Daytona collection of older firms, including Breguet, through the quartz crisis. Replica handbags “I needed to keep my people in jobs at my ninety factories,” Hayek explained later Replica Watches .

Outlet Wade November 14, 2016 9:24 pm  

Although the weather in most regions still implies anything but the spring time, it is the michael kors outlet time of the year to roll out this year’s spring Coach Purses lines left and right. So does Coach with the release coach outlet online of their spring brights. The extensive line of new bags Longchamp Sale comes in an exciting palette of spring shades that’ll complement michael kors outlet online sale a sunny spring day perfectly.Our 3 picks out of the Coach Outlet Store enormous lineup include the super practical Canvas Small Pocket Satchel Michael Kors Outlet in Brass/Acid Green/White for $328 (left), the highly fashionable Hamptons michael kors outlet Weekend Hobo in silver/fuchsia for $178 (middle) and last, but Michael Kors Purses certainly not least, the essential Hamptons Weekend Small Tote in coach handbags silver/pool for $158 (right). The hobo and tote come as michael kors outlet online part of a brand new lineup in Coach Outlet Store Online the Hampton’s Weekend Collection.I highly suggest checking their site for new releases, pretty exciting stuff over there. I own a few Coach purses myself and find now Longchamp Outlet new excuses to restock my collection once more. ;)
Just coach factory outlet last week, it was announced that Kate Moss is working coach outlet stores on a multi-season handbag line for Longchamp. Now, courtesy of

raybanoutlet001 November 25, 2016 9:55 pm  

longchamp bags
yeezy boost 350
tiffany online
oakley sunglasses
ray ban sunglasses outlet
adidas neo shoes
http://www.nikedunks.us.org
kobe basketball shoes
tiffany jewelry
michael kors outlet

姚嘉 November 30, 2016 12:02 am  

gucci sito ufficiale
los angeles clippers
michael kors outlet
nike air huarache
chicago bulls jersey
tiffany and co outlet
ralph lauren outlet online
michael kors handbags
polo ralph lauren outlet
lebron shoes