Add Background Picture to Header in CSS.

In Blogger you can directly upload a picture to the Blog Header. A few bloggers have been reporting problems with this method. Hence here is the old method brushed up for use with Classic or Layouts Template........

REMOVE HEADER PICTURE

The first step is to remove the old picture. Sometimes the picture refuses to get removed. Then the first remedy is to clear the cache. Always use Firefox browser for optimum logging experience.


If clearing the cache does not help login at Blogger.com and click 'Layout' link on Dashboard. On Page Elements subtab click 'Edit Html' subtab at top. In Template Code box scroll down to this code :

 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>

Change this to :

 <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='My Blog (Header)' type='Header'/>

Save Template. Switch to Page Elements tab. Click Edit link in the Blog Title widget. In popup window click Remove button.


Then click 'Add Page Element' link in the header. In pop up window choose 'Page Header' widget and choose the options and save. Here in the options you can add a new image or you can add it as in the next step.

ADD PICTURE AS BACKGROUND

If you want to add a picture that can be easily removed you can add it as a background in the CSS part of the template.



First create your header picture and upload it to Googlepages or Photobucket.com and copy down it's link. Make sure that the width of the picture is the same as that of the header-wrapper. (See code in next step for width of header-wrapper) If the width is not the same the picture will protrude out on one side.


Then login at Blogger.com and click 'Layout' link on Dashboard. On Page Elements subtab click 'Edit Html' subtab at top. In Template Code box scroll down to this code :

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background:url(LINK_OF_PICTURE) no-repeat;
height:200px;
}

Add the background line as shown above. Replace 'LINK_OF_PICTURE' with actual link of your uploaded picture. Change the '200px' in the height line to the actual height of the picture. Save Template. Clear Cache and view blog.


The Blog Title and description will be shown on top of the picture. If you wish you can hide the Blog title and description to show only the picture.

Frame the Blog Header Image.

The Image you load in the Blog Header serves as a branding image for your blog. It is hence important that it should be loaded correctly and positioned properly at the top of your blog. Viewers will recall your blog better if you have a striking blog header image at the top.


Recently many bloggers had complained about their header images shrinking. Blogger has introduced a fix which resizes every image after upload and centers it at the top of the blog.


Framing the Blog Header Image gives a striking result like this :



In this post we will see how to frame your blog header image by modifying the code in the CSS part of the template...........

THE BOX MODEL

To understand the framing technique it is essential to understand how the web page is divided into elements. These elements are like boxes each nested within the other. The innermost box has the content which we upload. See picture below :

What you type in your blog or whatever you upload like images or videos comes to lie within the innemost CONTENT box. This box has a PADDING and a BORDER. Outside the box is the MARGIN area which separates it from the adjoining element.


The width, color and size of each of these areas is described in the CSS part of the template at the top. The blog header image part of your blog is made up of (See Picture below) :


:

1. The Header-wrapper (black).

2. The Header (red).

3. The Header-Inner (silver).

4. The Header Image (yellow with green border)

5. The Image Itself.

These are four boxes which are nested within each other. The innermost box contains the Image.

MODIFYING THE TEMPLATE

To modify the header image you have to alter the code within the template. For this login at Blogger.com and click on 'Layout' link on Dashboard. The Page Elements subtab will open. Click on the Edit Html subtab of Template tab at the top. First backup template to PC by clicking the Download Full Template link on the Edit Html subtab. Now if any error occurs you can reload original template from backup.



Next in the Template code box scroll down to this code :

/* Header
-----------------------------------------------
*/

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

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
...........

#header img {
margin-left: auto;
margin-right: auto;
}


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}


The above code is for the Minima Template. Your code may differ slightly depending on which template you are using. The first step is to get rid of the original borders for the header. In the header-wrapper and the header section modify the following line :

border: 1px solid $bordercolor;

Change "1px" in the above line to "0px" and save the template.

YELLOW BORDER

To add a yellow border a la National Geographic Magazine modify the header image code to look like this :

#header img {
border: 2px solid #000000;
padding:15px;
background:gold;
margin-$startSide: auto;
margin-$endSide: auto;
}

Save Template. This will look like the picture below :

MULTIPLE FRAMES

To give multiple frames to your image use the following code :

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:750px;
border: 10px solid #000000;
margin:0 auto 10px;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
border: 10px solid #FFD700;
text-align: center;
color:$pagetitlecolor;
}

