April 4, 2010

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


32 comments:

Poras Gupta said...

Great Post ! Thanks For Sharing

Anims 101 said...
This comment has been removed by the author.
Beben said...

yeah great posting...thanks :D

Reza Winandar said...

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

World Best Blogger Templates said...

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

Anup said...

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

Sai - Blogger Widgets said...

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.

NDS Roms said...

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?

Sai - Blogger Templates said...

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

NDS Roms said...

@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?

Sai - Blogger Help said...

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

Monique said...

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!

Nicole said...

I LOVE THISSSSSS! THANKS A LOT!

Sachiko Matsuda said...

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!

Divya Sai said...

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.

Sachiko Matsuda said...

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?

Watch Megavideo movies said...

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

michkhoo said...

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

Divya Sai said...

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.

kuya sang g'nostik said...

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.

Free Ipad said...

Very artistically concluded post. Thanks

Admin - Blogger Widgets said...

Thank You!

riyas - freebie4india said...

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

maycatdecal said...

I like to learn many things from the you

Jack said...

I've been customizing my blog using the above Blogger System. Pretty handy for a newbie like me.

But how do you guys make a fully customized template?
I hope to know about this.

Thanks.

- Jack -
@JackDi.com

jhonny said...

hay....

jbohaj said...

Hi,

Is it Possible to Create Blogspot Templates with html & css??

Sai - Blogger Templates said...

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.

Unknown said...

hi good aftie

Muhammad Azeem said...

beatiful, niaf, i like

web desing

thank's

Anonymous said...

:((

6MOLAVEGAMERS said...

I Love The Smileys!

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

Allowed HTML tags: <b>, <i> and <a>

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy