Showing posts with label Header Tutorials. Show all posts
Showing posts with label Header Tutorials. Show all posts
Random Header and Background Images
A reader CeElle asked how the Header banner and Blogger background picture can be rotated so that they show a different image every time the page is refreshed or reloaded. While we could use the format of a slide show, the timing of rotation would be fixed. We think we have a simple enough JavaScript that randomly calls for a new Header banner or Blog background image whenever the Blog is refreshed. This is useful if you have several background pictures which are suitable for your Blog and you want to showcase all of them.
Rotating Header Image
Just to be sure, this article is about randomly displaying different Header images upon every refresh of the page. If your intention is to have a fixed background image for your Header, the other articles Background Image for Blogger Header (New) and Background image for Blogger Header will be more relevant. In that article, you will also read about creating images and using free photo editing software like Google's Picasa to resize and crop your pictures.
After creating your images, you will have to upload them onto a server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. After uploading the pictures, take note of the Image URLs.
Login to your Dashboard. Go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. The javascript to insert is this:-
Explanatory notes:-
1. The Image01URL to Image10URL are the links to the images that are hosted on the image server. Please insert the full URL beginning with http://
2. This uses a Math object javascript. The random() code will give a random number between 0 and 1. This number is multiplied by 10 and the floor code rounds the number downwards to the nearest integer, giving a value between 0 and 9. At every pageload, the script will display one of the banners from banner[0] to banner[9].
3. The above example assumes you have 10 different images to display. If you have fewer pictures, say 5 pictures, delete banner[5] to banner[9] and amend the number (in red) to 5. If you have more images, you may add banner[10] up to whatever number of images you have, and amend the number (in red) accordingly.
Rotating Background Image
Again, if you have only 1 image for your Blog background, you can insert the image into your template using the guide in this tutorial Background Image for Blogger Template.
If you have more than 1 background image that you want to use, the steps for having the random background images upon each page refresh are about the same as above. Create the images, host them on a free server, and take note of the Image URLs. Next, login to your Dashboard. Go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. The javascript to insert is this:-
Explanatory notes:-
In addition to what we discussed above relating to rotating Header images, the position of the background image is important. Please change the attributes (in purple) to suit your requirements. For instance, if you have a small tile or image that you want to use to form a patterned background, insert the “repeat” attribute given in the above sample. If you have a big picture that covers the entire blog and you want the picture to be fixed, you may change the “repeat” to “no-repeat fixed”. For a more detailed explanation on the attributes, please refer to Background Image for Blogger Template.
Rotating Header Image
Just to be sure, this article is about randomly displaying different Header images upon every refresh of the page. If your intention is to have a fixed background image for your Header, the other articles Background Image for Blogger Header (New) and Background image for Blogger Header will be more relevant. In that article, you will also read about creating images and using free photo editing software like Google's Picasa to resize and crop your pictures.
After creating your images, you will have to upload them onto a server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. After uploading the pictures, take note of the Image URLs.
Login to your Dashboard. Go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. The javascript to insert is this:-
 |
|---|
Explanatory notes:-
1. The Image01URL to Image10URL are the links to the images that are hosted on the image server. Please insert the full URL beginning with http://
2. This uses a Math object javascript. The random() code will give a random number between 0 and 1. This number is multiplied by 10 and the floor code rounds the number downwards to the nearest integer, giving a value between 0 and 9. At every pageload, the script will display one of the banners from banner[0] to banner[9].
3. The above example assumes you have 10 different images to display. If you have fewer pictures, say 5 pictures, delete banner[5] to banner[9] and amend the number (in red) to 5. If you have more images, you may add banner[10] up to whatever number of images you have, and amend the number (in red) accordingly.
Rotating Background Image
Again, if you have only 1 image for your Blog background, you can insert the image into your template using the guide in this tutorial Background Image for Blogger Template.
If you have more than 1 background image that you want to use, the steps for having the random background images upon each page refresh are about the same as above. Create the images, host them on a free server, and take note of the Image URLs. Next, login to your Dashboard. Go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. The javascript to insert is this:-
 |
