Customizing Your Blog


Customizing Your Blog

The blog templates you get to choose from when first creating your blog are nice, but there aren't a lot of them. Fortunately, Blogger offers additional templates for your blogand lets you fully customize the look and feel of your blog page. Read on to learn more.

Choosing a Different Template

First things first: If you no longer like the template you originally chose for your blog, you can change it. Blogger offers more than 35 different blog templates, and there's no harm in switching from one to another to suit your mood. Here's how to do it:

1.

From the Blogger Dashboard, click the Layout link next to your blog name.

2.

When the next page appears, select the Template tab and click Pick New Template.

3.

Doing so puts all of Blogger's templates on display, as you can see in Figure 8. This is a larger selection of templates than was visible when you first created your blog; several template styles are available in different color variations. To preview how your blog will look with a given template, click the Preview Template link beneath that template.

Figure 8. Choosing a new template for your blog.


4.

To select a new template, check that template's name.

5.

After you select a template, click the Save Template button.

Caution

When you choose a new template, any changes you've made to your previous template will be lost.


Personalizing Fonts and Colors

You don't have to settle for the stock templates that Blogger provides, however. Blogger lets you customize the fonts and colors used in any template, with a few clicks of your mouse.

Note

Blogger uses CSS (cascading style sheets) to control all the fonts and colors in a template. The style sheet code is at the beginning of the page's underlying HTML code, and it defines the look of each individual page element. Obviously, this all goes on behind the scenes; when you make a selection on the Fonts and Colors page, you're actually making changes to the CSS code.


To customize the look of individual elements in your blog template, go to the Blogger Dashboard and click the Layout link next to your blog title. When the next page appears, select the Template tab and click Fonts and Colors. Doing so displays the Fonts and Colors page, shown in Figure 9.

Figure 9. Changing colors.


From the Fonts and Colors page, you can change the following elements:

  • Main background color

  • Text color

  • Blog title color

  • Blog description color

  • Link color

  • Link hover color

  • Date header color

  • Sidebar title color

  • Sidebar text color

  • Text font

For colors, making a change is as simple as selecting the element in the list and then clicking the new color in the color picker. For changing the text font, select Text Font from the list and choose a font family (Arial, Georgia, Trebuchet, Courier, Times, or Verdana), font style (normal, bold, or italic), and a font size (smaller or larger); Figure 10 shows the font options. The preview of your blog, at the bottom of the page, reflects your changes.

Figure 10. Changing fonts.


When you're satisfied with your changes, click the Save Changes button.

Tip

A fun option for any color element is to shuffle randomly through a compatible color scheme while you display your blog. Just click the Shuffle Blog Colors link to see how this works.


Adding New Page Elements

One of the useful new features of the new Blogger is the ability to add subsidiary page elements in either the sidebar or in the main column of the blog page. You can use these page elements to add descriptive text, pictures, links, lists, and the like to your blog. Table 1 details the page elements that Blogger lets you add.

Table 1. Blogger Page Elements

Page Element

Description

List

This is a simple text list. You can use it to create lists of CDs, books, and the likeeven Christmas wish lists! Use the list element to list any item that doesn't have a link or a picture.

Link list

This element is similar to the text list, except each list item has a hyperlink to another web page. Use the link list element to create lists of favorite websites.

Picture

This adds a single picture to your blog page. You can upload the picture from your PC or link to it on another site on the Web.

Text

Use this element to add a block of text anywhere on your blog page. The text block can have a title and description; you can format the text itself with bold, italic, and colored text.

HTML/JavaScript

This element lets you add snippets of HTML or JavaScript code to your blog, which you can use to incorporate additional functionality from third-party sites.

Feed

This element displays up-to-the-minute content from another blog or news feed on the Web; all you have to do is enter the feed's URL.

Labels

This element displays a list of all the labels you use to categorize your blog posts.

Logo

Use this element to display a Blogger logo on your page.

Profile

This element displays your Blogger profile.

Blog Archive

Use this element to display links to older posts in your blog.

Page header

This element typically goes at the top of your blog page, and displays your blog title and description.


As you can see, these page elements add much content that previously was unavailable in Blogger or that you had to add through editing the blog's HTML code by hand. Now it's a simple matter of clicking a few links and filling in a few blanks, and Blogger adds the element automatically.

To add a new element to your page, follow these steps:

1.

From the Blogger Dashboard, click the Layout link next to your blog name.

