Making a 3-Column Template and More ...

Blogger Template Design: Tutorial 10
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 the Expand 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 the Main 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 the Expand 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!
  Courtesy :http://www.ourblogtemplates.com

Read More/തുടര്‍ന്നു വായിക്കുക

More Explanation about the Body Code

Blogger Template Design: Tutorial- 9
In this tutorial I'll explain a bit more about some special commands that you'll see in the Body section of the code. Here's the sample code again below:


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

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

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

<div id='content-wrapper'>

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

<div 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 -->

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

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

</body>


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 be further classified into a 'class' using the class command. This identification and classification are useful as a reference when you want to style it later using CSS. In the CSS code, the id command is referred to using the # symbol and the class command is referred to using the . symbol. For example, in the CSS code, you might see #main-wrapper {...} or .sidebar {...} which are the codes to style the main-wrapper and sidebar. You can read further about these identification and classification in w3schools.com

Everything wrapped inside the b:section are the widgets (also called the Page Element). For example, inside the Header is 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-wrapper can have is 1 only. 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 will not appear in the Header section.

In the main-wrapper, you only have the showaddelement='no' code which means that you won't have the Add a Page Element button there, but you can still drag other widgets 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 will create the Add a Page Element button for you to add widgets. Plus, you won't have any limitations on how many widgets you want to add. As you already know, you can always drag the widget to any other wrapper as long as they don't limit the amount of widgets to be displayed in that wrapper.

In the footer-wrapper, there's no code following the id command. This means that you won't have the Add a Page Element button but you can drag any widgets into the Footer section.
  Courtesy :http://www.ourblogtemplates.com

Read More/തുടര്‍ന്നു വായിക്കുക

The Body Section of the Blogger Template Code

Blogger Template Design: Tutorial -8

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

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


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


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

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

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

<div id='content-wrapper'>

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

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

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

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

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

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

For simplicity, ignore the code in light grey. They are either comments or 'default' codes to make things work properly that doesn't need to be tampered with. The core part of the codes can be sectioned into 4 parts:

1. Header (in red)
2. Main (in green)
3. Sidebar (in red)
4. Footer (in brown)

You'll see in the above that all the codes are first wrapped in the body tag, followed by the outer-wrapper tag, then the wrap2 tag. These wrappers are used to group the containers together so that they can be easily editted together. Using wrappers also make placing the containers much easier especially if you want to use additional sidebars or extra containers (such as a banner or linkbar containers as in most of my templates). In the explanation below, I'll only refer to the outer-wrapper as the larger wrapper without referring at all to the wrap2 wrapper. They're just the same (I'm not even sure why the wrap2 is there in the first place).

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

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

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

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

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

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

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


  Courtesy :http://www.ourblogtemplates.com

Read More/തുടര്‍ന്നു വായിക്കുക

7- Setting the Template Size

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 explained about 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, setting margin: 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 the sidebar-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.

Read More/തുടര്‍ന്നു വായിക്കുക

6-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 Blogger account. 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 in Tutorial 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!
  Courtesy :http://www.ourblogtemplates.com

Read More/തുടര്‍ന്നു വായിക്കുക

