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

Blogger Template Designer

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.

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.

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.

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.

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.

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

31 thoughts on “Design Your Own Blogger Templates!

  1. 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?

  2. 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.

  3. 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?

  4. 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).

  5. 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!

  6. 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!

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

  8. 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?

  9. 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?;;)

  10. 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.

  11. How can i add a 3 column footer to current template? I want to add 3 add a widget boxes in footer. My template is from btemplates. So this method wont work. I also dont want to change this template, bcause this is best for readers to select and read what they want. Can you help me with some codes? I didnt find answer in any other places. And i also want to say that i am a blog maniac nw after reading ur posts. Nw i am serious about blogging and got a custom domain for that. Thanks in advance

  12. Yes, if you have the basic knowledge of css/html/xml, then instead of using these new templates (Template Designer), use the most basic template of Blogger – Minima.
    And modify it with the new CSS/HTML code. And save/download it in a .xml file.

Leave a Reply

Your email address will not be published. Required fields are marked *