2.

When the next page appears, select the Template tab and click Page Elements.

3.

When the next page appears, click the Add a Page Element link.

4.

This displays the Choose a New Page Element window, shown in Figure 11. Click the Add to Blog button beneath the element you want to add.

Figure 11. Adding page elements to your blog.


5.

Now you'll see a window specific to the type of element you selected. For example, Figure 12 shows the Configure Image window, which opens when you choose to add a picture to your blog. Fill in the information required in this window, and then click Save Changes.

Figure 12. Configuring an image for your blog.


Your blog now contains the element you selected. You can then decide where on the page that element will appearand we'll discuss that in a moment.

Tip

To edit an existing page element, go to the Add and Arrange Page Elements page and click the Edit link next to the element you want to edit.


Adding News Feeds to Your Blog

One of the page elements you can add to your new Blogger blog is a news feed module. You can add one or more feeds to your blog's sidebar or below the main posting area of the page. This is a great thing if you have a few news feeds that you really like, and if they have a lot in common with your blog. For example, if you blog about politics, you might want to add feeds from similar political blogs or sites.

Adding a news feed to your blog is simple. Go to the Blogger Dashboard, and click the Layout link next to your blog name; when the next page appears, select the Template tab and click Page Elements. When the next page appears, click the Add a Page Element link; from the Choose a New Page Element window that appears, click the Add to Blog button in the Feed section.

Blogger now displays the Configure Feed window, shown in Figure 13. You have to know the URL of the site's RSS or Atom feed, which you typically get by clicking the RSS or Atom link or button on the other site. Enter the URL for the RSS or Atom feed into the Feed URL box, and then click Continue.

Figure 13. Adding a news feed to your blog.


Caution

The URL for the site feed is different from the site's regular URL. Make sure that you display the feed page and then copy the URL for that page from the address bar of your web browser.


The Continue Feed window now changes to display information about the selected news feed. As you can see in Figure 14, you see a preview of the last several posts from this feed; you can select how many posts to display and whether to display item dates and authors. Click the Save Changes button to add the feed to your blog.

Figure 14. Configuring a news feed.


Figure 15 shows how a blog looks with a news feed added to the sidebar.

Figure 15. The most recent posts from a news feed in a blog's sidebar.


Adding Lists to Your Blog

Another element you might want to add to the sidebar of your blog is a list. Maybe you want to include a list of friendly websites, or recently read books, or the CDs you're listening to right now, or your favorite local restaurants. It's easy to doin fact, Blogger provides three different ways to add lists to your blog.

Adding a Text List

The first type of list is the simplest: a basic text list. You add it by going to the Blogger Dashboard and clicking the Layout link next to your blog name; when the next page appears, select the Template tab and click Page Elements. When the next page appears, click the Add a Page Element link; from the Choose a New Page Element window that appears, click the Add to Blog button in the List section.

