Starting Your Own Blogger Template

>> Browse templatesMoney tips5 comments

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 the Main and Sidebar containers in it. If the width is not set well, the Sidebars can 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 your Labels 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.


Amy S. December 10, 2008 12:49 pm  

Your tutorials are fantastic! Love them - I learned so much and built my blog using one of your templates.
My only problem is I can't get the comments to work - I've tried reloading the blog, tried other templates and still the comments section won't work...any help would be really really appreciated!
Thank you!

Alyssa is the Queen. July 25, 2009 6:48 pm  

i am hopeless. i can't figure this shizz out for the life of me. i want a pretty blog and its just fugly. help please :)

Pree Badozz December 02, 2012 12:06 am  

Your tutorials are very clear. I am a beginner blogger, although I did not read all your tutorials from the first to the last, but I can take some important conclusions on how to make blogger templates.

Frankly I was bored with the existing blogger templates, therefore I would like to create my own templates.

1000 Thanks.

ahmed sky March 02, 2013 4:27 pm  

thanks for tutorial

i want know that if its necessary to learn xml in order to make blog tamplate ???

InnomaxMediaLLP May 24, 2013 2:09 am  

I agree with you. This post is truly inspiring. I like your post and everything you share with us is current and very informative, I want to bookmark the page so I can return here from you that you have done a fantastic job
Web Designer