|---|
Explanatory notes:-
In addition to what we discussed above relating to rotating Header images, the position of the background image is important. Please change the attributes (in purple) to suit your requirements. For instance, if you have a small tile or image that you want to use to form a patterned background, insert the “repeat” attribute given in the above sample. If you have a big picture that covers the entire blog and you want the picture to be fixed, you may change the “repeat” to “no-repeat fixed”. For a more detailed explanation on the attributes, please refer to Background Image for Blogger Template.
Horizontal Menu and Navigation Bar
Many web designs use horizontal menu bar and navigation lists which allow users to easily access the pertinent information in their website. While Blogger makes it simple for you to create a link list through their “Add a Page Element” function, the list is displayed vertically. We shall discuss how you can change that into a horizontal link list, and more specifically, use that as a navigation bar in your Header. We have also included some examples of how you can make the links dynamic by changing the colors, hover and background effects and customizing them to suit your Blog layout.
Before we proceed, it might be helpful for you to understand something about Numbered List and Bulleted List and the various attributes that can apply to the code.
Horizontal Link Lists
1. Apply to all link lists and label lists
If you want all the link lists and label lists in your sidebar to be displayed horizontally, go to Template -> Edit HTML and scroll to where you see this and insert the code (shown in red):-
In some templates, you may insert the code here:-
Preview the template. This is what you would see.
2. Apply to one specific list
Instead of having a style that applies to all the lists, you may want to have only one of the link lists appear horizontally. First, you need to create that list by going to Template -> Page Elements -> Add a Page Element. Choose “Link List”, add your items and save.
Now is the tricky part. You would have to locate that particular segment of the code where this list appears and find out the widget ID for that list.
For discussion purposes, let us assume that we want the link list titled “My Blogs” in our left sidebar to be displayed horizontally. We go to Template -> Edit HTML, and check the box that says “Expand Widget Templates.”
Next, we searched (Ctrl-F) for “My Blogs” and found this section:-
From here, we know that this link list has been assigned an ID LinkList2. To define a style, we went to the /* Sidebar Content */ portion of our template and included this code (Note: the code can be inserted into any part of the section but for ease of reference we have inserted it here):-
This is what we got:-
Only this list is displayed horizontally. The other lists are not affected. If you want this style for the labels, do the same. Locate the widget ID which is likely to be id='Label1' or id='Label2' and then insert the code:-
Text Link Menu Navigation Bars
With this basic understanding of how the “display:inline” code works, let us now combine this with hover and link effects to customize our very own horizontal navigation bar. Again, if you are truly keen to do something unique for your Blog, peruse the discussion in Links Hover and Rollover Effects to understand the different styles that can be used to make the links more dynamic.
1. Simple Navigation Bar
We want a row of text links pointing users to certain important parts of the Blog. The links blend into the Header and will look like this:-
In Template ->Edit HTML, insert this style definition under /* Header */:-
Other than the display:inline style, the other variables can be changed. You can have a larger or smaller font. The margin and padding set the space in between the words and can be changed. If you want a border around the word, set the border value to at least 1px.
Scroll further down the template and check if you see this:-
If the number of maxwidgets is set to “1”, change it to “3”. If the showaddelement is “no”, change it to “yes”.
Save the template. We shall now create the list. Go to Template -> Page Elements -> Add a Page Element and choose to add HTML/JavaScript in your Header. The link list code you can add is as follows:-
Insert the relevant words and URL links into the above example. If you want to link to a label, click the label in your sidebar to obtain the URL for insertion into the code (shown in blue). The URL should look like this:-
This link widget can be moved about. Try placing it below the Header and then above the Blog posts to see the difference in the layout. Preview the template and save it if you like the new horizontal navigation bar position.
2. Adding Link and Hover Effects
We have now a simple horizontal navigation list. Let us make it visually attractive and distinguish these links from the other links in your Blog. This is done by introducing the hover and rollover effects. For example, in addition to the above code we added into the template, we can have these as well:-
In this example, the links are light green in color, visited links turn into bright green and when you hover your mouse over the link, the text is orange with a yellow background. Try changing to different set of color combination by inserting the appropriate color codes.
The resulting navigation bar will be this:-
3. Menu Bar below Header
As mentioned, the horizontal Navbar can be in the Header or aligned just above the Blog Posts. There is yet another position where you can place it, i.e., below the Header and above the Blog posts and sidebars. In the new Blogger templates, you should see this:-
Change the showaddelement from “no” to “yes”. In Template -> Page Elements, you should be able to see an additional slot between the Header and the Blog posts where you can insert Page Elements.
Image Link Menu Navigation Bars
1. Simple Navigation Bar
If text links are still too unexciting for you, try having image links instead. Do up some small little images to represent the different parts of your Blog that visitors can go to. You can search the net for free downloadable images, create new ones, or edit and resize current ones with image editors like Picasa. Once you have these images, host them on a free image server and take note of the image URLs.
The modification to the template is similar to that of text links. In Template ->Edit HTML, insert this style definition:-
The space in between the pictures (padding) may be changed depending on the number of images and the size of each image.
To add the horizontal row of navigation image links, go to Template -> Page Elements -> Add a Page Element and choose to add HTML/JavaScript in your Header. The image link list code you can add is as follows:-
The portions of the code in blue are the addresses where you want the users to be directed to. The parts in red are where your images are hosted on an image server.
This is how the neat horizontal picture navigation bar can look:-
2. Adding Link and Hover Effects
We can throw in some effects into the picture links. Just to give you an example, we added this hover links code in addition to the above:-
What we had done was to fix the navigation bar image link size at 30px by 30px. There is no border around the image. When the mouse cursor hovers over the image link, the image is enlarged to 40px by 40px with a yellow background. Any visited links will have a grey background behind the image.
While this looks interesting to have, do note that any change in image size also affects the surrounding text alignment. You can reverse it. Change the hover and image sizes to smaller values so that the images 'shrink' when the mouse hovers over them.
Update:
Navigation Bar within Header Image
A number of us have uploaded background images into the Blogger Header. After adding a Text Link or Image Link menu bar, you may notice that it is positioned either on top or below the Header image. You may have designed the image with a space reserved for the Navbar, either at the top, bottom or to the side. To adjust the position of the Navigation Bar and have it within the Header Image, refer to our article Add Navigation Bar in Header Image.
There are numerous dynamic styles that you can try. If you have followed our guides, you would at the least have an idea how you can tailor-make yours. This is an introductory article. We may follow up with another one on multi-level tabs.
In designing your layout, avoid having too many gimmicks. Stick to one or two nice hover effects and if you'd like, change the color scheme every few months so as not to bore your regular readers. Go ahead, try it and have fun creating your own Navigation bar!
Before we proceed, it might be helpful for you to understand something about Numbered List and Bulleted List and the various attributes that can apply to the code.
Horizontal Link Lists
1. Apply to all link lists and label lists
If you want all the link lists and label lists in your sidebar to be displayed horizontally, go to Template -> Edit HTML and scroll to where you see this and insert the code (shown in red):-
.sidebar ul { display:inline; } .sidebar li{ display:inline; } |
|---|
In some templates, you may insert the code here:-
.sidebar ul li { display:inline; } |
|---|
Preview the template. This is what you would see.
2. Apply to one specific list
Instead of having a style that applies to all the lists, you may want to have only one of the link lists appear horizontally. First, you need to create that list by going to Template -> Page Elements -> Add a Page Element. Choose “Link List”, add your items and save.
Now is the tricky part. You would have to locate that particular segment of the code where this list appears and find out the widget ID for that list.
For discussion purposes, let us assume that we want the link list titled “My Blogs” in our left sidebar to be displayed horizontally. We go to Template -> Edit HTML, and check the box that says “Expand Widget Templates.”
Next, we searched (Ctrl-F) for “My Blogs” and found this section:-
From here, we know that this link list has been assigned an ID LinkList2. To define a style, we went to the /* Sidebar Content */ portion of our template and included this code (Note: the code can be inserted into any part of the section but for ease of reference we have inserted it here):-
/* Sidebar Content */ #LinkList2 li{ display:inline; } |
|---|
This is what we got:-
Only this list is displayed horizontally. The other lists are not affected. If you want this style for the labels, do the same. Locate the widget ID which is likely to be id='Label1' or id='Label2' and then insert the code:-
/* Sidebar Content */ #Label1 li{ display:inline; } |
|---|
Text Link Menu Navigation Bars
With this basic understanding of how the “display:inline” code works, let us now combine this with hover and link effects to customize our very own horizontal navigation bar. Again, if you are truly keen to do something unique for your Blog, peruse the discussion in Links Hover and Rollover Effects to understand the different styles that can be used to make the links more dynamic.
1. Simple Navigation Bar
We want a row of text links pointing users to certain important parts of the Blog. The links blend into the Header and will look like this:-
In Template ->Edit HTML, insert this style definition under /* Header */:-/* Header */ #newnavbar ul li{ font-size:100%; list-style-type: none; display:inline; padding:0px; margin:10px; border:0px solid; } |
|---|
Other than the display:inline style, the other variables can be changed. You can have a larger or smaller font. The margin and padding set the space in between the words and can be changed. If you want a border around the word, set the border value to at least 1px.
Scroll further down the template and check if you see this:-
If the number of maxwidgets is set to “1”, change it to “3”. If the showaddelement is “no”, change it to “yes”.
Save the template. We shall now create the list. Go to Template -> Page Elements -> Add a Page Element and choose to add HTML/JavaScript in your Header. The link list code you can add is as follows:-
Insert the relevant words and URL links into the above example. If you want to link to a label, click the label in your sidebar to obtain the URL for insertion into the code (shown in blue). The URL should look like this:-
This link widget can be moved about. Try placing it below the Header and then above the Blog posts to see the difference in the layout. Preview the template and save it if you like the new horizontal navigation bar position.
2. Adding Link and Hover Effects
We have now a simple horizontal navigation list. Let us make it visually attractive and distinguish these links from the other links in your Blog. This is done by introducing the hover and rollover effects. For example, in addition to the above code we added into the template, we can have these as well:-
/* Header */ #newnavbar ul li{ font-size:100%; list-style-type: none; display:inline; padding:0px; margin:10px; border:0px solid; } #newnavbar li a{ color:#dfffed; } #newnavbar li a:visited { color: #57E964; } #newnavbar li a:hover { color: #F88017; background: #ffff66; } |
|---|
In this example, the links are light green in color, visited links turn into bright green and when you hover your mouse over the link, the text is orange with a yellow background. Try changing to different set of color combination by inserting the appropriate color codes.
The resulting navigation bar will be this:-
3. Menu Bar below HeaderAs mentioned, the horizontal Navbar can be in the Header or aligned just above the Blog Posts. There is yet another position where you can place it, i.e., below the Header and above the Blog posts and sidebars. In the new Blogger templates, you should see this:-
Change the showaddelement from “no” to “yes”. In Template -> Page Elements, you should be able to see an additional slot between the Header and the Blog posts where you can insert Page Elements.
Image Link Menu Navigation Bars
1. Simple Navigation Bar
If text links are still too unexciting for you, try having image links instead. Do up some small little images to represent the different parts of your Blog that visitors can go to. You can search the net for free downloadable images, create new ones, or edit and resize current ones with image editors like Picasa. Once you have these images, host them on a free image server and take note of the image URLs.
The modification to the template is similar to that of text links. In Template ->Edit HTML, insert this style definition:-
/* Header */ #newnavbar ul li{ list-style-type: none; display:inline; margin:0px; padding:30px; border:0px solid; } |
|---|
The space in between the pictures (padding) may be changed depending on the number of images and the size of each image.
To add the horizontal row of navigation image links, go to Template -> Page Elements -> Add a Page Element and choose to add HTML/JavaScript in your Header. The image link list code you can add is as follows:-
The portions of the code in blue are the addresses where you want the users to be directed to. The parts in red are where your images are hosted on an image server.
This is how the neat horizontal picture navigation bar can look:-
2. Adding Link and Hover EffectsWe can throw in some effects into the picture links. Just to give you an example, we added this hover links code in addition to the above:-
/* Header */ #newnavbar ul li{ list-style-type: none; display:inline; margin:0px; padding:30px; border:0px solid; } #newnavbar li a img{ height:30px; width:30px; } #newnavbar li a:hover img{ height:40px; width:40px; background: #ffff66; } #newnavbar li a:visited img{ height:40px; width:40px; background: #6D7B8D; } |
|---|
What we had done was to fix the navigation bar image link size at 30px by 30px. There is no border around the image. When the mouse cursor hovers over the image link, the image is enlarged to 40px by 40px with a yellow background. Any visited links will have a grey background behind the image.
While this looks interesting to have, do note that any change in image size also affects the surrounding text alignment. You can reverse it. Change the hover and image sizes to smaller values so that the images 'shrink' when the mouse hovers over them.
Update:
Navigation Bar within Header Image
A number of us have uploaded background images into the Blogger Header. After adding a Text Link or Image Link menu bar, you may notice that it is positioned either on top or below the Header image. You may have designed the image with a space reserved for the Navbar, either at the top, bottom or to the side. To adjust the position of the Navigation Bar and have it within the Header Image, refer to our article Add Navigation Bar in Header Image.
There are numerous dynamic styles that you can try. If you have followed our guides, you would at the least have an idea how you can tailor-make yours. This is an introductory article. We may follow up with another one on multi-level tabs.
In designing your layout, avoid having too many gimmicks. Stick to one or two nice hover effects and if you'd like, change the color scheme every few months so as not to bore your regular readers. Go ahead, try it and have fun creating your own Navigation bar!
Header Image and Title Alignment (II)
We continue from where we left off at Header Image and Title Alignment (I). This guide is for those who have uploaded images into their Headers, and want to move the pictures to the center, left or right side of the Headers. In this tutorial, you will also learn how to adjust the margins for the Title and Description in the Headers. The first part of our article covered the Minima, Denim, Rounders, Herbert, Jellyfish, Harbor and Scribe templates. We shall in this part discuss the remaining Blogger templates and the changes that can be made to re-align the Header Title, Description and background images.
Dots Template
The layout is designed with the Title and Description on the left sidebar. The space is small and any movement of the title, description or image will not be significant. We shall therefore not elaborate on this template.
No. 897 and No. 565 Templates
These are also very unique templates which people use for the designs and layout. You should not be uploading any Header image as this will change the Header section entirely. At the most, you may move the Title and Description to the center with these codes (shown in red):-
You can change the alignment to a specific left margin to position the text at the preferred place with this:-
Thisaway Template
In the Thisaway templates, you will see the Title and Description on the left of the blog. You can move the Title to the center with this:-
You can specify a left-margin instead, to place the Title at the exact spot:-
The number can be negative, e.g., -30px. Likewise, you can set a left-margin to the Description by changing the margin to the alignment code (shown in red):-
An uploaded picture in the Header is aligned to the left. Move it to the center by inserting this code after /* headings*/
If you want the image further to the right, fix a left-margin instead of “auto”:-
You can also have the image all the way to the right side of the Header by setting the right margin to 0px:-
Son of Moto, Mr. Moto and Ms. Moto Templates
This set of templates have the Title and Description on the left. If you want them in the center of the Header, change the alignment code (shown in red):-
Similarly, if you want them on the right, change the “center” to “right”.
When we uploaded the image, it was to the left of the Header. We went to /* Header */, and inserted this code:-
The image will be positioned in the center of the Header. If you want the image to be more on the right, add a fixed value to the left margin instead of “auto”, for example:-
The picture can also be on the extreme right hand-side of the Header if the right margin is changed to 0px like this:-
Snapshot Template
This is again another template which people use for the background design. Uploading a Header image will change the Header entirely and it is inadvisable to do so. If at all, you can move the Title by centering it:-
or indicating a left-margin:-
TicTac Template
Both the Title and Description are aligned towards the left of the Header. To move them to the center, scroll to this portion of the template and insert a text-alignment code (shown in red):-
Or specify a new left margin to put the Title and Description at a definite position:-
The TicTac Header background image has a fixed width of 847px x 240px. If you insert another Header picture bigger than say, 220px, you may see an ugly gap between the background image and the rest of the contents. Add a small picture if you'd like, one that can blend with the background. You can adjust the position of the additional image by scrolling to /*( header and site name )*/ and inserting this code under it:-
Adjust the left margin settings to position the uploaded Header image.
Tekka Template
Tekka is simple in design. There are two columns: the main blog posts on the left and the sidebar on the right. The Header is at the top of the left column. The Title is aligned to the left. If you want the Title in the center, insert this alignment code (shown in red):-
The Description is already in the center because of this definition in the stylesheet:-
For both the Title and Description, you can set a definite left margin instead of having them in the center. You can therefore have a fixed position for the Title, by changing the alignment to this:-
Dots Template
The layout is designed with the Title and Description on the left sidebar. The space is small and any movement of the title, description or image will not be significant. We shall therefore not elaborate on this template.
No. 897 and No. 565 Templates
These are also very unique templates which people use for the designs and layout. You should not be uploading any Header image as this will change the Header section entirely. At the most, you may move the Title and Description to the center with these codes (shown in red):-
#header h1 { text-align: center; #header .description { text-align: center; |
|---|
You can change the alignment to a specific left margin to position the text at the preferred place with this:-
#header h1 { margin-left: 50px; |
|---|
Thisaway Template
In the Thisaway templates, you will see the Title and Description on the left of the blog. You can move the Title to the center with this:-
#header h1 { text-align: center; |
|---|
You can specify a left-margin instead, to place the Title at the exact spot:-
#header h1 { margin-left: 220px; |
|---|
The number can be negative, e.g., -30px. Likewise, you can set a left-margin to the Description by changing the margin to the alignment code (shown in red):-
#header .description { margin-left: 220px; |
|---|
An uploaded picture in the Header is aligned to the left. Move it to the center by inserting this code after /* headings*/#header-inner { background-position: center; margin-left: auto; margin-right: auto; } |
|---|
If you want the image further to the right, fix a left-margin instead of “auto”:-
margin-left: 200px; |
|---|
You can also have the image all the way to the right side of the Header by setting the right margin to 0px:-
margin-left: auto; margin-right: 0px; |
|---|
Son of Moto, Mr. Moto and Ms. Moto Templates
This set of templates have the Title and Description on the left. If you want them in the center of the Header, change the alignment code (shown in red):-
#header h1 { text-align: center; #header .description { text-align: center; |
|---|
Similarly, if you want them on the right, change the “center” to “right”.
When we uploaded the image, it was to the left of the Header. We went to /* Header */, and inserted this code:-#header-inner { background-position: center; margin-left: auto; margin-right: auto; } |
|---|
The image will be positioned in the center of the Header. If you want the image to be more on the right, add a fixed value to the left margin instead of “auto”, for example:-
margin-left: 150px; |
|---|
The picture can also be on the extreme right hand-side of the Header if the right margin is changed to 0px like this:-
margin-left: auto; margin-right: 0px; |
|---|
Snapshot Template
This is again another template which people use for the background design. Uploading a Header image will change the Header entirely and it is inadvisable to do so. If at all, you can move the Title by centering it:-
#header h1 { text-align: center; |
|---|
or indicating a left-margin:-
#header h1 { margin-left: 250px; |
|---|
TicTac Template
Both the Title and Description are aligned towards the left of the Header. To move them to the center, scroll to this portion of the template and insert a text-alignment code (shown in red):-
#header { text-align: center; |
|---|
Or specify a new left margin to put the Title and Description at a definite position:-
#header { margin-left: 200px; |
|---|
The TicTac Header background image has a fixed width of 847px x 240px. If you insert another Header picture bigger than say, 220px, you may see an ugly gap between the background image and the rest of the contents. Add a small picture if you'd like, one that can blend with the background. You can adjust the position of the additional image by scrolling to /*( header and site name )*/ and inserting this code under it:-
#header-inner { background-position: center; margin-left: 120px; margin-right: auto; } |
|---|
Adjust the left margin settings to position the uploaded Header image.
Tekka Template
Tekka is simple in design. There are two columns: the main blog posts on the left and the sidebar on the right. The Header is at the top of the left column. The Title is aligned to the left. If you want the Title in the center, insert this alignment code (shown in red):-
h1 { text-align:center; |
|---|
The Description is already in the center because of this definition in the stylesheet:-
.description { text-align: center; |
|---|
For both the Title and Description, you can set a definite left margin instead of having them in the center. You can therefore have a fixed position for the Title, by changing the alignment to this:-
h1 { margin-left: 120px; |
|---|
An image uploaded into the Header will be at the top left corner of the page. Should you want the image centered above the Blog Posts, insert after a } sign this code:-#header-inner { background-position: center; margin-left: auto; margin-right: auto; } |
|---|
This positions the Header image in the center. You can control the exact alignment by changing the “auto” into a specific left margin, for example:-
margin-left: 120px; |
|---|
If you want the picture to be on the right side of the Header, set the right-margin to 0px:-
margin-left: auto; margin-right: 0px; |
|---|
Sand Dollar Template
In the Sand Dollar template, the Title and Description are aligned to the left. To move the Title to the center of the Header, go to this part of the template and add the alignment code (shown in red):-
h1 { text-align:center; |
|---|
Scroll further down and you can also move the Description to the center with this code:-
.description { text-align:center; |
|---|
Instead of centering them, you may also have a preset left-margin. For example, the Title can be fixed at a certain position with this code:-h1 { margin-left: 300px; |
|---|
An uploaded image in the Header is at the extreme left of the Header. To move the image to the center, add this code anywhere in the template after a } sign:-
#header-inner { background-position: center; margin-left: auto; margin-right: auto; } |
|---|
Similarly, you can specify a left margin by replacing the “auto” with a value, for example:-
margin-left: 300px; |
|---|
If you want the picture to be on the right side of the Header, set the right-margin to 0px:-
margin-left: auto; margin-right: 0px; |
|---|
Simple II
This is as the name suggests, a simple one column template, with no sidebars. The Title, Description and any image uploaded into the Header are automatically aligned to the left of the page. If you want the them to be in the center of the page, add this extra code (shown in red):-
#main .Header { text-align:center; } |
|---|
If you want more control over the exact position of the uploaded Header image, insert this code after a } sign:-
#header-inner { background-position: center; margin-left: 300px; margin-right: auto; } |
|---|
Change the left-margin value and preview the Blog. For the picture to be on the far right of the page, the values will be these:-
margin-left: auto; margin-right: 0px; |
|---|
Header Image and Title Alignment (I)
We created this Blog using the new beta Blogger template. At that time, there was no easy way to insert images into the Blogger Header. We had therefore written an article on inserting a Banner or Picture Link in the Blogger Header. Recently, Blogger introduced a new feature in their templates, allowing owners to upload pictures into their Blog Headers. This background image to the Blogger Header can either be behind the title and description, or be a substitute for the title and description. There have been a number of queries raised concerning the Header image alignment. In a number of cases, the pictures are either not centered, or cannot be moved to the left or right of the Header. For those who have been facing problems, we hope this article can help you have more control over the image position. We shall explain how we manage to move the Header images in the different types of Blogger templates.
We think the main problem is that while Blogger has inserted standard commands into their templates involving a new id='header-inner', this new id selector has not been defined in the stylesheets. What we did was to insert a style for 'header-inner' in these templates to fix the position of the Header background image. For completeness, we shall also discuss how the title and description can be centered or aligned to one side of the Header.
To clarify, if you have chosen to have the image appear “Behind the title and the description”, the title and description follows the image wherever it goes. Should you want the title on the left side of the Header and the image on the right side, the easiest way is for you create a wide image using an image editor, put in the title and save it as one composite image. In this way, the title and description are exactly where you want them to be. Upload that image onto your Header, and for the Placement, choose “Instead of title and description”. Alternatively, you can also use the other method discussed in our Banner or Picture Link article.
Remember to click “Preview” after changes are made to the template. Only after you are satisfied with the settings should you click “Save Template.”
Minima Template
In the Minima Template, the Title and Description are automatically aligned to the center. If you want them to be on the left of the Header, change the alignment code (shown in red):-
You can have them on the “right” too, instead of alignment to the “left” or “center”.
The Header image that is uploaded also stays in the center of the Header. If you want it to be further right for instance, scroll to these lines and change the “auto” in the left margin to a fixed width:-
For the image to be on the extreme right of the Header, you can change the right margin to 0px:-
Denim Template
The Denim Title and Description are on the left of the Header. To have the Header title in the center, insert the alignment code (shown in red):-
For the Description to be in the center, add the alignment code (in red):-
As for the Header image, it is aligned to the left. To move the image to the center or right, locate /* Header */ and paste this code under it.
Similarly, if you want the image to be closer to the right, insert a determined left margin instead of leaving it “auto”, like this:-
The image can also be on the far right of the Header if you set the right margin to 0px:-
Rounders Template
The Title and Description are automatically aligned to the left. You can have the Header Title in the center by adding this code (shown in red):-
For the Description to be in the center, you can insert the alignment code here:-
Should you want a particular position for the Title and Description, you can also set left margins instead, for e.g.,:-
The uploaded image in the Header is aligned to the left. You can have the image in the center by adding this under /* Blog Header */
To move the picture towards the right, change the “auto” in the left margin to a fixed value like this:-
You can have the image on the right by setting the right margin to 0px:-
Herbert and Jellyfish Templates
Both the Title and Description are by default on the left. If you want to shift them to the center of the Header, add this code (shown in red) to shift the Title:-
and the Description:-
We think the main problem is that while Blogger has inserted standard commands into their templates involving a new id='header-inner', this new id selector has not been defined in the stylesheets. What we did was to insert a style for 'header-inner' in these templates to fix the position of the Header background image. For completeness, we shall also discuss how the title and description can be centered or aligned to one side of the Header.
To clarify, if you have chosen to have the image appear “Behind the title and the description”, the title and description follows the image wherever it goes. Should you want the title on the left side of the Header and the image on the right side, the easiest way is for you create a wide image using an image editor, put in the title and save it as one composite image. In this way, the title and description are exactly where you want them to be. Upload that image onto your Header, and for the Placement, choose “Instead of title and description”. Alternatively, you can also use the other method discussed in our Banner or Picture Link article.
Remember to click “Preview” after changes are made to the template. Only after you are satisfied with the settings should you click “Save Template.”
Minima Template
In the Minima Template, the Title and Description are automatically aligned to the center. If you want them to be on the left of the Header, change the alignment code (shown in red):-
#header { text-align: left; |
|---|
You can have them on the “right” too, instead of alignment to the “left” or “center”.
The Header image that is uploaded also stays in the center of the Header. If you want it to be further right for instance, scroll to these lines and change the “auto” in the left margin to a fixed width:-
#header-inner { background-position: center; margin-left: 100px; margin-right: auto; } |
|---|
For the image to be on the extreme right of the Header, you can change the right margin to 0px:-
margin-left: auto; margin-right: 0px; |
|---|
Denim Template
The Denim Title and Description are on the left of the Header. To have the Header title in the center, insert the alignment code (shown in red):-
h1.title { text-align: center; |
|---|
For the Description to be in the center, add the alignment code (in red):-
#header .description { text-align: center; |
|---|
As for the Header image, it is aligned to the left. To move the image to the center or right, locate /* Header */ and paste this code under it.#header-inner { background-position: center; margin-left: auto; margin-right: auto; } |
|---|
Similarly, if you want the image to be closer to the right, insert a determined left margin instead of leaving it “auto”, like this:-
margin-left: 200px; |
|---|
The image can also be on the far right of the Header if you set the right margin to 0px:-
margin-left: auto; margin-right: 0px; |
|---|
Rounders Template
The Title and Description are automatically aligned to the left. You can have the Header Title in the center by adding this code (shown in red):-
#header h1 { text-align: center; |
|---|
For the Description to be in the center, you can insert the alignment code here:-
#header .description { text-align: center; |
|---|
Should you want a particular position for the Title and Description, you can also set left margins instead, for e.g.,:-
#header h1 { margin-left: 200px; |
|---|
The uploaded image in the Header is aligned to the left. You can have the image in the center by adding this under /* Blog Header */
#header-inner { background-position: center; margin-left: auto; margin-right: auto; } |
|---|
To move the picture towards the right, change the “auto” in the left margin to a fixed value like this:-
margin-left: 200px; |
|---|
You can have the image on the right by setting the right margin to 0px:-
margin-left: auto; margin-right: 0px; |
|---|
Herbert and Jellyfish Templates
Both the Title and Description are by default on the left. If you want to shift them to the center of the Header, add this code (shown in red) to shift the Title:-
h1 { text-align: center; |
|---|
and the Description:-
.description { text-align: center; |
|---|
When you upload the image using the Google feature, the image appears on the left of the Header. To move the image to the center, add this code anywhere in the Head portion immediately below a } sign:-
#header-inner { background-position: center; margin-left: auto; margin-right: auto; } |
|---|
Shift the picture towards the right by changing the “auto” in the left margin to a fixed number like this:-
margin-left: 400px; |
|---|
You can also have the image on the far right by setting the right margin to 0px:-
margin-left: auto; margin-right: 0px; |
|---|
Harbor Template
The Header Title and Description are somewhere on the left. If you'd like, move the Title to the center by adding this alignment code (shown in red):-
.Header h1 { text-align: center; |
|---|
Or move the Description to the center with this code:-
.Header .description { text-align: center; |
|---|
People use Harbor templates for the background design. We don't think you would want to upload any further pictures into the Header. Supposing you want to, the uploaded Header picture is towards the left. To have it in the center, you may have to adjust the left margins with this entire code inserted after /* Headings */
#header-inner { background-position: center; margin-left: 90px; margin-right: auto; } |
|---|
Change the left margin width and preview the template to see if the picture is where you want it to be.
Scribe Template
The Title and Description are on the left. If you want them in the center of the Header, locate this part in the template and insert the alignment code (shown in red):-
.Header { text-align: center; |
|---|
You can change the “center” to “right” if you want the text aligned on the right.
An image uploaded into the Header appears on the left. To get it to the center of the Scribe Header, insert this other code (shown in red):-
#header-inner { background-position: center; margin-left: auto; margin-right: auto; } .Header { text-align: center; } |
|---|
You would notice that there is a margin surrounding the picture so that the picture is aligned to the rest of the contents. You may have a situation like this, where your intention is to have the picture occupy the entire top part of the template.
It is a matter of playing with the margin settings. In this case, for instance, we want the image at the top and aligned to the left and we changed the margin settings to this:-
#header-inner { background-position: center; margin-left: -50px; margin-top: -35px; } |
|---|
You can use negative numbers (e.g., -50px). Try changing the values one at a time. Preview the blog to see if the image is where you want it to be before saving the template. The Header image can look neat and aligned like this:-
This article continues at Header Image and Title Alignment (II) which includes the steps to re-align the Header Title, Description and background images for the Dots, No. 897, No. 565, Thisaway, Moto, Snapshot, TicTac, Tekka, Sand Dollar and Simple II templates.
Change Blogger Header background color
To change the background color of the Header, first determine what color you would like to have. You may look at the HTML Color Chart for the colors you can experiment with. For example, if you have decided on a color code #B38481, go to Template and click “Edit HTML”. Scroll to the part where you see this:-
Add right after this an extra line:-
Save the template and refresh your Blog site. You may have to change the Header and description font colors. Simply go back to the “Fonts and Colors” tab, and change them accordingly.
Note that in different templates, instead of #header-wrapper, you may see #header-wrap or #header or #head. Try to insert the color code and preview the change. If there is a background color, you've probably got it right.
You may also read the related article to have a Background Image for Blogger Header.
#header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; |
|---|
Add right after this an extra line:-
background:#B38481; |
|---|
Save the template and refresh your Blog site. You may have to change the Header and description font colors. Simply go back to the “Fonts and Colors” tab, and change them accordingly.
Note that in different templates, instead of #header-wrapper, you may see #header-wrap or #header or #head. Try to insert the color code and preview the change. If there is a background color, you've probably got it right.You may also read the related article to have a Background Image for Blogger Header.
Background Image for Blogger Header (New)
We had recently noticed several changes and additional features to the Blogger layout. One of the notable and much welcomed change is the ease of adding a picture banner or image to the Blogger Header, as highlighted by our reader, dumper. The new steps covered in this article will supercede the previous articles titled “Background image for Blogger Header” and “Add Picture Banner Link to Blogger Header.” Those previous methods of putting the background image are still valid and effective. However, for many new bloggers who are not too familiar with coding, we think that using the latest feature by Blogger is an easier way of creating the Header image.
Do note that when you use this feature, the image will appear as a background to the Title and Description. If you want a picture on one side of the Header and the Title and Description beside the picture, we think it is still better to use the methods described in the article “Add Picture Banner Link to Blogger Header” as that will give you better control over the position of the various elements. You can also refer to our article in our FAQ showing you how to have a picture beside the Blog Title and Description.
Insert Header image
We assume that you have a ready picture that you would like to place in your Blogger Header. Edit the picture, touch up, and resize using photo editing softwares. You can download the free Google's Picasa or Irfanview if you don't have one. Save the picture in your computer or upload it onto an image server.
Login to your Dashboard. Go to Template -> Page Elements. Click to Edit your Header.
You will see that you can now upload an image onto your Header either from your computer or from the web. After uploading the image, Save the changes and View your Blog. If you are happy with the picture, go back to Edit your Header again.
This time, you will see under the image further options on “Placement” of the image.
If you choose “Behind title and description”, the image will appear as a background and whatever you type as your title and description will be visible on the face of the image. With this option, only the title links to your main index page but the image does not.
If you choose “Instead of title and description”, you will see only the image and the title and description are hidden from view. However, with this option, the image is clickable and automatically links to your main Blog page.
Align image to Left or Right
Update: We have a more detailed guide on alignment of the Title, Description and Header background images. In the articles, we discussed how you can move them to the center, or towards the left or right of the Header. Follow the guide on Header Image and Title Alignment (I) if you are using the Minima, Denim, Rounders, Herbert, Jellyfish, Harbor and Scribe template. Go to Header Image and Title Alignment (II) if yours is a Dots, No. 897, No. 565, Thisaway, Moto, Snapshot, TicTac, Tekka, Sand Dollar or Simple II template.
To have an image aligned to the left of the Header, go to Template -> Edit HTML, look for the Header image style and change it to the following words (in purple):-
Similarly, if you want the image to appear to the right of the Header, it would be “margin-right: 0px;”.
This is applicable where the image replaces the Title and Description. If you retain the Title and the image is a background to the Title, the image will follow the position of the Title. To have the picture on one side of the Header and the Title and Description next to it, you may want to follow the guide in the article “Add Picture Banner Link to Blogger Header”.
Remove border around Header
If you see a border around the Header image that somehow does not go with the image, you can either change it or remove it. Go to Template -> Edit HTML, and you will see somewhere near the top a style defined for the #header-wrapper and #header. There is a setting for the border. An example is this:-
This border has a width of 1px, a thicker “solid” line instead of a “dotted” line, and a bordercolor that is defined under Template -> Fonts and Colors.
To remove the border, either delete this setting entirely or change the 1px to 0px width. Preview the template and if you like what you see, save it.
Further Reading:
This guide will give you an image background. Sometimes, you may have more than one image, all of which are suitable for your Blog. You can read Random Header and Background Images on how you can have the Header images rotated and a random image shown upon every page load.
Should you want to have a background picture as a backdrop to your main post, sidebar or whole blog, you may refer to the article on "Background Image for Blogger Template."
Do note that when you use this feature, the image will appear as a background to the Title and Description. If you want a picture on one side of the Header and the Title and Description beside the picture, we think it is still better to use the methods described in the article “Add Picture Banner Link to Blogger Header” as that will give you better control over the position of the various elements. You can also refer to our article in our FAQ showing you how to have a picture beside the Blog Title and Description.
Insert Header image
We assume that you have a ready picture that you would like to place in your Blogger Header. Edit the picture, touch up, and resize using photo editing softwares. You can download the free Google's Picasa or Irfanview if you don't have one. Save the picture in your computer or upload it onto an image server.
Login to your Dashboard. Go to Template -> Page Elements. Click to Edit your Header.
You will see that you can now upload an image onto your Header either from your computer or from the web. After uploading the image, Save the changes and View your Blog. If you are happy with the picture, go back to Edit your Header again.This time, you will see under the image further options on “Placement” of the image.
If you choose “Behind title and description”, the image will appear as a background and whatever you type as your title and description will be visible on the face of the image. With this option, only the title links to your main index page but the image does not.If you choose “Instead of title and description”, you will see only the image and the title and description are hidden from view. However, with this option, the image is clickable and automatically links to your main Blog page.
Align image to Left or Right
Update: We have a more detailed guide on alignment of the Title, Description and Header background images. In the articles, we discussed how you can move them to the center, or towards the left or right of the Header. Follow the guide on Header Image and Title Alignment (I) if you are using the Minima, Denim, Rounders, Herbert, Jellyfish, Harbor and Scribe template. Go to Header Image and Title Alignment (II) if yours is a Dots, No. 897, No. 565, Thisaway, Moto, Snapshot, TicTac, Tekka, Sand Dollar or Simple II template.
To have an image aligned to the left of the Header, go to Template -> Edit HTML, look for the Header image style and change it to the following words (in purple):-
#header img { margin-left: 0px; |
|---|
Similarly, if you want the image to appear to the right of the Header, it would be “margin-right: 0px;”.
This is applicable where the image replaces the Title and Description. If you retain the Title and the image is a background to the Title, the image will follow the position of the Title. To have the picture on one side of the Header and the Title and Description next to it, you may want to follow the guide in the article “Add Picture Banner Link to Blogger Header”.
Remove border around Header
If you see a border around the Header image that somehow does not go with the image, you can either change it or remove it. Go to Template -> Edit HTML, and you will see somewhere near the top a style defined for the #header-wrapper and #header. There is a setting for the border. An example is this:-
border: 1px solid $bordercolor; |
|---|
This border has a width of 1px, a thicker “solid” line instead of a “dotted” line, and a bordercolor that is defined under Template -> Fonts and Colors.
To remove the border, either delete this setting entirely or change the 1px to 0px width. Preview the template and if you like what you see, save it.
Further Reading:
This guide will give you an image background. Sometimes, you may have more than one image, all of which are suitable for your Blog. You can read Random Header and Background Images on how you can have the Header images rotated and a random image shown upon every page load.
Should you want to have a background picture as a backdrop to your main post, sidebar or whole blog, you may refer to the article on "Background Image for Blogger Template."
Background Image for Blogger Header
Update:
With the latest Blogger feature, there is an easier way to insert a background image into your Blogger Header. The steps are discussed in the article “Background Image for Blogger Header (New)”.
However, by using the new feature, the image appears in the center, as a background to the title. For those who want more control over the position of the picture, like having the picture appear on the left or on the right of the title, it may be better to follow the guide at “Add Picture Banner Link to Blogger Header”as it allows you more control over the position of the elements. Alternatively, you can refer to our article in our FAQ showing you how to have a picture beside the Blog Title and Description.
Should you wish to use an image as a background to your Header (just like the one you see above or this colorful one), get an appropriate image and crop it to size, about 660x150 pixels. A photo editing software like Google's Photo Editing Software Picasa or Photoshop would do the trick.
After that, upload the image to a free server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the picture URL.
Next, go back to “Edit HTML” under Template tab. Scroll to where these lines appear:-
Add immediately after that the following line:-
Remember to insert the URL address of your image in the brackets. Save the template and refresh your Blog site. The image now appears as the background of your Header. Change the colors of the text if you need to.
This guide will give you an image background. Sometimes, you may have more than one image, all of which are suitable for your Blog. You can read Random Header and Background Images on how you can have the Header images rotated and a random image shown upon every page load.
If you want to replace the entire Header with an image or banner, to link the image or banner to the URL of your Home page, and to delete the Title altogether, please refer to the article “Background Image for Blogger Header (New)” or the other article on how to “Add Picture Banner Link to Blogger Header.” Should you want to have a background picture as a backdrop to your main post, sidebar or entire blog, you may refer to the article on "Background Image for Blogger Template."
With the latest Blogger feature, there is an easier way to insert a background image into your Blogger Header. The steps are discussed in the article “Background Image for Blogger Header (New)”.
However, by using the new feature, the image appears in the center, as a background to the title. For those who want more control over the position of the picture, like having the picture appear on the left or on the right of the title, it may be better to follow the guide at “Add Picture Banner Link to Blogger Header”as it allows you more control over the position of the elements. Alternatively, you can refer to our article in our FAQ showing you how to have a picture beside the Blog Title and Description.
Should you wish to use an image as a background to your Header (just like the one you see above or this colorful one), get an appropriate image and crop it to size, about 660x150 pixels. A photo editing software like Google's Photo Editing Software Picasa or Photoshop would do the trick.
After that, upload the image to a free server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the picture URL.
Next, go back to “Edit HTML” under Template tab. Scroll to where these lines appear:-
#header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; |
|---|
Add immediately after that the following line:-
background-image: url(URL address of your image); |
|---|
Remember to insert the URL address of your image in the brackets. Save the template and refresh your Blog site. The image now appears as the background of your Header. Change the colors of the text if you need to.
This guide will give you an image background. Sometimes, you may have more than one image, all of which are suitable for your Blog. You can read Random Header and Background Images on how you can have the Header images rotated and a random image shown upon every page load.
If you want to replace the entire Header with an image or banner, to link the image or banner to the URL of your Home page, and to delete the Title altogether, please refer to the article “Background Image for Blogger Header (New)” or the other article on how to “Add Picture Banner Link to Blogger Header.” Should you want to have a background picture as a backdrop to your main post, sidebar or entire blog, you may refer to the article on "Background Image for Blogger Template."
Add Picture Banner Link to Blogger Header
Update:
With the latest Blogger feature, there is an easier way to insert a background image to replace your Blogger Header. The image is also clickable and links to your Blog's main index page. The steps are discussed in the article Background Image for Blogger Header (New).
However, by using the new feature, the image appears in the center, as a background to the title. For those who want more control over the position of the picture, like having the picture appear on the left or on the right of the title, it may be better to follow this guide. After inserting the background image, use the instructions in the section titled “Align Header Image, Title and Description” to position the picture and adjust the title and description text.
This guide is about adding an image or picture to your Blogger Header to replace the Header Title, and to add a unique personal touch to your Blog. At the same time, we would like to have a clickable Blogger Header so that anybody clicking on it will be brought directly to your Blog's home page. For purposes of search engine optimization (SEO), we would include a text in the code so that the title of your Blog can still be read by search engine spiders despite your removing the Header text.
Before we begin, if your intention is simply to add a background picture to the Header, but still retaining the Header text and description, please refer to my other article on “Background image for Blogger Header” or the article “Background Image for Blogger Header (New)”.
Next, you will have to enable additional Page Elements to your Header section. When you log in to your dashboard, and go to Template -> Page Elements, you should see an option for you to add a Page Element above your Header.
If you don't, please refer to the related article on “Add Page Element to Blogger Header and Blog Posts” to see how you can enable the option to add further page elements to your Blogger Header. (NB.: I am referring you to the other article as I do not wish to repeat the steps here, making this article unbearably lengthy.)
Add picture without link to Home page
This is simple. If all you want is to have an additional picture or image above or below your Header text, click the “Add a Page Element” link and select “Picture” to upload the image from your computer. Save and refresh.
Add picture with link to Home page
Instead of uploading the picture, you will need to create a link. To do this, you need to have the picture uploaded somewhere. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the picture URL.
Now that you have the picture URL, click “Add a Page Element” in your Header section and this time, choose “HTML/JavaScript”. The HTML code is as shown below:-
Allow me to explain:-
1. Insert the URL of your Blog beginning with http:// into the portion marked red.
2. Insert the picture or image URL into the part in blue. This is the direct link to your picture that is uploaded onto Google Pages, Photobucket, Blogpulp, or whatever image host that you use. To check whether the link is correct, you can copy and paste it into your browser and press Enter. You should be able to see your image.
3. Insert the title of your Blog into the part marked orange. You will notice that there are two attributes – ALT and TITLE – bearing your Blog Title. The ALT attribute is an alternative text description for images. For browsers that are unable or are slow to read images, this text will be displayed instead. The TITLE attribute is not restricted to images and can be used for any page element. In most browsers, hovering your mouse over the link will show this title. It is widely believed that adding these texts will boost your Blog's accessibility by search engine spiders. Whether or not that is true, there is no harm putting these in to aid the search engine ranking algorithms.
When you have inserted the HTML code, press Save, refresh the Home page and you will see the Header picture.
Align Header Image, Title and Description
Update: The following section talks about the method to have a picture on the left side of the Header and the Title on the right. In addition to this guide, we have an article in our FAQ giving you tips on how this can be done. If you want a guide on general alignment of the Title, Description and Header background images, we have other articles explaining how you can move the Title, Description and image to the center, or towards the left or right of the Header. Follow the guide on Header Image and Title Alignment (I) if you are using the Minima, Denim, Rounders, Herbert, Jellyfish, Harbor and Scribe template. Go to Header Image and Title Alignment (II) if yours is a Dots, No. 897, No. 565, Thisaway, Moto, Snapshot, TicTac, Tekka, Sand Dollar or Simple II template.
Should you want the Header picture to be beside the title, and not as a background to the title, follow the guidelines in the above section “Add picture with link to Home page” to insert the picture in the Header.
Next, if you are not linking your picture to the Home page, amend the HTML code to this:-
If you are linking the picture to the Home page, the HTML code will be this:-
Change the width and the height of the image to suit your requirements. If you want the picture on the right of the Header, change the word "left" to "right".
An example of a picture on the left of the Header is this:-
Notice that the Header and the Description are in the center of the Header. If you would rather have this:-
where the Header and the Description are at a fixed position from the picture, under Template -> Edit HTML, scroll to this line and remove the code (shown in red):-
Next, scroll to this line and add the code (shown in red):-
This gives you control over where exactly you want the Title to appear. You can change the 150px to other values and Preview the template to look at the position of the Header.
To shift the Description, scroll to this line and add the code (shown in red):-
To have an idea how wide the margin would be, the Header and Description in this Business Fables Blog is set at margin-left:230px.
You may see in your stylesheet a margin like this:-
For those who are familiar with the shorthand for margin code, you can insert a fourth value to define the left margin. Otherwise, it is alright to insert a margin-left:150px; after that.
Remove Header Title
Go to Template -> Edit HTML. Scroll to where you see this code where your blog title is shown in the part marked orange:-
Change the locked='true' to locked='false'. Save and click the “Page Elements” tab. When you “Edit” your Header, you will now see a “Remove Page Element” option. Remove it if you want, and refresh the your home page. You should no longer see your title displayed.
Create Banner Link
Here, we are referring to animated picture files. You can create one using GIF Animator programs or free online softwares. Key in search words like “free online banner generator” into your search box to look for sites that offer services to create your free banners.
After creating the banner, you would have to host it on a free picture host. Look up the list of free Image Hosts and File Hosting Services. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. The steps to insert it into the Header are the same as outlined above in “Add picture with link to Home page.”
Remove border around Header
When you go to Template -> Edit HTML, you will see somewhere near the top a style defined for the #header-wrapper and #header. There is a setting for the border. It may be at 1px width with a solid, dotted or whatever line, of a certain color. To remove the border, either delete this setting entirely or change the 1px to 0px width. Preview the template and if you like what you see, save it.
With the latest Blogger feature, there is an easier way to insert a background image to replace your Blogger Header. The image is also clickable and links to your Blog's main index page. The steps are discussed in the article Background Image for Blogger Header (New).
However, by using the new feature, the image appears in the center, as a background to the title. For those who want more control over the position of the picture, like having the picture appear on the left or on the right of the title, it may be better to follow this guide. After inserting the background image, use the instructions in the section titled “Align Header Image, Title and Description” to position the picture and adjust the title and description text.
This guide is about adding an image or picture to your Blogger Header to replace the Header Title, and to add a unique personal touch to your Blog. At the same time, we would like to have a clickable Blogger Header so that anybody clicking on it will be brought directly to your Blog's home page. For purposes of search engine optimization (SEO), we would include a text in the code so that the title of your Blog can still be read by search engine spiders despite your removing the Header text.
Before we begin, if your intention is simply to add a background picture to the Header, but still retaining the Header text and description, please refer to my other article on “Background image for Blogger Header” or the article “Background Image for Blogger Header (New)”.
Next, you will have to enable additional Page Elements to your Header section. When you log in to your dashboard, and go to Template -> Page Elements, you should see an option for you to add a Page Element above your Header.
If you don't, please refer to the related article on “Add Page Element to Blogger Header and Blog Posts” to see how you can enable the option to add further page elements to your Blogger Header. (NB.: I am referring you to the other article as I do not wish to repeat the steps here, making this article unbearably lengthy.)
Add picture without link to Home page
This is simple. If all you want is to have an additional picture or image above or below your Header text, click the “Add a Page Element” link and select “Picture” to upload the image from your computer. Save and refresh.
Add picture with link to Home page
Instead of uploading the picture, you will need to create a link. To do this, you need to have the picture uploaded somewhere. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the picture URL.
Now that you have the picture URL, click “Add a Page Element” in your Header section and this time, choose “HTML/JavaScript”. The HTML code is as shown below:-
YOUR BLOG URL" title="YOUR BLOG TITLE"> |
|---|
Allow me to explain:-
1. Insert the URL of your Blog beginning with http:// into the portion marked red.
2. Insert the picture or image URL into the part in blue. This is the direct link to your picture that is uploaded onto Google Pages, Photobucket, Blogpulp, or whatever image host that you use. To check whether the link is correct, you can copy and paste it into your browser and press Enter. You should be able to see your image.
3. Insert the title of your Blog into the part marked orange. You will notice that there are two attributes – ALT and TITLE – bearing your Blog Title. The ALT attribute is an alternative text description for images. For browsers that are unable or are slow to read images, this text will be displayed instead. The TITLE attribute is not restricted to images and can be used for any page element. In most browsers, hovering your mouse over the link will show this title. It is widely believed that adding these texts will boost your Blog's accessibility by search engine spiders. Whether or not that is true, there is no harm putting these in to aid the search engine ranking algorithms.
When you have inserted the HTML code, press Save, refresh the Home page and you will see the Header picture.
Align Header Image, Title and Description
Update: The following section talks about the method to have a picture on the left side of the Header and the Title on the right. In addition to this guide, we have an article in our FAQ giving you tips on how this can be done. If you want a guide on general alignment of the Title, Description and Header background images, we have other articles explaining how you can move the Title, Description and image to the center, or towards the left or right of the Header. Follow the guide on Header Image and Title Alignment (I) if you are using the Minima, Denim, Rounders, Herbert, Jellyfish, Harbor and Scribe template. Go to Header Image and Title Alignment (II) if yours is a Dots, No. 897, No. 565, Thisaway, Moto, Snapshot, TicTac, Tekka, Sand Dollar or Simple II template.
Should you want the Header picture to be beside the title, and not as a background to the title, follow the guidelines in the above section “Add picture with link to Home page” to insert the picture in the Header.
Next, if you are not linking your picture to the Home page, amend the HTML code to this:-
If you are linking the picture to the Home page, the HTML code will be this:-
YOUR BLOG URL" title="YOUR BLOG TITLE"> |
|---|
Change the width and the height of the image to suit your requirements. If you want the picture on the right of the Header, change the word "left" to "right".
An example of a picture on the left of the Header is this:-
Notice that the Header and the Description are in the center of the Header. If you would rather have this:-
where the Header and the Description are at a fixed position from the picture, under Template -> Edit HTML, scroll to this line and remove the code (shown in red):-
#header { |
|---|
Next, scroll to this line and add the code (shown in red):-
#header h1 { margin-left:150px; |
|---|
This gives you control over where exactly you want the Title to appear. You can change the 150px to other values and Preview the template to look at the position of the Header.
To shift the Description, scroll to this line and add the code (shown in red):-
#header .description { margin-left:150px; |
|---|
To have an idea how wide the margin would be, the Header and Description in this Business Fables Blog is set at margin-left:230px.
You may see in your stylesheet a margin like this:-
#header h1 { margin:5px 5px 0; |
|---|
For those who are familiar with the shorthand for margin code, you can insert a fourth value to define the left margin. Otherwise, it is alright to insert a margin-left:150px; after that.
Remove Header Title
Go to Template -> Edit HTML. Scroll to where you see this code where your blog title is shown in the part marked orange:-
Change the locked='true' to locked='false'. Save and click the “Page Elements” tab. When you “Edit” your Header, you will now see a “Remove Page Element” option. Remove it if you want, and refresh the your home page. You should no longer see your title displayed.
Create Banner Link
Here, we are referring to animated picture files. You can create one using GIF Animator programs or free online softwares. Key in search words like “free online banner generator” into your search box to look for sites that offer services to create your free banners.
After creating the banner, you would have to host it on a free picture host. Look up the list of free Image Hosts and File Hosting Services. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. The steps to insert it into the Header are the same as outlined above in “Add picture with link to Home page.”
Remove border around Header
When you go to Template -> Edit HTML, you will see somewhere near the top a style defined for the #header-wrapper and #header. There is a setting for the border. It may be at 1px width with a solid, dotted or whatever line, of a certain color. To remove the border, either delete this setting entirely or change the 1px to 0px width. Preview the template and if you like what you see, save it.