Now you see the Configure List window, as shown in Figure 16. Enter a title for your list, as well as the number of list items you want to show and how you want to sort the list (alphabetically, reverse alphabetically, or as enteredthe Don't Sort option).

Figure 16. Creating a simple text list.


Now you start creating your list. Just enter the first item for your list into the Add List Item box and click the Add Item button. Repeat as many times as necessary to add all the items to your list, and then click the Save Changes button. The result is a bulleted list like the one in Figure 17.

Figure 17. The result: a bulleted text list in the blog's sidebar.


Tip

Interestingly, you can use the Configure List window to create list links as well as simple text lists. Just click the Create Link button next to the Add List Item box to add a hyperlink to any item in your list.


Adding a Link List

If you'd rather include a list of links to other websites, Blogger is equally accommodating. Begin by going to the Blogger Dashboard and clicking the Layout link next to your blog name; when the next page appears, select the Template tab and click Page Elements. When the next page appears, click the Add a Page Element link; when the Choose a New Page Element window appears, click the Add to Blog button in the Link List section.

Figure 18 shows the Configure Link List window. Start by entering a title for your list, as well as the number of list items you want to show and how you want to sort the list (alphabetically, reverse alphabetically, or as enteredthe Don't Sort option).

Figure 18. Creating a list of links.


For each item in your list, you have to enter the site's URL and name. Click the Add Link button to add each item, and continue until you've added all the links you want to add. When you're done, click the Save Changes button. The result is a bulleted list of links, like the one in Figure 19.

Figure 19. The result: a bulleted link list in the blog's sidebar.


Adding a List with Images

Text lists and link lists are all well and good, but what if you want to display a list that includes images? For example, maybe you want to include a list of your favorite books, along with cover images and links to those books on Amazon.com or Barnesandnoble.com. To do this, you have to do a little HTML codingand use Blogger's HTML/JavaScript content module.

Starting out is easybut it gets more difficult. You begin by going to the Blogger Dashboard and clicking the Layout link next to your blog name; when the next page appears, select the Template tab and click Page Elements. From the next page that appears, click the Add a Page Element link; when the Choose a New Page Element window appears, click the Add to Blog button in the HTML/JavaScript section. Now Blogger displays the Configure HTML/JavaScript window, as shown in Figure 20. Enter a title for this list, and then get ready to create your HTML code.

Figure 20. Entering HTML code for an image list.


The following is the code you'll use to create a list of books that link to individual book pages on Amazon.com. You can create similar code to work with Barnesandnoble.com and other book sitesor to create lists of CDs or DVDs. Here's the code, with a little explanation afterward:

<p><a href="http://www.amazon.com/exec/obidos/ASIN/number1">
<IMG src="http://flylib.com/books/2/946/1/html/2/http://images.amazon.com/images/P/number1.01.THUMBZZZ.jpg"
align="top"/>
<br/>Title1</a></p>

<p><a href="http://www.amazon.com/exec/obidos/ASIN/number2">
<IMG src="http://flylib.com/books/2/946/1/html/2/http://images.amazon.com/images/P/number2.01.THUMBZZZ.jpg"
align="top"/>
<br/>Title2</a></p>

<p><a href="http://www.amazon.com/exec/obidos/ASIN/number3">
<IMG src="http://flylib.com/books/2/946/1/html/2/http://images.amazon.com/images/P/number3.01.THUMBZZZ.jpg"
align="top"/>
<br/>Title3</a></p>

<p><a href="http://www.amazon.com/exec/obidos/ASIN/number4">
<IMG src="http://flylib.com/books/2/946/1/html/2/http://images.amazon.com/images/P/number4.01.THUMBZZZ.jpg"
align="top"/>
<br/>Title4</a></p>
 


And now the explanation. Replace number1, number2, and so forth (two times each) with the ASIN or ISBN number of the book; you can find this number on the book's product page on the Amazon.com website. Then replace Title1, Title2, and so forth with the title of the book.

As you can see in Figure 21, this creates a list of books, with each listing displaying the book's cover and titleboth of which, when clicked, take you directly to that book's page on the Amazon.com website.

Figure 21. The result: a list with images and links.


Rearranging Elements on the Page

With the new Blogger, where elements appear on your page is now totally under your control. Rearranging your blog's content is as easy as using your mouse to drag and drop individual page elements.

All you have to do is click the Layout link next to your blog name in the Blogger Dashboard, and then select the Template tab and click Page Elements. This displays the Add and Arrange Page Elements page, like the one in Figure 22. You can move almost every element on this page, except for the Navbar, page header, and blog posts sections. In addition, you can move any element in the sidebar to a new position in the sidebar, or above or below the blog posts section.

Figure 22. Rearranging elements on your blog page.


Click the Preview button to see what your rearranged page looks like; when you're done making changes, click the Save button.

Using Third-Party Templates

If you don't like the templates that Blogger provides, you can use a template created by someone else. To use a third-party template, you first have to save the HTML code for that template to your hard disk. You can then upload the code for that template via the Blogger Dashboard.

Tip

I recommend saving a copy of your existing template before you try uploading a new template. Go to the Template tab, click Edit HTML, and then click Download Full Template. This saves a copy of your template code to your hard drive.


To upload a new template, go to the Blogger Dashboard and click the Layout link next to your blog title. When the next page appears, select the Template tab and click Edit HTML. Now click the Browse button to find the template file on your hard disk, and then click the Upload button. This copies the new template code into the Edit Template box; you can then preview and, if you like, save this new template code.

Caution

Unfortunately, most existing third-party templates designed to work with the old Blogger will not work with the new Blogger. That's because the new Blogger uses a completely different set of built-in HTML tags; the old Blogger tags do not work with the new Blogger. For that reason, I recommend that you try third-party templates with caution, and only after saving your existing template code to your hard drive. If the new template doesn't work, you can re-upload the saved template.