Blogpowered: Header Customization

Showing posts with label Header Customization. Show all posts

Cool header background images for your blog

I made some header images for your blog, You may download them if you like and make your header background. If you dont know if the background images here are larger or smaller than your header wrappper, see this post- Knowing the width of your header wrapper.

Here are some Cool header background images!

Dimensions
(1000x150 headers)

Aqua Blue
Download

Butterflies
Download

Forest
Download

Gothic
Download

Pink Rose
Download

Red Spiral Frame
Download

Dimensions
(600x136 headers)

Download

Cool Fonts for your header

Recently, i found a great site that provides free fonts - www.dafont.com. They have a wide selection of font themes like western, basic, gothic and etc. If your making an image header, you may want to download some cool background image. Here are some font samples from dafont.com.

By Fontalicious
Download

by dafont.com
Download

by StereoType
Download

by Jonathan Paquette
Download

by Paul Lloyd
Download

More cool fonts at www.dafont.com

Blogger Hacks: Hide blog title and description

Blog title and description is very important in every blog. Search engines when indexing your blog use the title and description tags. But sometimes, there is a need of hiding them especially when you are using a header image. So here are two ways in doing this.

1st Option
This option is only applicable if your going to put a solid header image that will completely hide your title and description.

1. Go to "Page Elements" under the layout tab.

2. Click "Edit" on the title page element usually found BELOW the navbar page element on the top.

3. Upload your header image if haven't done it already and click on the radio button "behind title and description" under placement.

4. Save changes and view your blog.
Note: If this option doesn't work for you. You may use the 2nd option below.

2nd Option

1. Go to edit HTML under Layout and locate the following code:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
display:none; /*<---Hiding blog title and description*/
}

2. Insert the line colored in red as seen above.

3. Save Template. Done!

Knowing the width of your header wrapper

If your going to put a header image or background for your blog, It is very important to know the width of your header wrapper. For best results and 0% errors, match the width of your header wrapper and the image that your going to upload. For those bloggers who don't know where the size of their header wrapper, ill show you where you will find it.

Just go to edit HTML under layout tab and locate the lines below:
(from default minima template)

#header -wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

As you can see, the width is 660px. You can change it if you like depends upon you. If you have fixed width for your wrapper, you make the necessary changes on your header image/background or vice versa.

Blogger Hacks:How to remove borders in header

There is a simple hack to remove borders in your header image. Borderless headers will make your blog clean and will help blend your header well with your template. So here's how to do it.

Removing borders form image:

1. Go to edit HTML under layout tab.

2. Search for the this line: #header

3. Change the value of border to 0.

#header {

margin:5px;
border:0px;
text-align:center;
color:#000000;

}

Done!

Blogger Hacks: Making a header image for your blog

*Finding the width of the header
Before creating a header image, we need to know the width of the header section in the existing Blogger template. This prevents the header image from being clipped or malformed when it appears in the completed design. To find the width the header image should be, go to Layout>Edit HTML in your Blogger dashboard, and look for the following line:

#header -wrapper {
Just below this line, you should see the CSS statement for the overall width
of the header. In the default Minima template, this appears as follows:
#header -wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

From this information, I know I need to make my header image 660 pixels wide. This may differ for your own template, so be sure to check the width of the header wrapper in your template code to be sure you have the correct width. The height of your completed header image does not matter. You can make this as tall or as short as you like, though I would advise that header images taller than 300px to ensure you can still see some content “above the fold”.

*Making your header image

Those of you who are experienced with image creation and editing may now be racing off to create their very own unique header image using their header dimensions. For those of you who are not so familiar with CorelDraw or Photoshop, an alternative would be to use a free header banner and adapt this to your needs. In the example above, I downloaded a free vector header from BittBox3 and resized this to

660px wide using GiMP (a free image program similar to Photoshop, but without the price tag!). Here is the resulting image:

For this "cheats' guide", I would advise you to add your blog's title or logo into your header image. This is because there may be problems when using your image as a background behind the title and description which require more customization than can be explained in a simple guide.

Again using GiMP, I added some text to my header image6. Here is the finished result, which I had saved in GIF format:

*Adding your header image to your blog

This quick method of creating a blog header is the simplest one of all. Just go to Template>Page Elements in your Blogger dashboard, and click on the Header widget near the top of the page.

On the popup screen, you will see options for using your own header image. Select the radio button to upload an image from your computer and locate this using the "browse" button. Then check the radio selection which says "Use instead of title and description. Finally save your settings. Using this method, your image will be hosted by Blogger, and will appear instead of your regular title and description, like this:

Note: in the Minima Template there is a glitch in the CSS which can make the header appear slightly misaligned. This is easily solved by changing the margin of the #header statement from this: