blogger template design

8/7/2019 Blogger Template Design

1/31

Blogger Template Design

Introduction

This tutorial is a very quick guide to teach you how to change or design your own

Blogger templates. It's easy to understand and follow, especially to those who has noknowledge in HTML programming.

The tutorial is split into a number of sub-tutorial modules that explain specific parts ofBlogger template design in detail. The best way to learn is by going through the modulesequence one by one. But if you are familiar with the basics, you can jump into the moreadvanced modules. The earlier modules are focused on explaining the basic structure ofthe template design and the template code so that you understand more about a Bloggertemplate in general. The later modules explain each section of a Blogger template inmore detail and help you go through the process of coding and designing a template in astep-by-step approach.

In the tutorial, some of the names and terms are based on my own template design, but I'llexplain them as general as possible so you get the bigger picture and can adapt todifferent template designs.

Tutorial Contents

Tutorial 1: The Structure of a Blogger Template Tutorial 2: The Structure of a Blogger Template Code Tutorial 3: The Structure of CSS Styling Section Tutorial 4: Setting the Properties of a Container Tutorial 5: Common Containers and Elements in a Blogger Template Tutorial 6: Using the Generic Blogger Template Tutorial 7: Setting the Template Size Tutorial 8: The Body Section of the Blogger Template Code Tutorial 9: More Explanation about the Body Code Tutorial 10: Making a 3-Column Template and More ... Tutorial 11: Starting Your Own Blogger Template Tutorial 12: How To Embed Images as Background


2/31

Tutorial 1: The Structure of a Blogger Template

Before designing a template, you must have an idea of what the basic structure of atemplate 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 thesesections blocks or containers afterward) that are not visible on the computer screen, butimportant HTML-wise to build a practical and proper working template.

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

Going from the biggest to the smallest blocks:

1. Body: the outer most block is the Body of your template (basically everythingthat the computer screen covers).

2. Outer-wrapper: this container covers your whole template (the body is more likethe outside of your template). In general, you build a wrapper to place a multipleof smaller blocks inside it. The most common blocks inside this Outer-wrapperisthe 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


3/31

container in the Headersection is usually a Header-wrapperthat wraps everythinginside.

