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.

---

Image © Terence J Sullivan

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

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Google Facebook Twitter More

• Digg
• Linkedin
• Stumbleupon
• Delicious
• Tumblr
• BufferApp
• Pocket
• Evernote

Related Posts

• Add A Free Forum To Your Blogger/BlogSpot BlogI strongly recommend all the readers to bookmark this post. A forum is a must for every blog with increasing readership
• 10 Things Every Blogging Office NeedsA guest post by James Adams, editor and contributor to the CreativeCloud blog. Being a professional blogger isn’t as si
• 4 Tips for Organizing And Uncluttering your Blog ArchiveA guest post contributed by George Baker, who regularly writes for SparesNextDay.co.uk A well organized blog has a ton
• Start An eCommerce Website - For $0 All You Need To Start An Online Company You would have already read numerous articles on how you can start a websit