How To Customize Your Blog's Background and Banner

As you can see, I've decided to totally trick-out my blog!  The previous background was one that I had made on my own, along with the header. The other customizations, such as the font and font color, I used the Advanced customization tools. However, after seeing some of the other blogs out there still using the older templates, I really began to realize how seriously lacking the Dynamic Views were in customizations and the ability to add creative content. So, I decided to go old school and switched to the "Picture Window" template.

I found this wonderful background at The Cutest Blog on the Block, which is, by far, the best source of free blog backgrounds and templates that I have been able to find. There are an array of super cute backgrounds for Blogger, Facebook, Twitter, and websites, along with an assortment of page element accessories. While looking for ways to further customize my blog, I quickly found that there is very little up to date, concise information on CSS codes for Blogger. This is why I've decided to create I've decided to make a quick guide for customizing your blog using the new CSS section in the Advanced customizations.



First, if you would like to use a background from TCBotB (we'll use this abbreviation for the rest of the post for "The Cutest Blog on the Block"), simply follow the instructions on the site for adding the background, and make sure your template is set to "Picture Window." If you would like to use your own background image, simply go to Template > Customize > Background. Click on the current background image preview box, "Upload Image," and, once you've selected your image, "Done." With this method, the image will have to tile in order to fit the entire blog, so make sure it is a pattern that you can match fairly close for a seamless look. 

Template > Customize > Background > Background Image > Upload Image > Select Image > Done

 Next, the banner can also be added through Blogger. If you are using a banner from TCBotB, follow the directions on the site up to saving your final product. After you have saved your edited banner, upload it to an imagine hosting site, such as Photobucket. Once in your Blogger Dashboard, click on Layout. On your "Header" gadget click "Edit." In the "Image" section, select "From the Web," and then paste the "Direct Link" from your image in Photobucket. This is very important! It has to be this link otherwise the process will not work! After the link as been pasted, press "Enter," so that the image can show up in the preview box. In "Placement," select "Instead of title and description," then "Save." This will work with any image or banner that you have created as well. I prefer to use stored images on the web as this keeps my hard drive clutter to a minimum.

Only use "Direct Link"!!

 You may notice that you banner is a little off.

Before

If this is the case, go to Template > Customize > Advanced > Add CSS. Then copy and paste the following code into the CSS section, pressing enter after the last bracket (these instructions, with more detailed step-by-step pictures, can be found on TCBotB): 

#Header1 {width:750px;margin:0 auto}

After

Because all blogs and banners are different, you may have to change the "width" value from the one I've given to make your banner fit exactly. I've found this number works generally well with banners from TCBotB, though.

And viola! You now have a nifty new background and banner. Next, I will show you how to add images and page elements to your gadgets.