4. Content: below the Headeris the Content-wrapper- basically the most importantcontainer block of all. Immediately inside this wrapper are the Sidebarcontainers(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 Headersection,you'll also need a Footer-wrapperto contain other sub-blocks in the Footersection.

6. Main: the Main-wrapperis the outer most container in the Main section whichgoes inside the Content-wrapper. Inside this Main-wrapperare the Post block,Comment block, Date Header, and other widgets created from the Add PageElement 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 willusually 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 seriesthat once you understand the template structure, it's actually easy to add and movethe sidebars to the left or right of yourMain container.

8. Blog Post: this block contains the important stuff - yourPostsTitles, Post, PostAuthor, Labels, etc.

One other way to see this structure is from the hierarchical point of view. Starting fromthe largest container to its sub-containers, the structure looks like this:

Bodyo 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


4/31

Once you understand this basic structure, it'll be easier to start learning about thestructure of the Blogger template code. Learning the code structure is not aboutlearning HTML orCSS, but more about how the template code is organized,which is pretty much like how the container structure is organized. It's surprisingthat even with little knowledge on web programming, you can customize your

template quite a lot just by understanding the basic structure and some CSSlanguage.

Tutorial 2: The Structure of a Blogger Template Code

Here's what the structure of a Blogger template code looks like, in a simple wayof looking at it. I'm using my Generic Blogger template as a reference, but theidea is the same for other templates also. I've separated the code in 3 sections andshow only the top lines of each section so you can look for the starting lines later

on.

To see more of these codes in detail, download my Generic Blogger Template.

Section 1:The 'header' of the code. Basically it contains important information about thetemplate code and the title of your blog. Best of all, you don't have to worry aboutanything in this section. It's a standard header for all templates. The only time you


5/31

add some codes here is when you want to put some meta tags (additionalinformation about your blog for SEO).

Section 2:This is the CSS Styling Section. CSS stands forCascading Style Sheets, a web

language used to control the style of a HTML document. This is the section thatyou want to know the most if you want to modify your existing template or designa new template. Eventhough it is a web programming code, you can still do a lotof things on you template design if you understand the structure of this sectionwithout knowing much about HTML and CSS. We'll get to this part in more detaillater.

Section 3:This is the Body orData of the code - the most important part that fetches all yourcontent from Bloggerdatabase and puts it in the right place into your blog whensomebody is looking at your blog. This is also the section that tells your blog

which part comes first - the Header, Sidebars, Main, Post, Footer, etc. But itdoesn't set the appearance of the blog and how it would look like on the internet(because that part is controlled by the CSS styling section).

You basically don't have to worry much about this part too, just like the 1stSection. But you will have to know a little bit about this section if you want tostart adding extra widgets that cannot be put using the Add Page Element button,like the social bookmarking buttons - Digg, AddThis, RSS buttons; or if you wantto put Adsense codes in special places like in the Post Page; or putting GoogleAnalytics code to track visitors to your blog; and many other things. Most of thetime, there are easy instructions already available to help you add these things inyour blog. So, again, nothing much to worry about in this section.

Tutorial 3: The Structure of CSS Styling Section

In this tutorial, I'll show you the structure ofCSS Styling Section, which is the2nd Section in the Blogger Template Code Structure. Again, not all templateshave the same structure. It basically comes down to the personal style of a

designer. But I've found out the structure that I'll show you is quite logical andmakes things a lot easier when coding, debugging, and customizing your template.Once you've understood this tutorial, you can later change the style and structureany way you want. But first you have to understand them and I've put out here avery easy structure to understand and use.

I've cut down the CSS Styling Section into 9 smaller subsections. For now, I'lldescribe the subsections in general. We'll get to the details on the coding inside


6/31

these subsections later in the following tutorials. Always refer to the Structure of aBlogger Template to help you understand better the subsections and containersthat I explain here.

Subsection 1 - Variable:

This subsection contains the declaration (the introduction) of the font and colorvariables that appear in the Fonts and Colors tab in the Layout page. For example, theText Coloror the Text Font variables that you can choose and modify using the Fontsand Colors tab. In my templates, I've added a lot of variables (close to 40+) comparedto some of the standard Bloggertemplates to make it easy for you to customize a lot

of things on the template.

Subsection 2 - Global:

This part contains the code to control the general appearance and layout. If you lookat the green bar above, you'll see the code "body {.....}". This means that every codethat goes inside the{.....}will control the general properties (size, layout, &appearance) of the body of the template (everything that the computer screen covers).For example, it controls the width of your whole template and the background coloror image. But it doesn't control the detailed properties of the whole template (that isdone by all the othersubsections). Or, if you do set the detailed properties inside thebody container, say the Text Font, and then reset the same properties inside a smaller

sub-container, the properties set in the body containerwill be overridden, or canceled.

Inside this subsection, you will also find other important large containers - the Outer-wrapper and the Content-wrapper - so this subsection is where you want to look forif you want to tweak those containers.

Subsection 3 - Header:This part controls the properties of everything inside yourHeader-wrappercontainer.


7/31

The most common ones are the Blog Title and the Blog Description. In most of mytemplates, I've added an extra object in the Header-wrapper- the Linkbar(or thehorizontal menubar). Typically, you can't add extra object in the Headerbecause youcan't use the Add Page Element tab. To add the Linkbar, I had to change the 3rdSection of the template code structure (which is the Data section). In my own blog

(dzelque.blogspot.com), I added something else, which is the Google Search Bar.Ideally, you can add just about anything you want there, if you know how to deal withthe 3rd Section. We'll get to this later.

Subsection 4 - Main:This part controls the properties (size, layout, and appearance) of everything that theMain-wrapper block contains - the Date Header, the Post, the Comment, the FeedLink, and any widgets that you drag into the Main section using the Add PageElement tab.

Subsection 5 - Sidebar:This part controls the properties of everything inside yourSidebar-wrapper- forexample the Labels, Blog Archive, Adsense units, Link Lists, etc. But, it doesn't sethow many sidebars you have or their locations on the blog (example Sidebar-Main-SidebarorMain-Sidebar-Sidebar). That part is done in the Section 3 of the Blogger

Template Code Structure - the Data Section.

Subsection 6 - Miscellaneous:

This part controls the properties of additional elements in your blog that's notcontrolled by all the above subsections. These elements are the Profile (or the AboutMe block), the Blogquote, and the Code. It means if you want to, say, change thecolor of the quoted text or the font of yournickname in the About Me block, this iswhere you want to look for to tweak it.


8/31

Subsection 7 - Post-Footer:In my Generic Template, this part controls the properties of 3 things:

1. The Post-Footer- the texts below your post body. This is the part that containsinformation about your post, or the texts that say "Posted by YourNickname,Labels: ....., 5 Comments, etc.

2. The Blog-Pager- the links at the bottom of your blog posts that say "Newer Posts,Home, orOlder Posts".

3. The Feed-Link- the link that says "Subscribe to: Posts (Atom)".Subsection 8 - Comment:This part controls all the properties of the Comments section in your blog.

Subsection 9 - Footer:This part controls all the properties in the Footersection. Generally, the Footersection contains some text explaining the ownership or copyright of a blog. In someother blogs, they also put extra stuff in the Footersection, like the Recent Posts orPopular Posts in 2 or more columns. Basically, you can just put about anything in theFooteras in the Sidebar. But if you want to add more than 1 column to your Footer,you have to tweak the 3rd section of yourBlogger Template Code Structure.


9/31

Tutorial 4: Setting the Properties of a Container

In this tutorial, you'll know the basics of what code sets the properties of a container.

To make things simple, we'll look at 2 containerblocks only - Main and Post. Onceyou know these, the basic ideas for all the other containers are pretty much the same.

Here is a sample code for the 2 containers:

#main {

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

min-width: 400px;

max-width: 400px;

background: $mainbgColor;

color: #111111;

font: $textFont;

}