5-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 Blogger template 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 and main 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 your header 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 main container.
• 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 an unordered 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 (the Added 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 .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'm putting it in the Miscellaneous section because there are many smaller elements that belong together with the Profile container and putting it in the Miscellaneous 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 Me block.
• 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 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 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.
  Courtesy :http://www.ourblogtemplates.com

Read More/തുടര്‍ന്നു വായിക്കുക

Essential tools for Blogger template design

Essential tools for Blogger template design

When designing Blogger templates, it's useful to have a set of "tools" available before you begin. So in this installment of the Blogger Template Design series, I have compiled a list of tools I use often when designing themes, from imaging programs to relevant websites and resources you may like to use when designing your own templates. 

 test blog

When building a completely customized template, I would strongly advise you to do this using a test blog. This way, you can always ensure your regular blog is available, features no mistakes and is always presentable!
I always create and test new templates on a test blog, filled with dummy posts and sidebar widgets so I can easily see what needs to be changed, redesigned or altered without affecting my main blogs in any way.
I have written a full article about creating and using a test blog which I would advise you to read before you begin to create a custom template. Then once your design is complete, you can move this over to your main blog seamlessly; your readers will barely be affected by the changeover, and your blog will always be available to read!

An image manipulation program

This is one of the key tools used when designing Blogger templates. In almost all of the themes I've created, I have needed to use an imaging program to create some aspect of the design.

Why you need this

To design a custom header image, backgrounds or perhaps headings for your sidebar. Also handy for editing images in posts.

Resources

If you already have Photoshop, CorelDraw or a similar program installed on your computer, this should be perfect for your needs. MS Paint may be a little too basic for your future needs, so if this is all you currently have available, you may want to try one of these free downloads instead:

• GiMP (the GNU Image Manipulation Program): This is often considered the free version of Photoshop! I have used this open source program extensively, it's excellent and highly recommended.
• Inkscape: a free vector graphics editor similar to Illustrator and CorelDraw.
• ImageMagick: a software suite to create, edit, and compose bitmap images. Can read and write in a variety of formats.

All of the programs mentioned above have a good support system online for tutorials and usage, so if you need to learn a particular aspect of using these programs, you can be assured of answers to your questions!

A basic text editor

Although you can edit your Blogger template from within your dashboard, it can be very useful to have a basic text editor to hand too.

Why you may need this

To copy and paste elements of your template code; to save templates in text format; to write and edit JavaScript; to experiment with CSS.

Resources

I imagine the majority of you will already have a basic text editor such as Notepad already installed on your computer. This is perfectly suitable for creating and editing Blogger templates.
If you're looking for a more fully featured program, you may want to consider downloading Notepad ++ (as recommended by Thomas) which is a more advanced text editor useful for general programming needs.

Online file hosting

Blogger does not allow us to host background images or scripts in our accounts. Therefore you'll find it very useful to have a hosting account online for the images (and possibly JavaScripts) which you'll use in your custom template designs.

Why you may need this

If you want to use background images, use scripts in your template, or link to any external files.

Resources

If you already have some hosting available through your domain provider or other paid service, this will be more than suitable for your needs. You may also be able to use your Google Pages account for some files.
Here are some free hosting services you can use to host your images and files:

• Photobucket: for images only, but highly recommended
• HotlinkFiles: this free service can host almost any type of file, and comes with 8000mb of bandwidth.
• Fileden: comes with 1gb of storage space! More than enough for use with Blogger templates.

More than one internet browser

Or at least the ability to check your designs in other browsers!

Why you need this

Websites can look different when viewed through different browsers. Some aspects of web design are incompatible between Internet Explorer (particularly IE6 and below) and Mozilla based browsers (such as Firefox).
If you can install more than one browser, this would be highly useful to check for incompatibility issues.
I use both Internet Explorer and Firefox to ensure compatibility between these major browsers, and also check for other possible issues using BrowserShots.org.

Resources

I imagine that most of you will already have Internet Explorer or Safari preinstalled on your computer, so here are a couple of Mozilla based browsers you may like to consider downloading:

• Firefox: one of the most popular browsers available.
• Flock: similar to Firefox with an emphasis for social network users

Another way to check for incompatibility issues is to use BrowserShots.org: this is a free service which provides screenshots of your web pages in different browsers. You may have to wait some time for the screenshots to be available, but this is such a good service that it's worth the time and effort!

Copyright-free images, backgrounds and icons

If you're a whiz with the camera and graphic design software, you wouldn;t need to worry about this at all. For may of us though, it's useful to have resources available for copyright-free images and backgrounds!

Why you may need these

For creating a custom header, template backgrounds, header icons, fancy lists and other decorative aspects of your template.

Resources

Here are some of the best resources I have found (and use often!)for resourcing images, backgrounds and icons:

• Stock Exchange: features thousands of professional, copyright-free photographs. You will need to register for this site, but it is well worth it!
• Flickr Creative Commons search: find photographs and other images you can use according to their license. For a great overview of using Flickr images, have a read of Skellie's excellent article.
• Squidfingers patterns: over a hundred high quality tileable web backgrounds (my favorite resource for backgrounds).
• RepeatXY: literally hundreds of backgrounds available, which you can filter by color.
• Iconlet: a search engine for icons to use in your designs. Many sizes available, from 16x16px right up to 256x256px. A wonderful resource and certainly worth a bookmark!
• Icons, buttons and templates (Smashing Magazine Round Up): I often find myself referring to this excellent round up of web design tools. On this page you'll find a plethora of links to other resources, and some of the best icon sets available at this time.

Free fonts

While fonts are not exactly essential, I do find that having a variety of fonts available can help me design better headers and logos for my templates, and think you may find these resources useful too.

Why you may need these

Most particularly for creating your own header images, though also useful for logos and sidebar headings.

Resources

Here is a selection of the sites I visit when looking for free fonts:

• DaFont.com: probably the best free font resource I've discovered to date. You can search by type or keywords, and can also find commercial fonts if these are better suited to your needs.
• SimplyTheBest Fonts: Another great resource for free and shareware True Type fonts.
• Smashing Magazine fonts category: lists articles from the blog regarding free fonts and usage. You'll find loads of quality downloads here!

Final thoughts

I hope you find this a useful resource for when creating your own Blogger templates. If you would like to add any other resources to those listed here, please leave a comment below or send me an email.
In the next few days, I will make both this article and the Cheats' Guide to Customizing Blogger Templates available as PDF downloads for easy accessibility.

Coming soon...

In the next installment of this series, I'll (finally!) get into the nitty-gritty of template design. The next post will focus on creating a three column canvas on which to base your new design. This will be slightly longer and more detailed than my previous "creating a three column template" article, as I will fully explain how to adjust margins, padding and alignment to suit your individual requirements.
Be sure to subscribe to the news feed for updates on the Blogger Template Design series and other blogging news. And as always, please feel free to leave your comments and suggestions below.

Read More/തുടര്‍ന്നു വായിക്കുക