............

#header img {
border: 30px solid #008b8b;
padding:5px;
background: #4f4835;
margin-$startSide: auto;
margin-$endSide: auto;
}


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Preview and save template. This will look like this :


Note that the width line in the outer-wrapper and the header-wrapper has been increased from the original 660px to accomodate the increase in padding.

THREE BORDERS

To have three borders use this code :


#header img {
border: 20px solid #ffd700;
padding:5px;
background: #4f4835;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
border: 5px solid #000;
text-align: center;
color:$pagetitlecolor;
}

This will show up like this :

The image has a 20px yellow border with a blackish background. The header has a black border.


To get the hex number of colors you can use Color Picker a free software from Iconnico.com



Experiment by increasing the padding and width parameters in the code above. Use Preview button to see effects like this :

Honey, Blogger Shrunk my Header!

Recently many bloggers have found their Blogger Header image shrunk down or in some cases disappeared altogether. While the Blogger Team is on the case and working out a fix here is a working solution.



Previously the methods used to put images in the header varied from putting a picture page element in the header to adding a picture URL in the CSS code for the header. Since Blogger introduced the direct image upload to header which makes use of a separate class to house the header image we have to use the second method here.............

REMOVE THE ORIGINAL IMAGE

The first step is to remove your shrunk image. For this login at Blogger.com and click on Layout link on the Dashboard. On the Page Elements tab which opens click the Edit link on the Blog Header widget. In the popup window remove the image and save.

UPLOAD IMAGE OR GET IT'S LINK

Upload your image to a free host like Photobucket.com or Googlepages and copy down it's link. You can also upload to a Blogger post but extracting the image link is tedious and not recommended as there are more chances of getting errors.

MODIFY THE CSS CODE

The last step is to modify the CSS code in your template. For this login at Blogger.com and click on Layout link on Dashboard. Then click on Edit Html subtab of Template tab. Scroll down in template code box to this code :

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

Add the following lines to it :

background-image:url(LINK_OF_IMAGE);
background-repeat:no-repeat;
height:300px;

So that it looks like this :

#header-inner {
background-position: center;
background-image:url(LINK_OF_IMAGE);
background-repeat:no-repeat;
height:300px;
margin-left: auto;
margin-right: auto;
}

Replace LINK_OF_IMAGE with actual link of your uploaded image. Click on Preview button at bottom of Template box to increase the height from '300' if necessary. If full width of picture is not seen add the width line below the height line in the above code like this :

width:400px;

Again use Preview to see and adjust the width. Save Template. Clear the cache and view Blog.

IF YOU HAVE A 'STRETCH' TEMPLATE

If you have a stretch template use this code :


#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
width:XXXpx;
height:YYYpx;
}


Change XXX and YYY to the width and height respectively, in pixels, of your image.


Enjoy!

How to Hide Blog Title, Description.

Your blog title and description is very important for search optimization. Search engines when indexing your blog use the title and description tags. Hence these are indispensable fields.


However sometimes you may require to hide your Blog Title and description. The new option to upload images to Blogger Header gives you one option to do this while uploading an image to your header. If you are adding a picture to the background of the header then you do not have this option. Here is another method.........

HIDE BLOG TITLE

To do this login at Blogger.com and click on Layouts link on Dashboard. Then click on Edit Html subtab of Template tab. First backup your template. Then scroll down to this code :

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: normal normal 200% Georgia, Serif;
display:none; /*<---Insert this line*/
}


Insert the "display:none;" line in the code for the header as shown above. Click Preview button to see the effect. Save Template. Clear Cache. View Blog.

HIDE BLOG DESCRIPTION

To hide the blog description scroll down to this code in the blog template :

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: #999999;
display:none; /*<---Insert this line*/
}


Insert the "display:none;" line in the code for the header as shown above. Click Preview button to see the effect. Save Template. Clear Cache. View Blog.

Enjoy!

Header Picture to Left, Title Description to Right in Header.

Ever since Blogger introduced uploading of pictures to the header through the Header Page element bloggers have been struggling with the arrangement of the picture in the header. In the upload dialog box Blogger gives the option of arranging the picture behind the Title and Description or in front of it.


However after the picture has uploaded there is a problem in centering it. One solution is to resize the picture width to match the width of the header-wrapper. This works for templates in which the whole blog occupies the middle of the screen. But for the STRETCH templates there is another solution.