.post {



line-height: 1.5em;

text-align: left;

background: $postbgColor;

}

The #main and .post are the titles of each containers. Each container codes must becontained within {...}. For the explanation below, we'll focus on the codes inside thepost block, especially for the explanation on the margin and padding (the codescolored in red).

Margin - sets the distance between the border of the container to the border of aparent (larger) container outside it. There are 4 numbers defining the Margin


10/31

property. The 1st number sets the top margin, the 2nd sets the right margin, the3rd number sets the bottom margin, and the 4th number sets the left margin. Itbasically sets the whole margin in a clock-wise fashion starting from the top. Inthe case above, the parent container for the post container is the main container.See how the dashed border for the blue (post) container is placed inside the green

(main) container following the post block's margin command (the codes in red). Ifthe post's margins are all set to zero, then the post container would be exactly thesame size as the main container. Think of the Margin as a command that movesits border away from a parent border. Another thing, Margin can have a negativevalue, which means that it moves toward the parent border and may overlap it(not away from it).

Padding - sets the distance between the border of the container to the border of achild (smaller) container inside it. In the case of the post container, the childcontainer is the post-body. The 4 numbers defining the padding sets the paddingin a clock-wise fashion also, just like the Margin property. See how the post'spadding puts the post-body inside the post container, away from the dashed

border. Unlike the Margin, think of the Padding as a command that moves a childborder away from its border. Padding values cannot be negative. Min-width and Max-width - sets the width of the container. Usually, it's enough

to write it as width = 400px (for example), but it's becoming more of my habit toset the width as strict as possible, because I sometimes saw that if it's not writtenstrictly, the container width might shrink and expand freely on some situationsand in some different browsers. So by setting the width strictly, I made sure that itlooks exactly like I want at all times in all browsers (basically getting rid ofalignment bugs). If you look at my newer templates, I even set the widthredundantly, say in Main-wrapperand then in Main containers eventhough theyare pretty much the same. Doing it this way solves some alignment bugs that Isaw (eventhough I don't really understand why it solves it by writing itredundantly).

Background - sets the background color of the container. It uses the hexadecimalcode for colors. See here for all the color values. You can also set a backgroundimage that repeats itself to cover the whole container block. The way to do this isby pointing to the URL of an image. For details on how to do this, see W3Schoolstutorials. You can also set the value to be $samplevariable, where the variable isthe one that you define in Subsection 1 in CSS Styling Structure.

Color - sets the color of your text using the hexadecimal color code, or thevariable defined earlier in Subsection 1.

Font - sets the font of your text. You can use the variables set in Subsection 1 also.See W3Schools tutorials for more details on setting the font properties.

Text-align - sets the alignment of your text. The 3 options are either left, center,or right.

Line-height - sets the distance, or height, between two text lines.My tutorial just gives the basic idea on some of the codes in the Bloggertemplates.I'd say the most important ones for a basic understanding are the margin and padding


11/31

commands. If you want a more detailed explanation on CSS styling language, Irecommend w3Schools CSS Tutorial as a quick and easy resource center.

Tutorial 5: Common Containers and Elements in a Blogger Template

Here's a list of all the common containers and elements in a Bloggertemplate andtheir funtions (elements are basically any object that make a blog funtions andcontainers are large elements that contains smaller elements or some other contents).

These common elements that I'll show are not necessarily the elements that exist ormust exist in all Bloggertemplates, but are just some common elements that controlsa large part of your template style. Knowing these elements will make it a lot easierfor you to know where to look for in the template code and how to deal with othernew elements that you may find in other templates.

I'm not going to list all the elements, but only enough elements so that you get theideas and can understand all the other elements on your own. I will refer to theimages from the CSS Styling Section below to make things easier to follow.

The symbols # and . show the attributes of the element (sort of a classification of theelement type). But you don't have to worry much about this for now. If you want to

know more about this, I suggest the W3Schools tutorials.

Global:

body {.....} - general properties for the whole template. #outer-wrapper {.....} - the starting and largest container for all your template

contents. Inside this is the header-wrapper, content-wrapper, and footer-wrapper. #content-wrapper {.....} - the wrapper that contains sidebars and main containers.


12/31

a {.....} - this sets the overall properties of yourlink text. a:visited {.....} - this sets the overall properties of yourvisited link text. a:hover {.....} - this sets the overall properties of yourlink text when the mouse

hovers over it.

Because all element codes must be contained within the {.....}, I'll just write theelement titles after this.

Header:

#header-wrapper - the container that wraps yourBlog Title and BlogDescription.

#header - the container just inside the header-wrapper. #header h1 - the command inside this containers controls the appearance and

layout of yourBlog Title. #header h1 a - controls the properties of the Blog Title as a link text.

#header .description - the properties of yourBlog Description. #header a img - controls the properties of an image inside yourheadercontainer.

Main:

#main-wrapper - the container that wraps yourDate Header, Blog Posts,Comments, Feed Link, and any widgets that you drag above or below the BlogPosts.

#main - the container just inside the main-wrapper. #main .widget - controls the properties of all widgets inside the main container. h2.date-header - sets the properties of yourDate Header(just above yourPost

Title).


