Blogger Tips and Design Portfolio from Lightway Web Services, Inc.
HomeBlogger TipsDesign TipsWeb HostingDomain Name RegistrationDesign PortfolioAbout This BlogContact

Thursday, April 12, 2012

Creating the Blog Header

Most every blog (or website for that matter) will have a good header.  The header usually contains the name of the blog or website and some artistic design.  I usually find the header as the starting point for any web project.  I start with a header and then design my site around the header.  One of my favorite "styles" to use for designing a header is to start with a photo that relates to the site and fade it in the background and then use artistic font to type the blog or website name in the forefront using a shadow to make the site name stand out.  There are many different ways to go about designing a header, but that would surely be my favorite.

Finding the Blog Width

To create a header, start with any graphics program such as Photoshop, Fireworks, MS Paint, among others.  A good suggestion would be to check first the width of the blog.  In most cases, it works best to create the header using the same pixel width as the blog.  This can be done by one of two ways.

1. Navigate to "Template" > "Customize".  One of the options is "Adjust widths".  This should give you the overall blog width.

2. Navigate to "Template" > "Edit HTML" (using the new format you'll need to click "Proceed").  Finding the blog width can vary from template to template, but to start scroll down to "Body" or "Page Structure".  There should be a section of code listed as "#outer-wrapper".  Again, this may be labeled differently from template to template, but usually, it will be the largest width listed in the template, and using CSS structure, it will almost certainly be listed near the top.

Designing the Header

Using a graphics program, design the header according to your style.  The header can be any height although it would be advisable not to design to tall of a header as it will hide more of the blog content. The header should be saved as a JPG or GIF file format.

Uploading the Header

To upload the finished artwork, navigate to "Layout" and select the header widget at the top of the blog layout screen.




























The available options for the blog header are Blog Title, Blog Description, and the image. To upload your image, click "Browse" and locate the file from the hard drive. Make sure to check the options below. If you have included the title of your Blog in the header, than you can probably choose "Instead of title and description".  This is the cleanest way to post the header.  Also, you will probably want to un-check the "Shrink to fit" box. If the blog header has been designed to the correct width, there is no need for this option.  Click "Save" and your blog header should be in place.
Posted by Brian Kraft at 12:39 PM
Labels: BlogTips

No comments:

Post a Comment

Newer Post Older Post Home
Subscribe to: Post Comments (Atom)

Popular Posts

  • Custom Navigation Tabs for Blogger Menu
  • Using the "Float" Command in CSS
  • Adding the Facebook Social Plugin
  • Adjusting Blog Widths
  • Using a Custom Domain or Subdomain for Blogger address
  • Creating the Blog Header
  • Ever Care Pool and Spa
  • Creating a Favicon
  • Oxnard Lemon Company
  • Coastal California Blueberry Farms, LLC.

Facebook

Followers

Subscribe To Blog

Posts
Atom
Posts
Comments
Atom
Comments