Design Your Own Blogger Templates!

This post will help you to design your own templates by using the newly launched feature by the Blogger Team – Template Designer.

There are several hundred, in fact thousands of Blogger templates available for free to download and use. But most of the bloggers usually do not find everything they want in these templates and to avoid the hectic tweaks and coding stuff, they finally settle for a template that covers the maximum number of their requirements and compromising on some other features.
But now you can yourself design a complete template for your blog;
To design a unique template for your blog, you have to focus mainly on four aspects of the template:

  1. Overall template-layout structure :- This is the most important and the basic structure of your template. You can select the one of your choice, from 8 different available options – no sidebar, 1 sidebar (either to left/right), 2 sidebars, a large sidebar – followed by two small sidebars etc. (see below)
    Blogger Templates Official Layouts
    You can also adjust the widths of different sections viz. sidebars and the post-area, with a simple drag-tool.
  2. Footer Layout :- Select 1 or 2 or 3 column layout.
    Blogger Official Footer Layouts
  3. An attractive Background :- You may use a single large image or a small repeating image as a background-pattern for your blog, or you may simply use a background color instead of images.
  4. Finally, Styling everything from Header to Footer: Font styles, size and colors for header-text, body-text, widgets-text, footer-text etc.
    And it also includes coloring different areas/parts of the blog-template, like central post-body background, header background and outer-wrapper background.

Now the procedure to follow; Make your first self-designed template

Design Your Own Blogger Templates!
Blogger Template Designer

STEP #1
Log in to Blogger In Draft and create a NEW test-blog, we’ll use this blog to create the template and then the template will be transferred to the original/main blog. Write at least two test-posts with a few test comments.
NOTE: At the time of creating this new test-blog, initially select any blogger template (Minima etc.) randomly.

STEP #2
Go to Layout -> Template Designer.
Now select the template that best matches your taste; with/without header, transparent background etc.
Click on Apply To Blog.

STEP #3
Now again in the Template Designer, go to Layout.
Select the Body Layout, Footer Layout and adjust the widths of different sections (optional).
Click on Apply To Blog.

STEP #4
Now go to the Background tab and select either an image or a color as your blog’s background. [Read Step #4 cont. to add a background image of your choice].
Click on Apply To Blog.

STEP #5
Finally adjust the background colors for different areas of the blog, font styles, size and colors etc. from the Advanced section of the Template Designer.
Click on Apply To Blog.

STEP #4 cont…
To manually change the background, go to Dashborad -> Layout -> Edit HTML
and find a code SIMILAR (and NOT exactly the same) to this, in the template:

<Variable name=”body.background” description=”Body Background” type=”background”
color=”$(body.background.color)” default=”#111111 url(http://themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center” value=”#111111 url(http://themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center”/>

Change the code highlighted in RED, with the DIRECT LINK to the image you want to use as the background image. The code highlighted in BLUE will adjust the position and the characteristics of the image.

Check out the Template designed by me, while writing this tutorial: Sample – New Blogger Template Designer Blog.

That’s it…Now you have a new template, entirely customized by you…ready for your actual blog. Download the template from your test-blog and upload it to the main blog. But before you add this template to your main blog, download the template you are currently using in your main blog as a back-up and also read this post to know the correct way of changing templates in Blogger without losing any of your content/widgets.

Examples…
Impress me with your work and get your blogs displayed here…

Leave a Reply

31 Comments on "Design Your Own Blogger Templates!"

Notify of
avatar
Sort by:   newest | oldest | most voted
Poras Gupta
Guest

Great Post ! Thanks For Sharing

View Comment
Beben
Guest

yeah great posting…thanks 😀

View Comment
Reza Winandar
Guest

Blogger will beat WordPress one day, I'm sure about it.

View Comment
World Best Blogger Templates
Guest

Nice shearing great article for design your own blogger templates. Thanks.

View Comment
Anup
Guest

Nice like tutorial Divya 🙂 I think the new template designer desigsn the template with faster and seedy of blog. But, I'm satisfied with my older blogger template. What about you?

One Question Divya,

Just before one week, I shifted my blog to http://www.hacktutors.info And PR has just updated. But I lost my page rank. Is this strong reason to I loose my page rank? What should I do to get back my page rank?

View Comment
Sai - Blogger Widgets
Guest

Yeah as of now, I am still with this template.
Well, as you have changed the domain name, so of course you have to lose ur PR, but don worry u 'll get it back (in the nxt pr update), ask the ppl you know who have given you backlinks to update their links and try to change the links yourself wherever possible, like update links in your posts etc. And also start registering at site-directories with your new domain.

View Comment
NDS Roms
Guest

hi. why i can not customize? it says "This template does not allow for layout customisation" or "Background image –
Not applicable for this template"
anyone can help me?

View Comment
Sai - Blogger Templates
Guest

Well you cannot use "Template Designer" tool, for your previously made templates. It is functional only against the newly launched templates by Blogger (around 15-17 templates found on the first screen of Template Designer screen).

View Comment
NDS Roms
Guest

@Sai – Blogger Templates
thank you very much. i have one more question. what can i do not to lose read more hack when i change the template?

View Comment
Sai - Blogger Help
Guest

Don't worry about read more hack, use the official read more method, and in case of any problems go through this post:
http://bloggerstop.net/2009/09/blogger-read-more-sidebar-errors-fixed.html

And to know about the correct way of changing blogger templates, read this post:
http://bloggerstop.net/2008/12/how-to-change-bloggerblogspot-templates.html

View Comment
Monique
Guest

Thanks a bunch!
Though I ended up settling for a pre-made template, I'll definitely make use of this on my next blog when I have more time to design my own background and come up with coordinating colors. I love the simplicity of this, no more having to mess with code to get the exact number of columns and column sizes I want!

View Comment
Nicole
Guest

I LOVE THISSSSSS! THANKS A LOT!

View Comment
Sachiko Matsuda
Guest

Help. I am new to this whole templates. But I tried to add one of the water colour template to my blogspot, everything turned out great except that there the "Undefined Words" are appearing next to my text blog title. How do I get rid of it? Help!

View Comment
Divya Sai
Guest

Hi Sachiko,

Actually instead of "undefined words", date should be shown in your blog. To fix that problem, log in to Blogger, go to "Settings" then go to "formatting" and then against "TimeStamp format" try different formats (remember to hit the save button after selecting any of those formats from the drop-down menu), some of them will fix your problem.

View Comment
Sachiko Matsuda
Guest

Thank you for the advice above. I appreciate it. Now, I have another problem…I wonder whoever here can help me out abit…What is Flickr, this word keeps showing at the bottom right of my blog. How do I adjust/erased/make use of it?

View Comment
Watch Megavideo movies
Guest

Thankyou for short synopsis. Really helpful i must say. Thanks alot for writing on it 🙂

View Comment
michkhoo
Guest

It would be really nice to upgrade my template with transparency and stuff but i still got "Not applicable for this template."
Anyway to "upgrade" current template?;;)

View Comment
Divya Sai
Guest

Upgrading previously made templates is of course NOT possible. But anyways, I think as described in the post above, you can combine your present template with the new transparent templates yourself. Try it on a test-blog first, if you are satisfied with your work, then transfer the template to your main blog.

View Comment
kuya sang g'nostik
Guest

There is no user by the name "adhit_khubil@yahoo.com". User names are case sensitive. Please check your spelling, or use the link below to create a new user account.

View Comment
Free Ipad
Guest

Very artistically concluded post. Thanks

View Comment
wpDiscuz