13/31

.post - sets the properties of yourBlog Posts container. .post h3 - sets the properties of yourPost Title. .post-body p - sets the properties of the body or content of yourpost. .post ul - sets the properties of an unordered list (a list that is not numbered). .post ol - controls the properties of an ordered list (a numbered list).

.post li - controls the properties of the individual list inside an unordered list or anordered list. a img - controls the general properties of an image (the a refers to a link; and an

image is by itself a link).

Sidebar:

.sidebar-wrapper - the container that wraps all elements and contents in asidebar.

.sidebar - the container just inside the sidebar-wrapper. #sidebar1 - sets the properties inside sidebar1.

#sidebar2 - sets the properties inside sidebar2. If you want the properties insidesidebar1 and sidebar2 to be the same, than you can just the propertiesinside .sidebarand don't have to even write down the #sidebar1 and #sidebar2 inyourCSS code.

.sidebar .widget - controls the properties of all the widgets (the Added PageElement) in your sidebar.

#sidebar1 .widget - only sets the widgets in sidebar1. .sidebar .BlogArchive - sets the Blog Archive properties. Technically, this is a

sidebar widget too, but I'm not sure why setting the properties for sidebar widgetsdoesn't change any properties for the Blog Archive. That's why I have to writedown the .BlogArchive command to set its properties.

.sidebar h2 - sets the title/header properties of a sidebar widget. .sidebar #BlogArchive1 h2 -sets the properties of the Blog Archive's title.Miscellaneous:

Technically, the Profile (About Me) container is placed inside a sidebar, but I'mputting it in the Miscellaneous section because there are many smaller elements thatbelong together with the Profile container and putting it in the Miscellaneous reducesthe mess.

#Profile1 - sets the properties for the About Me block. #Profile1 h2 - sets the title/header forthe About Me block. .profile-img a img - sets the image in the About Me block. .profile-textblock- sets the author description About Me block. .profile-data - sets the author's data in the About Me block. .profile-datablock- sets the overall blocks of data in the About Me block. blockquote - sets the quoted text in your posts. code - sets the text contained within the code tags in your posts.


14/31

Post-Footer:

.post-footer - sets the overall properties of the post-footercontainer. .post-footer-line - sets the properties for each new lines in the post-footer. .post-footer a - sets the link text properties inside the post-footer. .post-footer .post-comment-link a - sets the "comment" link inside the post-

footer. #blog-pager - controls the properties of the "newer posts", "home", and "older

posts" links. #blog-pager-newer-link- controls the properties of the "newer posts" link. #blog-pager-older-link- controls the properties of the "older posts" link. .feed-links - controls the "Subscribe to: Posts (Atom)" link.

Comment:

#comments - sets the overall comment container's properties. #comments a - sets the link text properties inside a comment container. #comments h4 - sets the header of the comment container. .deleted-comment - sets the properties of the deleted comment. .comment-author - sets the properties of the comment author. .comment-body p - sets the comment body properties. #comments ul - controls the unordered list inside a comment container. #comments li - controls the individual list inside a comment container.

Footer:

#footer-wrapper - the container that wraps all elements and contents inside afooter section.

#footer - the container just inside the footer-wrapper. #footer h2 - sets the properties of the footertitle/header.


15/31

