Starting Your Own Blogger Template

>> Browse templatesMoney tips17 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

chenmeinv0 March 31, 2017 11:59 pm  

ray ban outlet
hermes handbags
cheap ray bans
michael kors outlet
polo ralph lauren
coach outlet
le coq sportif shoes
ray ban eyeglasses
adidas originals superstar
new balance shoes

candy lol May 11, 2018 1:29 pm  

I love all the posts, I really enjoyed, I would like more information about this, because it is very nice., Thanks for sharing.

candy lol May 11, 2018 1:29 pm  

An excellent information provided thanks for all the information i must say great efforts made by you. thanks a lot for all the information you provided.

Awe Tech Water Purifier August 01, 2018 3:21 am  

Good stuffs from this blog I got very interesting points in this article

Julie T. Kirwan September 06, 2018 10:04 pm  

baseball star mod terraria apk download monster legends mod

ana smith October 08, 2018 1:45 am  
This comment has been removed by the author.
ana smith October 08, 2018 1:46 am  

try to play unblocked games 77

Live PSL Digital March 05, 2019 9:01 pm updates

Mohamed Abdellatif March 05, 2019 11:00 pm  

تميزت شركتنا فى تقديمها لخدمات مكافحة الحشرات ورش المبيدات باعتمادها على افضل انواع المبيدات الامنة كليا والتى تقوم باستيرادها ووفقا لذلك تجربتها من قبل خبرائنا لضمان صحتها على صحة عملائنا فنحن مؤسسة مكافحة حشرات بحائل نحرص طول الوقت على ان تكون مبيداتنا امنة لا تؤثر بالسلب ولو كان طفيف علىصحتكم وعلى الحيوانات المنلية ان كنتم من مقتنيها باستعمال أجدد أساليب المكافحة الكيميائية منها والبيولوجية لضمان ابادة ختامية للحشرات التى تزعجكم وضمان عدم عودتها مرة اخرى .
شركة مكافحة حشرات
شركة مكافحة حشرات بحائل
شركة مكافحة النمل الابيض بحائل
شركة رش مبيدات بحائل

Frp Bypass March 15, 2019 1:17 am  

best version of frp bypass tool apk

Ahmed Hamdy March 20, 2019 6:16 am  

- لما تختاروا موضع للتلفزيون اختاروا موضع غير مواجه للنافذه ( الشباك ) لانه راح يعكس اشعة الشمس وبذلك راح تكون في صعوبه برؤية التلفاز نهارا .
شركة نقل عفش
شركة نقل عفش من الرياض الى الاردن
شركة نقل اثاث من الرياض الى الاردن
شركة نقل عفش بالقصيم

meliodas April 27, 2019 1:00 am  

Don't worry and just go, because there will be me there.
geometry dash
five night at freddy's