Also many bloggers want an arrangement in the header so that the picture is on the left and the Title and description is on the right. One way to do this is to use tables to customize the header and another way is...............

CENTER HEADER IMAGE

To upload image or picture to blog header you must first have the picture file ready on your PC. You can create this in an image editor, at an online header generator site or download it from a free clipart/graphics site. Just Google to find them.


Login at Blogger.com and click on Layout link on Dashboard. On the Page Elements tab which opens click the 'Edit' link in the header widget. Click 'Browse' button to select the picture file on your PC. Click Upload after choosing to have it in front of the title or behind it.


Then after image is successfully uploaded click on Edit Html subtab of Template tab. Put a check in the check box to expand widgets templates at the top of the template box. Scroll down to the header widget code in the body of the template. You will see that the image code lies within a special div :

<div id='header-inner'>

The image will appear like below :


To center this image in a STRETCH template like the Sand Dollar Template or the Stretch Denim Template you have to add this code to the CSS Part of the template :


#header-inner {
width:770px;
margin:0 auto;
}

Give it the width of your image and Preview and then Save Template. Clear Cache and View Blog. You will see the image centered like this :

IMAGE TO LEFT and TITLE TO RIGHT

To add a Logo Image to the left or right of the header with the title and description occupying the rest you have to upload an image smaller than the width of your header. If it is not a STRETCH template the width of the header can be found by looking at the CSS code for the outer-wrapper. For this go to Edit Html subtab of Template tab and scroll down to :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Here the width is 660 px in a Minima template. So select an image which is about 300 px in width or less and upload it to your header. Choose to position it behind the title and Description. Then switch to Edit Html subtab of Template tab and put a check in the Expand widgets template check box to show the full header code. To shift the image to the left change this code :

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

TO THIS :

#header-inner {
background-position: left;
width:650px;
}

Then to change the position of the title to the right change this code :

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

TO THIS CODE :

#header h1 {
margin:0 5px 5px 300px; <-----Change last number
............
}


The 300 px is the left margin and you can increase this number to push title away from left margin. Use the Preview button to adjust the position. To push the description away from the left margin change this code :

#header .description {
margin:0 5px 5px;
.........
}

TO THIS CODE :

#header .description {
margin:0 5px 5px 500px; <-----Change last number
........
}


Again you can use the Preview button to adjust the exact position of your description. See the picture below of the new header with a sample logo/picture to the left and the title and description to the right :



Have Fun!

Picture In Blogger Header | Update.

Blogger has now introduced an easier way to put a picture in the Blog Header. Previously you had to either put in an image widget inside the header or put the link to the picture as a background property in the CSS for the header-wrapper. This required more manipulation of the template at the coding level. Instead now you can do this in the graphical interface of the Blogger Layouts............

The new Blogger introduced the graphical interface for editing your template. Instead of going into Template------>Edit Html as in old Blogger it introduced a 'Layout' link on the Dashboard itself. So all you have to do is to login to dashboard and click on Layout link and you will be taken straight to the Page Elements tab.


The Page Elements tab is a new subtab of the Templates tab where you can add new page elements. There are some 14 types of Page Elements which you can add to various sections of your blog.

BLOG SECTIONS

Your blog is divided into the following sections :

1. Header.

2. The Sidebars.

3. The Body/Blog Posts.

4. The Footer.

PAGE ELEMENTS

You can place as any Page Elements as you like in the above sections depending on screen space. Todate the various types of Page Elements are :


1. Newsreel (New!)
Automatically add current headlines from Google News to your blog.




2. Video Bar (New!)
Display clips from YouTube and Google Video for your readers to watch without leaving the page.




3. List
Add a list of your favorite books, movies, or anything you like.





4. Link List
Add a collection of your favorite sites, blogs, or web pages.




5. Picture
Add a picture from your computer or from somewhere else on the web.




6. Text
Add some words to your blog - like a welcome message - with our rich text editor.




7. HTML/JavaScript
Add third-party functionality or other code to your blog.




8. AdSense
Earn revenue by displaying relevant ads on your blog.




9. Feed
Add content from a site feed to your blog.




10. Labels
Show all the labels of posts in your blog.




11. Logo
Choose from a variety of Blogger logos to add to your page.