#footer .widget - controls the footerwidget properties. .footer a - controls any footerlink texts.Now that you know these containers and elements, you'll know where to look for inthe template code whenever you want to change something about your template (fonts,

text colors, background colors, padding, etc). What you do then is simply modify thecodes inside the {.....} for that container or element only.

Tutorial 6: Using the Generic Blogger Template

Here I'll explain how you can use the Generic Blogger Template to practice ontweaking the codes and modifying your templates. The ultimate goal is surely for youto know how to design your own template, but knowing how to modify the templatefirst (and to get a feel how the template 'react' to your code modification) is animportant step that you need to go through before starting to design your owntemplate.

Changing your template is not as simple as changing or adding some codes, hittingthe "View Blog" button, and thinking that everything will go as perfect as you plan.Lots of the time you'll see things go off differently from what you've expected.Especially if you're not a web programmer. I'm not one and I did go through a lot ofgoing back and forth between the "Edit HTML" page to the "View Blog" page beforegetting what I really wanted.

So the best thing to do is really to experiment first with the 'behavior' of the templatecodes, see how they make your template change, and finally understand (more orless) why they change the way they change: simply put - be ONE with the code!

To make it easier for you, I've created a Generic Blogger Template that you candownload to play around with. To be honest, it's an ugly template, but the differentcontainer colors will help you see how things actually change. The first thing youneed to do is create a Test Blog using yourBloggeraccount. Then upload the GenericBlogger Template into yourTest Blog. Put a few posts with lots of text, images, andadd some sidebar widgets too so that you can see a more realistic effect.

The next step is just to start playing around. It's best to do things one by one. Say,choose one of the containers, the header-wrappermaybe (look in Tutorial 5), andchange some of the command codes for that container. Then view the new templates

to see if the changes is really what you've expected. As starters, try to play around themost with padding and margin (playing with colors, fonts, or any appearance-settingcommands are not as challenging as playing with layout-setting commands). Don'tplay yet with the template size-setting commands like the width of containers becausethis involves other containers also and can get really messy. We'll do this later. Onceyou're confident with how things behave in one container, move on to othercontainers or do multiple containers in one go.


16/31

Within a short time, you'll be confident enough with this Generic Blogger Templatethat you can start tweaking your own blog template codes. At this point, I won't saythat you'll know everything there is to know about tweaking codes, but you'll knowenough to do considerable makeover on your template and enough to start learningnew things and dealing with new problems on your own. The key point here is your

coding skills will grow in time - May the CODE be with you!

Tutorial 7: Setting the Template Size

Setting the template size is probably one of the first things you need to do whenstarting to design a new template. The are two ways to set the size (basically thewidth) of a template:

1. Setting the size to be fixed with a certain width, say 800 pixels.2. Setting the template to have a fluid size, which means the width changes with thebrowser or screen size.Setting a fixed template size:

To set a template width, you actually have to set the width of a few large containers.The most common containers to set the widths are:

1. Body2. Outer-wrapper3. Header-wrapper4. Content-wrapper5. Footer-wrapper6. Main-wrapper7. Sidebar-wrapper*8. Footer-wrapper*Note: You can also just set the widths ofsidebar1 and sidebar2 containers withoutsetting the sidebar-wrapperwidth. Setting the sidebar-wrapperwidth is convenient ifboth sidebars have equal widths.

In most of my newest templates, I also set the widths in the containers just inside

some of the wrapper containers (which is redundant) to avoid some minor alignmentbugs that may appear. The widths of these containers are set equal to the widths oftheir parent wrapper containers. These containers are:

1. Header2. Main


17/31

Here is a sample code from the Generic Blogger Template showing you all thecontainer widths that are set to make sure the template width is properly set (only thepart that concerns the width-setting are shown). In this sample, the template width isset at 800 pizels.

body {

min-width: 800px; }

#outer-wrapper {

margin: 0 auto; /* to make the template lays in the screen center */

min-width: 800px;

max-width: 800px; }

#content-wrapper {

min-width: 800px;

max-width: 800px; }

#header-wrapper {

min-width: 800px;

max-width: 800px; }

#main-wrapper {

min-width: 400px;

max-width: 400px; }

.sidebar {


min-width: 180px;

max-width: 180px; }


18/31

#sidebar1 {.....}

#sidebar2 {.....}

#footer-wrapper {

min-width: 800px;

max-width: 800px; }

The body is set with a command min-width = 800px, which means that the smallestwidth it should have is 800px. If it's set with a command width = 800px only, then thetemplate width might shrink in some situation. Setting it with a min-width guaranteesthe smallest size it will take.

