The structure of a Blogger template

>> Browse templatesMoney tips43 comments

Blogger Template Design: Tutorial 1

Before designing a template, you must have an idea of what the basic structure of a template is. Generally, the actual structure of any templates are not exactly the same. But, by knowing the basic structure, you can easily get the ideas of how to tweak your existing templates, design a template, and how to change it into a different structure.

Some parts of the template structure are obvious from what you can see on most blogs: the headers, footers, and posts sections. But there are some sections (I'll call these sections blocks or containers afterward) that are not visible on the computer screen, but important HTML-wise to build a practical and proper working template.

To start off, a template structure basically contains blocks of containers that looks like this:


Going from the biggest to the smallest blocks:
  1. Body: the outer most block is the Body of your template (basically everything that the computer screen covers).
  2. Outer-wrapper: this container covers your whole template (the body is more like the outside of your template). In general, you build a wrapper to place a multiple of smaller blocks inside it. The most common blocks inside this Outer-wrapper is the Header, Content, and Footer.
  3. Header: this block is the top most part of your blog (the name is quite obvious). But inside the Header you will have other sub-blocks too - the Header Title block, the Header Description block, and others such as the Adsense banners, a menu bar, etc. So, to wrap all these sub-blocks inside one large container, the largest container in the Header section is usually a Header-wrapper that wraps everything inside.
  4. Content: below the Header is the Content-wrapper - basically the most important container block of all. Immediately inside this wrapper are the Sidebar containers (1,2 or any number of sidebars) and the Main container (which contains your posts, comments, or some ads).
  5. Footer: is the bottom most container of your template. As in the Header section, you'll also need a Footer-wrapper to contain other sub-blocks in the Footer section.
  6. Main: the Main-wrapper is the outer most container in the Main section which goes inside the Content-wrapper. Inside this Main-wrapper are the Post block, Comment block, Date Header, and other widgets created from the Add Page Element option.
  7. Sidebar: is the block that contains all your side widgets - About Me, Labels, Archive, Text, HTML, Adsense, etc. In a standard Blogger template, you will usually find only 1 sidebar - hence the 2-column template (Main and Sidebar). But it's actually easy to add multiple number of sidebars. The most common ones are 2 sidebars - or the 3-column template. You will see from these tutorial series that once you understand the template structure, it's actually easy to add and move the sidebars to the left or right of your Main container.
  8. Blog Post: this block contains the important stuff - your Posts Titles, Post, Post Author, Labels, etc.
One other way to see this structure is from the hierarchical point of view. Starting from the largest container to its sub-containers, the structure looks like this:

  • Body
    • Outer-wrapper
      • Header-wrapper
        • Blog Title
        • Blog Description
        • Other widgets
      • Content-wrapper
        • Sidebar-wrapper (1,2,3...)
        • Main-wrapper
          • Date Header
          • Posts
            • Post Title
            • Post Content (or called Post Body)
            • Post Footer (Author, Labels, etc)
          • Comments
          • Feed Link
          • Other widgets (mostly ad units)
      • Footer-wrapper
        • Footer text (disclaimer, copyrights, etc)
        • Other widgets
Once you understand this basic structure, it'll be easier to start learning about the structure of the Blogger template code. Learning the code structure is not about learning HTML or CSS, but more about how the template code is organized, which is pretty much like how the container structure is organized. It's surprising that even with little knowledge on web programming, you can customize your template quite a lot just by understanding the basic structure and some CSS language.

***************************************
Next Tutorial:
The next step in this tutorial is to understand more about the Structure of a Blogger Template Code.

43 comments:

Anonymous June 18, 2007 7:06 pm  

Cannot customised it, changed background color, but nothing happened

Elque June 19, 2007 1:52 pm  

Thanks,

About customizing, I've a lot of variables so that you can use it in the Fonts and Colors tab. But each template has different customization options. It may be that in the template that you're using, I did not make background colors as an option to change (maybe because I use a specific image as background). If that's the case, I forgot to delete the background color option in the Fonts and Colors tab, which I should have done. Anyway, which template are you refering to? I can see what the actual problem is and see what I can do to help.

Another thing, if you really want to change the background color, you can tweak the template following the tutorials 3 and 4.

arvind June 26, 2007 12:38 am  

like your blog
cheers!!!

solusisehat June 30, 2007 8:16 pm  

How use "Irvan View" for example templates (jpg format)?

Elque July 04, 2007 2:09 am  

Hi, I'm not sure what you're asking about the Irfan View.

Balázs November 16, 2007 12:12 pm  

Thanks, it's very useful!

Litchi September 25, 2008 9:41 pm  

I've been looking everywhere for a tut like this.... looking forward to sinking my teeth into it. :D
Thanks!

Kimberly February 15, 2009 9:28 pm  

salaams,

thank you soo much for this tutorial. I studied web development in college, but blogger is too complicated...I attempted doing my own template recently, but it looks kinda bad in some browsers and also its not exactly the way I want it. I have been dreaming of a tutorial like this for a very long time. I havent even read it yet, but just seeing that color-coded pic of the layout clarified a lot, mashallah. I should be able to trully design good templates soon, inshallah.

btw- your templates are the best I have seen for blogger. Honestly. They are soo highly customisable.

jazak allahu khair,
Amatullah

John February 25, 2009 4:07 am  

ITemplatez.com offers professional web templates,css templates,professional templates,psd templates, flash templates ,swish templates, dreamweaver templates, and other web design products available for immediate download.

BestofBlogger June 19, 2009 7:27 pm  

i translate this tutoral to turkish. do you approve??
an also i create my own blogger blogspot template

http://wetemplate.blogspot.com/

Alex Xavier June 24, 2009 6:38 am  

Hi,

Great blog. Could you consider making videos of these tutorials and uploading them to youtube? It will be great for us to learn faster and you will get much greater number of clicks to your site as well.

All the best.

Meaning of friends August 31, 2009 7:46 am  

I always wanted to such lessons you are giving for a long time for my blogger blog, Really thankful to you a lot

deadlyviper January 12, 2010 5:00 pm  
This comment has been removed by the author.
bloggerzbible January 12, 2010 5:04 pm  

very nice tutorial

Ricardo Vieira February 12, 2010 9:19 am  

Amazing tutorial, I couldn't find anything like this anywhere else.

inviter_manual March 27, 2010 10:27 pm  

great !
Templates

Bob Merc October 30, 2010 12:59 pm  

I'm using your Professional Template II and I want to tweak the body backround..what part of the coding do I do it in?

Mazhar Hussain January 15, 2011 7:37 pm  

useful information thanks

joan April 11, 2012 10:27 am  

Thanks a lot for this tutorial. I'm a newbie in Blogger and I find this article of yours very helpful. Thanks!

Ismiaprial April 14, 2012 4:44 pm  

I like it very much...

Brown Jason June 14, 2013 3:19 am  

The way you write make it truly effortless to read. And the theme you use, wow. Thats a really decent combination. And I am wondering what is the name of the template you use? I wantto follow up and let you know how great I treasured discovering your web blog today. I will consider it a real honor to operate at my workplace and be able to use the tips provided on your web page and also take part in visitors’ opinions like this. Should a position of guest article author become offered at your end, remember to let me know.Monitor children

ray.wengg September 20, 2013 9:44 am  

interesting topic, i like it. thank you
learn more about video converting skills at http://www.ivideotool.com/

Mas Ugie September 27, 2013 11:56 pm  

Very interesting theme will bookmark your site to check if you create more about in the future. I have just bookmarked this site for future reference.
ituPoker.Com Agen Poker Online Indonesia Terpercaya | Jalan Tikus.com Download Game PC dan Android Gratis Terbaru dengan Server Lokal | Bisnis Indonesia | ituPoker.Com Agen Poker Online Indonesia Terpercaya | Jalan Tikus.com Download Game PC dan Android Gratis Terbaru dengan Server Lokal | Bisnis Indonesia || ituPoker.Com Agen Poker Online Indonesia Terpercaya | Jalan Tikus.com Download Game PC dan Android Gratis Terbaru dengan Server Lokal | Bisnis Indonesia | ituPoker.Com Agen Poker Online Indonesia Terpercaya | Jalan Tikus.com Download Game PC dan Android Gratis Terbaru dengan Server Lokal | Bisnis Indonesia

Hafiz Tri Handoko December 03, 2014 3:06 pm  

great structure of blogger...
ponsel windows phone terbaik
daftar harga hp terbaru
hp samsung terbaru
hp android terbaik
hp nokia murah terbaru
hp nokia terbaru

Ilyas ARIBA January 31, 2015 3:33 pm  

Thanks,
تدوين باحتراف

Hafiz Tri Handoko February 22, 2015 9:59 pm  

hp kamera terbaik
smartphone dengan kamera depan terbaik

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

mmjiaxin November 20, 2015 6:05 pm  

converse shoes
swarovski crystal
cheap nfl jersey
true religion canada
coach handbags outlet
michael kors handbags clearance
moncler outlet store
abercrombie and fitch
cleveland cavaliers
ugg boots clearance,ugg australia,uggs on sale,ugg slippers,uggs boots,uggs outlet,ugg boots,ugg,uggs
karen millen uk
michael kors outlet online
abercrombie and fitch
ralph lauren outlet
true religion jeans outlet
michael kors outlet
lululemon pants
vans shoes
beats by dre
philadelphia eagles
mm1121

柯云 December 09, 2015 9:05 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

Libin Huang March 21, 2016 1:19 am  

20160321libinprada outlet
reebok trainers
christian louboutin uk
cheap nhl jerseys
nhl jerseys
rolex uk
tiffany outlet
timberland boots
kobe bryants shoes
michael kors handbags clearance
michael kors outlet
michael kors handbags
iphone cases
soccer jerseys
soccer jerseys wholesale
michael kors handbags
calvin klein outlet
louis vuitton bags cheap
nike air max 90
michael kors outlet online
louis vuitton handbags outlet
fitflop sale
christian louboutin outlet
michael kors handbags clearance
adidas wings shoes
michael kors handbags
longchamp solde
ray ban sunglasses
beats headphones
louis vuitton handbags outlet
cheap jordan shoes
cheap football shirts
asics
michael kors canada
louis vuitton outlet

chenlili April 13, 2016 6:58 pm  

2016-4-14 xiaobao
gucci outlet
louis vuitton handbags
ralph lauren polo outlet
kobe bryant shoes
ray ban sunglasses
instyler curling iron
michael kors outlet clearance
louboutin pas cher
cheap oakley sunglasses
coach factorty outlet
timberland boots
tiffany outlet
michael kors online
polo ralph lauren
michael kors
kobe 11
kevin durant shoes 8
true religion outlet
nike air max
kobe shoes 11
ray ban wayfarer
nike trainers
michael kors outlet clearance
tods shoes
ray bans
michael kors outlet
louis vuitton outlet
jordans
rolex watches outlet
air jordans
kate spade handbags
hollister clothing
ray ban sunglasses discount
gucci outlet
burberry outlet
michael kors bags
true religion
air jordans
ray ban sunglasses
michael kors handbags

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

huangqing May 29, 2016 11:10 pm  

fitflops sale
michael kors handbags
gucci sunglasses
tiffany and co
cheap snapbacks
michael kors outlet online
hermes belt
fitflops uk
true religion outlet
rolex outlet
ralph lauren uk
kate spade outlet
rolex watches for sale
ferragamo shoes
kate spade uk
gucci sunglasses uk
ray-ban sunglasses
true religion outlet
cazal outlet
adidas trainers
coach outlet store
longchamp outlet
michael kors outlet
louis vuitton neverfull sale
michael kors handbags wholesale
hollister clothing store
ray-ban sunglasses
tory burch outlet
burberry outlet sale
nike air huarache
oakley sunglasses
michael kors uk
tiffany and co
bottega veneta outlet
ralph lauren outlet
16.5.30qqqqqing

Gege Dai August 02, 2016 1:50 am  

jianbin0802
air jordan 13
michael kors outlet
nike mercurial
timberland boots
oakley sunglasses
louis vuitton outlet online
chrome hearts sunglasses
tods shoes
herve leger outlet
coach outlet
polo pas cher
celine outlet
lululemon outlet
ugg boots uk
air max 90
longchamp pliage
nike tn pas cher
rolex watches
basketball shoes
tods shoes sale
longchamp
michael kors outlet store
swarovski outlet
louis vuitton neverfull sale
cheap jordan shoes
michael kors bags
ray-ban sunglasses
uggs outlet
canada goose jackets
coach outlet
ugg boots
uggs outlet
michael kors outlet clearance
tiffany and co
polo ralph lauren
polo ralph lauren
true religion jeans outlet
ed hardy clothing

chenlina August 05, 2016 8:00 pm  

coach outlet store online
coach outlet store online
ralph lauren uk
michael kors handbags
louis vuitton outlet online
replica watches
true religion jeans
toms shoes
christian louboutin chaussures
rolex watches
coach outlet
louis vuitton outlet
michael kors outlet
retro jordans
coach factory outlet
michael kors handbags
louis vuitton
mont blanc pens for sale
louis vuitton handbags
ray ban sunglasses
adidas outlet
louis vuitton handbags
gucci outlet
christian louboutin outlet
true religion jeans
louis vuitton outlet
longchamp bags
michael kors
replica watches
jordan 4
louis vuitton handbags
jordan 3
polo ralph lauren
coach factory outlet
nike air max 90
mont blanc pens
ray bans
louis vuitton handbags
ralph lauren
oakley sunglasses
chenlina20160806

Howtocraft September 21, 2016 2:43 am  

Friv5 online

andre leo October 17, 2016 11:23 am  

hammer of thor

raybanoutlet001 October 23, 2016 7:20 pm  

hugo boss outlet
fitflops shoes
michael kors outlet
adidas nmd
cheap nfl jerseys
cheap michael kors handbags
nike blazer
michael kors outlet
nike trainers
ralph lauren outlet

hoxn Ln November 09, 2016 12:40 am  

To me, the real story at Rolex Daytona Lange this year was its entirely new calibre inside the Lange 1, one of its entry-level models. Cartier, meanwhile, produced an in-house movement handbag replica that will eventually sell in watches priced at less than £4,000, and yet this was hardly mentioned in Replica Watches the press releases. And Audemars Piguet had some unbelievably Replica handbags creative new titanium Royal Oaks that were not mentioned at all to most journalists Replica watches UK .

Howtocraft November 24, 2016 1:06 am  

jogos friv free

raybanoutlet001 November 25, 2016 10:14 pm  

adidas tubular
http://www.raybanglasses.in.net
kobe sneakers
cheap nfl jerseys
adidas nmd
oakley sunglasses
kobe basketball shoes
nike huarache
ray ban sunglasses outlet
adidas ultra boost

raybanoutlet001 November 25, 2016 10:14 pm  

adidas tubular
http://www.raybanglasses.in.net
kobe sneakers
cheap nfl jerseys
adidas nmd
oakley sunglasses
kobe basketball shoes
nike huarache
ray ban sunglasses outlet
adidas ultra boost

姚嘉 November 30, 2016 12:19 am  

abercrombie and fitch
ed hardy clothing
air force 1 shoes
san antonio spurs
michael kors handbags
oklahoma city thunder jerseys
dolphins jerseys
jacksonville jaguars jersey
cheap jordan shoes
true religion jeans