12. Profile
Display information about yourself.




13. Blog Archive
Display links to older posts.




14. Page Header
Display your blog's title and description.



Blogger may add more to this list from time to time. Whenever you wish to add something to your blog you just have to decide what type of Page element it is and choose that option. In general if you cannot think of an option just choose the Html/Javascript Page Element and paste your code in it.



NOTE : When you upload a new template to your blog the code for the Page Elements is added but they are empty and you have to add the data later. Also when you backup the template the content in the page elements is not saved along with the template. You have to backup the Page Elements data separately.

IMAGE IN HEADER

The new addition in the header page element makes it easy for you to add picture to your header. Login to dashboard and click on Layout. Then click Edit link in header and you will get the various options. Click Browse to load a picture from your computer and then Upload. You can even choose to put the picture in the background of the Title or show just the picture. See picture below :

PICTURE IN HEADER SERIES

Add Picture to Header.

How To Customize Header.

Fixed Headers in Blogger.

Clickable Headers in Blogger.

Header for Dots Template.

Many Headers - One Blog.

Flash in Header.

Animated Gif In Header.

3-D Banner In Header.

Adsense Link Unit In Header.

Remove Title in Header.


You can watch a screencast on adding an image to the Blogger header at Blogger Buzz: Learn how to add an image to your blog's header

Clickable Headers for New Blogger.

Ye Olde Blogger had clickable headers which enabled viewers to return to the main page simply by clicking on the headers on any of the post pages. The New Blogger seems to have done away with this function by substituting navigation links at the bottom of each post. However the clickable header can be implemented in......

two different ways in the New Blogger. You can have a title which is clickable or an image/picture in the header which is clickable and returns you to the home page.

CLICKABLE TITLE

To enable a title to be clickable first you will have to delete the title and description widget in the header and then add a Blog Title and Description in a Html/Javascript widget. First we will add an extra Page Element to the header as shown in How to add Picture to header. Log in to Blogger Beta---->In Dashboard choose your blog and click on Layout------>This takes you to the Add and Arrange Page Elements page------->Click on 'Edit Html' Tab to open the Edit Template page. Let Expand widget templates box be unchecked. In Edit template field scroll down till you come to the code for the header which is :

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="false" title="The Widgets of Beta Blogger. (Header)" type="Header">
</b:widget>
</b:section></div>

In the above code change maxwidgets="1" to maxwidgets="3"
Also change showaddelement="no" to showaddelement="yes"
Save Template.


Now click Page Elements tab. The Add and arrange Page Elements page opens.
Here you can now see that header section has a Add Element link. Click it to open the choices page. Choose Html/Javascript option. In the contents section paste the following code :

<a href="URL OF YOUR BLOG" target="_blank"><font size="7" face="Georgia, Arial" color="maroon">TITLE OF BLOG</font> </a>

Replace the CAPS with the appropriate values for your blog. This will look like this :

TITLE OF BLOG

To customize it further change the font-size, color and font to whatever you want. Then save the widget.

REMOVE TITLE WIDGET

To remove the title widget go back to Page Elements and click on Edit link in the Title box. In the popup window which appears click 'Remove'. If there is no Edit link in Title box then go to edit Html subtab and scroll down in Edit Template text box till you come to :

<b:widget id="Header1" locked="true" title="The Widgets of Beta Blogger. (Header)" type="Header">

In above code change locked='true' to locked='false' and save template. Go to page Elements subtab and now there will be an Edit link in the Title box and a Remove link after clicking on Edit. Click on the Edit link and then on the Remove link.

CLICKABLE PICTURE IN HEADER

To add a clickable picture in header repeat the step to add a page element in header as described in first paragraph and then click ob Add Page Element link in header. Choose Picture type.

SEARCH ENGINE OPTIMIZATION For better SEO Choose Html/Javascript Page Element. Then in the content box paste the code for the link to your uploaded picture : <a title="YOUR BLOG TITLE" href="BLOG URL" target="_blank" ><img src="URL OF YOUR BANNER AT GOOGLEPAGES" alt="YOUR BLOG TITLE"></a> and Save.

Click add to blog. In the content page that opens paste the URL of the picture you have saved at Googlepages in the URL text box. Save changes. View Blog. Enjoy. Also see How to insert a Banner Link to your blog in your posts.

Technorati Tags:blog header, blogger hacks, picture in header