The next container just inside the body is the outer-wrapper. It's usually common toset it with a command width = 800px only. But as I've explained about my strictnessin setting the width to avoid any alignment bugs, it's becoming my habit to always setthe container to have a min-width and max-width of the same value so that thecontainer size is exactly that size - it will not shrink or widen to any different value.Another thing about the outer-wrapperis that this is where you set the command toeither place your template at the center of screen or float to the left of it. In this case,setting margin: 0 auto will float the template to the center. Just writing margin: 0 willfloat it to the left as a default position.

The next 3 large containers, the header-wrapper, the content-wrapper, and the footer-wrapperis usually set to be the same size; in this case it's 800px. In any case, they canbe set smaller than the outer-wrapperwidth but not any bigger than that because theouter-wrapper'wraps' these 3 containers inside it. Another thing, if you add left andright borders, then you'll increase the width, and the outer-wrapper will just cut outwhatever that's bigger than itself on the right side. So, if you do add borders, say 2pxleft and 2px right for the header-wrapper, then you have to set the header-wrapperwidth to be 796px so that the total would be 796+2+2 = 800px. The same goes for all


19/31

the other containers.

The last 3 containers are the 2 sidebars and the main-wrapper. Because they sit sideby side, you have to make sure the total width = 800px or less, but certainly not more.In this case, I set the main-wrapperto be 400px and both the 2 sidebars to be 200px.

But because I added padding of 10px left and right of each sidebars, which pushes thesidebar border outward, I'd have to reduce the sidebarwidth to be 180px so that thetotal sum after adding the pads would be 200px. You have to note that the largestsidebar containeris the sidebar-wrapper(not just the sidebar). I could have set thewidth of the sidebar-wrapperinstead of the sidebar, but I prefer to set the sidebarwidth because sometimes I may set the 2 sidebars to have different widths. But, this isall just a matter of personal style; other template designers may have different way ofsetting this sidebar widths. As long as it works, that's all that matters.

Setting a fluid template size:

To set a template with width that changes with browser or screen size, please refer toW3Schools Tutorials for more details. In my templates, I haven't made any suchtemplates and so my experience in setting a fluid sized template is not much. Once Ihave more experience in this, I'll post the tutorials on it.

Tutorial 8: The Body Section of the Blogger Template Code

In this tutorial, I'll explain the basic structure of the Body of the code so that you getthe 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 Bloggertemplate code that retrieves the data to be displayed on your blog. It's basically thecore part that makes your whole blog functions. The code that sets how it appears onyour blog is the CSS Styling code.

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


20/31

Shown below is the Body code copied exactly from the Blogger Edit HTML pagewith the 'Expand Widget Button' unchecked. I do not want to include the completecode by checking the 'Expand Widget Button' for 2 reasons. First, it's not necessary todo 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 asoppose 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 templateare laid out.

skip to main |skip to sidebar


21/31

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 corepart 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, followedby the outer-wrappertag, then the wrap2 tag. These wrappers are used to group thecontainers together so that they can be easily editted together. Using wrappers alsomake placing the containers much easier especially if you want to use additionalsidebars or extra containers (such as a banner or linkbar containers as in most of mytemplates). In the explanation below, I'll only refer to the outer-wrapperas the larger


22/31

wrapper without referring at all to the wrap2 wrapper. They're just the same (I'm noteven 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-wrapperbeing at

top and the footer-wrapperbeing at the bottom. It's simply because in the code, theheader-wrapperis called first, followed by the content-wrapper, and finally thefooter-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-wrapperand having to deal with the main-wrapperand sidebar-wrappertogether all atonce. It'll be a big mess then.

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

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

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 looksand where it's located in the blog, you NEED to tweak the CSS codes.

