01 December 2011

Blog Coding 101: Backgrounds

Backgrounds might be a bit trickier than just grabbing a code and sticking it in your gadgets.

But say you're new to the Blogger system and want to get yourself a nifty background that Blogger may not offer.  First, find a site that provides free backgrounds for blogger.  Here are a few I use:
All of these sites provides a free code that will put that particular background on your blog.

From there:

Grab one of those codes.  Just copy it so that it's on your clipboard.

Bring up your Design page.  Go to your Blogger dashboard, find your blog and click "Design".  This will bring up a page showing your widgets.

Add a new widget.  You'll get a pop up box that provides you with a list of all different kinds of widgets you can make.  Pick "HTML/Javascript".  You can leave the title line blank.  It'll be listed as "HTML/Javascript" on your widget page, but will be invisible on your site.  Copy the code into the content box.  Save it.  Position it anywhere on your widget page.  It won't really matter.  I always put it down towards the footer just because I can keep track of it better that way.

Observe your new nifty background.  You can customize your colors to match your background and if you want to learn how to do that, continue onto the next section.  Otherwise, enjoy! :)

Note:  Make sure you're getting the right kind of background.  There are three types of categories: 2-column (standard), 3-column (widened), and full.  Getting the right kind for your blog can be as simple as looking at your blog and finding that, "Oh, mine has three columns."  It is possible, however, to have only two columns but manually widen your blog so it is just as wide as any 3-column.  If the width of your blog* is between 700 and 1000 pixels, get a 3-column background.

Trust me, there is nothing tackier than having a blog that overlaps its background.

* = Telling the width of your blog: go to Design > Template > Customize > Adjust widths.