The structure of a Blogger template code

Blogger Template Design: Tutorial 2

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

Section 1:
The 'header' of the code. Basically it contains important information about the template code and the title of your blog. Best of all, you don't have to worry about anything in this section. It's a standard header for all templates. The only time you add some codes here is when you want to put some meta tags (additional information about your blog for SEO).

Section 2:
This is the CSS Styling Section. CSS stands for Cascading Style Sheets, a web language used to control the style of a HTML document. This is the section that you want to know the most if you want to modify your existing template or design a new template. Eventhough it is a web programming code, you can still do a lot of things on you template design if you understand the structure of this section without knowing much about HTML and CSS. We'll get to this part in more detail later.

Section 3:
This is the Body or Data of the code - the most important part that fetches all your content from Blogger database and puts it in the right place into your blog when somebody 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 it doesn'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 the1st Section. But you will have to know a little bit about this section if you want to start adding extra widgets that cannot be put using theAdd Page Element button, like the social bookmarking buttons - Digg,AddThis, RSS buttons; or if you want to put Adsense codes in special places like in the Post Page; or putting Google Analytics code to track visitors to your blog; and many other things. Most of the time, there are easy instructions already available to help you add these things in your blog. So, again, nothing much to worry about in this section.

Blogger Template Design: Tutorial 12

If you look at these templates - Lasik, JournallRed, and Minimalizt - you'd notice that the 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/or vertically. The neat thing about using, or embedding, a background image is that you can create any image you like and use it in your blog to make it unique and different from 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 a header container (say, a Comment Header). For example, if you look at the Minimalizt template, you'll see that the Comment Header below the post is a rounded green button - which is an image embedded inside the Comment Header.

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

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


To Embed Background Image:

Say that you want to use a 100 x 100 pixels image as the background image inside the Sidebar1 container. What you need to do is find the sidebar1 {...}container in CSS Styling and add the following code in red (the other codes are just sample codes):
#sidebar1 {
margin: 0px 10px 15px 10px;
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 whatever URL you put and repeat the pattern both vertically and horizontally. The location of the starting image will be on the left-most side, and at the top-most position. The general command for embedding a background image is:
background: URL(http://...) repeat-command x-position y-position;


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: Tutorial 11

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

The first thing you need to understand about designing a template is that the technique of designing is unique and different between individuals. In the end, it's entirely up to you how you want to do it - if and only if you're familiar and have made a few templates yourself. But if you're just beginning, it's best to follow a step-by-step guide 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 in the 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 the template 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 more sidebars yourself, read more about how to do it in Tutorial 10: Making a 3-Column Template 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 of your template. To do this, you need to set the width in the CSS Style code. It's all explained in detail in Tutorial 7: Setting the Template Size. The common containers to set the widths are:

• body
• outer-wrapper
• content-wrapper
• header-wrapper
• main-wrapper
• sidebar-wrapper (or sidebar1, sidebar2, and so on)
• footer-wrapper

You can either set the width to be fluid (changes its width accordingly with the browser or screen size) or set the width to be fixed. Note that setting the width inside the container-wrapper can be a bit tricky because you have theMain and Sidebar containers in it. If the width is not set well, the Sidebarscan fall below the Main 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 test objects - 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 you have some Labels to show up in yourLabels widget, make some test comments to see how 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 your blog and slowly refining it until you have the template that you want. It's a process that 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 got to 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 of the 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 Embed Images 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 through one last step to double check that everything works fine and okay. Look at your blog carefully and see if some minor tweaking will make it look better.

Making a 3-Column Template and More ...

One of the most basic desires after becoming a Blogger's blogger and using the standard 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 going through too much of code tweaking.

This tutorial is prepared assuming you understand the stuff covered in Tutorial 8 and Tutorial 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 code directly from the Blogger Edit HTML page WITHOUT turning theExpand Widget Templates on. This means that the Body section at the end of the code won't be shown cluttered with detailed algorithms for widgets and post data. It'll be as simple as 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 looks close to this example below (note that you can have slightly different variations of this code for different templates):

Example of a 2-column template:
<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 class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->

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 the sidebar-wrapper.

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

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

Example of a 3-column S-M-S template:
<div id='content-wrapper'>

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

<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 class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->

Changing the Sidebar Location:
If you want to change a sidebar location to make a 3-column template with a configuration of Main-Sidebar-Sidebar for example, what you need to do is place the sidebar-wrapper block where you want it to appear.

To do this, simply go to the Edit HTML page and without turning on theExpand Widget Templates box, cut the 1st sidebar-wrapper code and paste it in between the main-wrapper and sidebar2 blocks. See the sample code below:

Example of a 3-column M-S-S template:
<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 class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>
</div>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->

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

Blogger Template Design: Tutorial 7

Setting the template size is probably one of the first things you need to do when starting to design a new template. The are two ways to set the size (basically the width) 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 the browser 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. Body
2. Outer-wrapper
3. Header-wrapper
4. Content-wrapper
5. Footer-wrapper
6. Main-wrapper
7. Sidebar-wrapper*
8. Footer-wrapper

*Note: You can also just set the widths of sidebar1 and sidebar2 containers without setting the sidebar-wrapper width. Setting the sidebar-wrapper width is convenient if both 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 alignment bugs that may appear. The widths of these containers are set equal to the widths of their parent wrapper containers. These containers are:

1. Header
2. Main

 
Here is a sample code from the Generic Blogger Template showing you all the container widths that are set to make sure the template width is properly set (only the part that concerns the width-setting are shown). In this sample, the template width is set 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 {
padding: 10px 10px 10px 10px;
min-width: 180px;
max-width: 180px; }
#sidebar1 {.....}
#sidebar2 {.....}

#footer-wrapper {
min-width: 800px;
max-width: 800px; }

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

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

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