Inside the content-wrapper, you have the main-wrapperand sidebar-wrapper. To havethese two wrappers side-by-side as commonly seen in blogs, you have to set thewidths 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 thatthey'll sit next to each other. Otherwise, they'll just fall vertically on top of oneanother. Typically, you need to use the 'float:left' command for this. See sometemplate 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-wrappercode (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 nowwhy the common structure of the Blogger template code looks the way it is (seebelow for a 3-column example). If you want to rearrange or add new containers orwrappers, what you simply need to do is to modify the Body of the code. It's thateasy! But then, you have to tweak the CSS code to set how it's gonna look in the blog.


23/31

Tutorial 9: More Explanation about the Body Code

In this tutorial I'll explain a bit more about some special commands that you'll see inthe Body section of the code. Here's the sample code again below:

skip to main |

skip to sidebar


24/31

By default, each container has to be wrapped with the div tag and a b:section tag.Each div and b:section is 'named' with an identifier using the id command. The can befurther classified into a 'class' using theclass command. This identification andclassification are useful as a reference when you want to style it later using CSS. Inthe CSS code, the id command is referred to using the # symbol and the classcommand is referred to using the . symbol. For example, in the CSS code, you mightsee #main-wrapper {...} or.sidebar {...} which are the codes to style the main-

wrapperand sidebar. You can read further about these identification and classificationin w3schools.com

Everything wrapped inside the b:section are the widgets (also called the PageElement). For example, inside the Headeris a widget named Header1. Note that this

widget contains the code maxwidgets='1' showaddelement='no'. The

maxwidgets='1' means that the maximum widget the header-wrappercan have is 1only. That means you can't drag a Page Element and place it below or above the

Header. The showaddelement='no' means that the Add a Page Element button willnot appear in the Headersection.

In the main-wrapper, you only have the showaddelement='no' code which meansthat you won't have the Add a Page Element button there, but you can still drag otherwidgets and place it above or below the Blog Posts inside the main-wrapper.

In the sidebar-wrapper, you have the preferred='yes' code. This command willcreate the Add a Page Element button for you to add widgets. Plus, you won't haveany limitations on how many widgets you want to add. As you already know, you canalways drag the widget to any other wrapper as long as they don't limit the amount of


25/31

widgets to be displayed in that wrapper.

In the footer-wrapper, there's no code following the id command. This means that youwon't have the Add a Page Element button but you can drag any widgets into theFootersection.

Tutorial 10: Making a 3-Column Template and More ...

One of the most basic desires after becoming a Blogger's blogger and using thestandard template for a while is having the urge to find a 3-column template. So,here's a simple and straight-forward tutorial on how to do this yourself without goingthrough too much of code tweaking.

This tutorial is prepared assuming you understand the stuff covered in Tutorial 8 andTutorial 9, which explain the basics of the Body section of the code.

What we'll be doing to change or add sidebars is simply tweaking the XML codedirectly from the Blogger Edit HTML page WITHOUT turning the Expand WidgetTemplates on. This means that the Body section at the end of the code won't beshown cluttered with detailed algorithms for widgets and post data. It'll be as simpleas it can be, which is definitely a good thing :).

Adding a Sidebar to Make a 3-column Template:

When you scroll down to the Body section, the code might have something that looksclose to this example below (note that you can have slightly different variations ofthis code for different templates):

Example of a 2-column template:


26/31

The above shows a 2-column-template code within a wrapper called the content-wrapper which contains the main-wrapper(which contains the Blog Posts) and thesidebar-wrapper.

To make another sidebar, what you need to do is simply go to the Edit HTML pageand without turning on the Expand Widget Templates box, paste another block ofsidebar-wrappercode (shown above in red) before or after the main-wrapperblock.For example, to make the Sidebar-Main-Sidebarcolumn, place it before the main-wrapper. Notice in the example below that the id of the 1st sidebar-wrapperissidebar1 and the id of the 2nd one is sidebar2.

Note: You also have to make sure that the width of both Sidebars and the Mainblocks will fit inside the content-wrapper and that the CSS code is properly writtenfor the Sidebars to lay next to each other. Some common mistakes are that one orboth Sidebars will fall below the Main block.

Example of a 3-column S-M-S template:

Changing the Sidebar Location:


27/31

If you want to change a sidebar location to make a 3-column template with aconfiguration ofMain-Sidebar-Sidebarfor example, what you need to do is place thesidebar-wrapperblock where you want it to appear.

To do this, simply go to the Edit HTML page and without turning on the Expand

Widget Templates box, cut the 1st sidebar-wrappercode and paste it in between themain-wrapperand sidebar2 blocks. See the sample code below:

Example of a 3-column M-S-S template:

Now you basically know how to add or change sidebar locations. They're that simple!


28/31

Tutorial 11: Starting Your Own Blogger Template

Now that you've gone through all the tutorials, you're pretty much ready to startdesigning your own template. In this guide, I'll show you the big steps that you haveto go through to make a template the fast and easy way.

The first thing you need to understand about designing a template is that thetechnique of designing is unique and different between individuals. In the end, it'sentirely up to you how you want to do it - if and only ifyou're familiar and have madea few templates yourself. But if you're just beginning, it's best to follow a step-by-stepguide to expedite the process and so that you won't get lost.

Step 1 - Choose an already-made template as a starting point:

For beginners, the easiest and fastest way to start designing is by starting from an

existing template. But don't do it with the intention of plagiarizing it! Read more inthe sub-post Start Designing from an Existing Template.

Step 2 - Setting the number and location of your sidebar columns:

If you're a beginner, make sure you start with a template that closely resembles thetemplate that you have in mind. For example, if you want to do a 3-column template,don't start with an existing 2-column template. Or, if you want to change or add moresidebars yourself, read more about how to do it in Tutorial 10: Making a 3-ColumnTemplate and More ...

Step 3 - Setting the width of your template:

The first thing you need to do after getting a starting template is to set the width ofyour template. To do this, you need to set the width in the CSS Style code. It's allexplained in detail in Tutorial 7: Setting the Template Size. The common containersto set the widths are:

body outer-wrapper content-wrapper header-wrapper

main-wrapper sidebar-wrapper (or sidebar1, sidebar2, and so on) footer-wrapperYou can either set the width to be fluid (changes its width accordingly with thebrowser or screen size) or set the width to be fixed. Note that setting the width insidethe container-wrapper can be a bit tricky because you have the Main and Sidebarcontainers in it. If the width is not set well, the Sidebars can fall below the Main


29/31

container.

Step 4 - Build test objects:

If you're designing a new template, how do you know that what you're tweaking is

right if you can't see the changes? So, what you need to do here is build some testobjects - for example post 3 or more test posts that have a quote, a numbered list, un-numbered list, make lots of widgets to see how the sidebars look like, make sure youhave some Labels to show up in yourLabels widget, make some test comments to seehow they look, and so on.

Step 5 - Tweaking the CSS code to customize your blog's appearance:

Here is where you start tweaking the CSS code to customize the basic layout of yourblog and slowly refining it until you have the template that you want. It's a processthat keeps you going back and forth re-tweaking codes because you won't usually get

things perfect the first time. Read more detail in the sub-post Tweaking the CSS Code.

Step 6 - Testing in other browsers:

This step can get really annoying, but like they say, you've got to do what you've gotto do. Read more in the sub-post Testing and Viewing in Other Browsers.

Step 7 - Using images as background:

If you're bored of using plain color, you can use nicer images as the background ofthe whole blog or the background of some of the containers (e.g. the Post, Sidebar,Footer, Header, etc). To learn how to do this, click on Tutorial 12: How to EmbedImages as Background.

Step 8 (The Final Step) - Finalizing your template:

This step is like the proof-reading stage of your writing. You just need to go throughone last step to double check that everything works fine and okay. Look at your blogcarefully and see if some minor tweaking will make it look better.


30/31

Tutorial 12: How To Embed Images as Background

If you look at these templates - Lasik, JournallRed, and Minimalizt - you'd notice thatthe background is not of a plain color, but made from a repeating pattern of an image.This image is called a background image. It can be a single large image that fills up

the screen or a small image (say 50 x 50 pixels) that repeats horizontally and/orvertically. The neat thing about using, or embedding, a background image is that youcan create any image you like and use it in your blog to make it unique and differentfrom other blogs.

A background image can be placed in any container - either inside the Body container(which fills up the entire screen), inside the Post, Sidebar, Comment, or even on aheader container (say, a Comment Header). For example, if you look at theMinimalizt template, you'll see that the Comment Headerbelow the post is a roundedgreen button - which is an image embedded inside the Comment Header.

You can also use an image to create a shadowy-looking side frame (now quitecommon in blogs). See the Hazy template to see how it looks. To do this, you create ashort background image with a long span that fills the whole width of the template. Atthe right and left edge of the background image, you create the shadowy pattern (orany other pattern that you want to be the frame), and embed this inside the outer-wrappercontainer, repeating it vertically.

But, how to embed and how to repeat the image vertically, horizontally, or both indirections?

To Embed Background Image:

Say that you want to use a 100 x 100 pixels image as the background image inside theSidebar1 container. What you need to do is find the sidebar1 {...} container in CSSStyling and add the following code in red (the other codes are just sample codes):

#sidebar1 {


padding: 0 0 0 0;

width: 150px;

background: URL(http://the-url-of-your-image) repeat left top;

text-align: left;

}

The "background:..." code will embed whatever image at whateverURL you put andrepeat the pattern both vertically and horizontally. The location of the starting imagewill be on the left-most side, and at the top-most position. The general command forembedding a background image is:

background: URL(http://...) repeat-command x-position y-position;


31/31

All Repeat Command:

no-repeat (the image won't be repeated at all) repeat (repeat horizontally and vertically)

repeat-x (only repeats horizontally) repeat-y (only repeats vertically)All Horizontal (x) Position Command:

left (puts the starting image on the left-most side) center(puts the starting image at the center) right (puts the starting image on the right-most side)All Vertical (y) Position Command:

top (puts the starting image on the top-most position)

center(puts the starting image at the center) bottom (puts the starting image on the bottom-most position)

blogger template design

Documents