In the last tutorial, we customized the Links section for your BloggerTM weblog. Now, we will customize the Header section at the top of the blog. The Header contains the title and description of your blog. We are going to change the typeface, or font, for the text and add a colored background.
As in the last tutorial, we will make these improvements by changing a few lines of the template’s HTML code. Click on the Template tab in the menu at the top of the page which will take you to the Edit Current template section. You will find the HTML code for the template in the box below. We will be making a few changes to the CSS style code. (To find out more about Cascading Style Sheets, follow the link below.) Scroll down the code until you reach the Header section within the CSS style tag. As you can see, the style tag is very long and the Header section of the style tag has six parts.
- @media all
- @media handheld
- #blog-title
- #blog-title a
- #blog-title a:hover
- #description
- The first part of the code (@media all) controls the characteristics of the Header including the width, margin and border size. The second part (@media handheld) inherits these characteristics from the first part and also changes the width of the Header to 90 percent for handheld monitors. Because we want the new background color to the used in both instances, we will add a line of code for the background color in the first part (@media all). This new line of code is in bold below. In the example below, we have used a light gray color but feel free to use any color you wish.
@media all {
#header {
background-color: #EFE3EF;
...
- Next, we will change the typeface for the title to the popular, casual styled font called Comic Sans MS. Of course, you are free to use any font you like. The next three parts of the template's CSS code (#blog-title, #blog-title a, #blog-title a:hover) control the characteristics for the title of the blog. The first part controls the general characteristics and the other two parts control the look of the text when it is functioning as a hyperlink. To set the title’s typeface, or font, for all instances, we will add the CSS code for the font-family to the first part (#blog-title). Because our font name contains spaces, it will also need to be placed inside quotation marks (“comic sans ms”).
#blog-title {
font-family: "comic sans ms";
...
- Finally, we will work on the CSS code for the description of your blog (#description). This is the last part of the original six. As you can see below, all of the CSS code that controls the font characteristics for the description text is listed together on one line. All we need to do is add “comic sans ms” at the front of the list of fonts which will make Comic Sans MS the default font for the description text.
#description {
...
font:78%/1.4em "comic sans ms","Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
...
}
When you are finished, click the Preview button to preview your changes and then close that browser window to return to the previous webpage. Click on the Save Template Changes button. When you see the confirmation message indicating that the changes were saved, click on the Republish button. To verify that your blog has been updated, click on the View Blog tab in the menu at the top of the page. You may need to refresh your blog webpage to see the changes.
Screen shots reprinted by permission from Google Inc. GoogleTM, BloggerTM and BlogSpotTM are either registered trademarks or trademarks of Google Inc. in the United States and/or other countries. |
