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:
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.
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:
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.
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.
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:
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.
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.
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.
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
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.
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.
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.
Customizing Your Blog