logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

Customize the Header Section of Your Blogger.com Blog

Guest Author - Diane Cipollo

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.

  1. @media all
  2. @media handheld
  3. #blog-title
  4. #blog-title a
  5. #blog-title a:hover
  6. #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.

This site needs an editor - click to learn more!

Add Customize+the+Header+Section+of+Your+Blogger%2Ecom+Blog to Twitter Add Customize+the+Header+Section+of+Your+Blogger%2Ecom+Blog to Facebook Add Customize+the+Header+Section+of+Your+Blogger%2Ecom+Blog to MySpace Add Customize+the+Header+Section+of+Your+Blogger%2Ecom+Blog to Del.icio.us Digg Customize+the+Header+Section+of+Your+Blogger%2Ecom+Blog Add Customize+the+Header+Section+of+Your+Blogger%2Ecom+Blog to Yahoo My Web Add Customize+the+Header+Section+of+Your+Blogger%2Ecom+Blog to Google Bookmarks Add Customize+the+Header+Section+of+Your+Blogger%2Ecom+Blog to Stumbleupon Add Customize+the+Header+Section+of+Your+Blogger%2Ecom+Blog to Reddit




RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor