Sunday, April 4, 2010


Link to BloggerStop.Net - Blogger Widgets, Templates, Help!

Design Your Own Blogger Templates!

Posted: 04 Apr 2010 05:17 AM PDT

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.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.

 
Vida de bombeiro Recipes Informatica Humor Jokes Mensagens Curiosity Saude Video Games Car Blog Animals Diario das Mensagens Eletronica Rei Jesus News Noticias da TV Artesanato Esportes Noticias Atuais Games Pets Career Religion Recreation Business Education Autos Academics Style Television Programming Motosport Humor News The Games Home Downs World News Internet Car Design Entertaimment Celebrities 1001 Games Doctor Pets Net Downs World Enter Jesus Variedade Mensagensr Android Rub Letras Dialogue cosmetics Genexus Car net Só Humor Curiosity Gifs Medical Female American Health Madeira Designer PPS Divertidas Estate Travel Estate Writing Computer Matilde Ocultos Matilde futebolcomnoticias girassol lettheworldturn topdigitalnet Bem amado enjohnny produceideas foodasticos cronicasdoimaginario downloadsdegraca compactandoletras newcuriosidades blogdoarmario arrozinhoii sonasol