The last 3 containers are the 2 sidebars and the main-wrapper. Because they sit side by side, you have to make sure the total width = 800px or less, but certainly not more. In this case, I set the main-wrapper to 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 the sidebar border outward, I'd have to reduce the sidebar width to be 180px so that the total sum after adding the pads would be 200px. You have to note that the largest sidebar container is the sidebar-wrapper (not just the sidebar). I could have set the width of thesidebar-wrapper instead of the sidebar, but I prefer to set the sidebar width because sometimes I may set the 2 sidebars to have different widths. But, this is all just a matter of personal style; other template designers may have different way of setting 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 to W3Schools Tutorials for more details. In my templates, I haven't made any such templates and so my experience in setting a fluid sized template is not much. Once I have more experience in this, I'll post the tutorials on it

Using the Generic Blogger Template

Blogger Template Design: Tutorial 6

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

Changing your template is not as simple as changing or adding some codes, hitting the "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 of going back and forth between the "Edit HTML" page to the "View Blog" page before getting what I really wanted.

So the best thing to do is really to experiment first with the 'behavior' of the template codes, see how they make your template change, and finally understand (more or less) 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 can download to play around with. To be honest, it's an ugly template, but the different container colors will help you see how things actually change. The first thing you need to do is create a Test Blog using your Bloggeraccount. Then upload the Generic Blogger Template into your Test Blog. Put a few posts with lots of text, images, and add 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-wrapper maybe (look inTutorial 5), and change 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 the most with padding and margin (playing with colors, fonts, or any appearance-setting commands are not as challenging as playing with layout-setting commands). Don't play yet with the template size-setting commands like the width of containers because this involves other containers also and can get really messy. We'll do this later. Once you're confident with how things behave in one container, move on to other containers or do multiple containers in one go.

Within a short time, you'll be confident enough with this Generic Blogger Template that you can start tweaking your own blog template codes. At this point, I won't say that you'll know everything there is to know about tweaking codes, but you'll know enough to do considerable makeover on your template and enough to start learning new 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!

Common Containers and Elements in a Blogger Template

 Blogger Template Design: Tutorial 5

Here's a list of all the common containers and elements in a Bloggertemplate and their funtions (elements are basically any object that make a blog funtions and containers 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 or must exist in all Blogger templates, but are just some common elements that controls a large part of your template style. Knowing these elements will make it a lot easier for you to know where to look for in the template code and how to deal with other new 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 the ideas and can understand all the other elements on your own. I will refer to the images 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 the element 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 andmain containers.
• a {.....} - this sets the overall properties of your link text.
• a:visited {.....} - this sets the overall properties of your visited link text.
• a:hover {.....} - this sets the overall properties of your link text when the mouse hovers over it.

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

Header:

• #header-wrapper - the container that wraps your Blog Title and Blog Description.
• #header - the container just inside the header-wrapper.
• #header h1 - the command inside this containers controls the appearance and layout of your Blog Title.
• #header h1 a - controls the properties of the Blog Title as a link text.
• #header .description - the properties of your Blog Description.
• #header a img - controls the properties of an image inside yourheader container.

Main:

• #main-wrapper - the container that wraps your Date Header, Blog Posts, Comments, Feed Link, and any widgets that you drag above or below the Blog Posts.
• #main - the container just inside the main-wrapper.
• #main .widget - controls the properties of all widgets inside the maincontainer.
• h2.date-header - sets the properties of your Date Header (just above your Post Title).
• .post - sets the properties of your Blog Posts container.
• .post h3 - sets the properties of your Post Title.
• .post-body p - sets the properties of the body or content of your post.
• .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 anunordered list or an ordered 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 a sidebar.
• .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 inside sidebar1 and sidebar2 to be the same, than you can just the properties inside .sidebar and don't have to even write down the #sidebar1 and #sidebar2 in your CSS code.
• .sidebar .widget - controls the properties of all the widgets (theAdded Page Element) 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 widgets doesn't change any properties for the Blog Archive. That's why I have to write down the .BlogArchivecommand 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'm putting it in the Miscellaneous section because there are many smaller elements that belong together with the Profile container and putting it in theMiscellaneous reduces the mess.

• #Profile1 - sets the properties for the About Me block.
• #Profile1 h2 - sets the title/header for the 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 Meblock.
• blockquote - sets the quoted text in your posts.
• code - sets the text contained within the code tags in your posts.

Post-Footer:

• .post-footer - sets the overall properties of the post-footer container.
• .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 commentcontainer.
• #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 commentcontainer.
• #comments li - controls the individual list inside a comment container.

Footer:

• #footer-wrapper - the container that wraps all elements and contents inside a footer section.
• #footer - the container just inside the footer-wrapper.
• #footer h2 - sets the properties of the footer title/header.
• #footer .widget - controls the footer widget properties.
• .footer a - controls any footer link texts.

Now that you know these containers and elements, you'll know where to look for in the 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 the codes inside the {.....} for that container or element only.