Customizing your Blogger Blog Design

Do you want to customize your Blogger blog design? Do you wonder how I customized this hectic capiznon blogger 2009 blog on my own without using templates from other Blogger theme providers? This post will discuss to you the different steps I made to make this design possible. From removing the navbar of the blog which usually found at the top of the page to setting your own background picture for the site.

Removing or Hiding the NAVBAR

Let us start with removing the navbar. Navbar is the long found at the top of your blogger blog. First select a Minima theme from the Layout tab of the Dashboard -> Pick New Template. Select the Minima theme as shown on the image. Then in the Layout tab again, choose Edit HTML. This will show you the HTML code of the current theme you have. Paste the NavBar CSS code to the portion as shown below (paste only the code on the green background), then click Save Template to save your changes:

...
[CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Minima Black
Designer: Douglas Bowman
URL:      www.stopdesign.com
Date:     26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

...

Change the Background
Now, after you make this work, the next thing that we need to do is to change the background of the page. First make sure you have a background image uploaded in image hosting sites like ImageShack, Picasa, etc. I recommend that you use at least a background with a resolution of 800x600. Then modify the portion specified on the following code and change the background parameter of the CSS code for the body, as shown below. Don't forget to save the changes you made to see the effect of your changes on your blog.

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background: URL(http://yourimageurlhere/imagehere.jpg);
}

Change Font and Color
Next, is to change the color and font of the site to fit on the new selected background that you have. To do this, on the Lay-out tab, click Fonts and Colors then each element of the site, from title, sidebar to the body text are listed on the left side of the window. Choose the appropriate color that you think that fits or blend or passed to your taste. Then save again.

That's it! You have your very own customized templates / theme for your blog on Blogger. You can play with all the CSS code on the template if you want to fit with your desired appearance of your new blog.

If you like this Hectic Capiznon Bloggers 2009 blogging tips, bookmark it using your favorite social bookmarking site. Thanks!