Header Picture to Left, Title Description to Right in Header. ~ The Blog Doctor.
Loading...

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

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

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!


42 comments:

showbiz intriga? get it from boy! said...

hi. is there a way to put adsense on the left and right white space of a header that is centered? i think a text link unit on the left and right would be perfect...tia

Vin said...

showbiz intriga? get it from boy!,

First you will have to put a Html Page Element in the header and remove the title page element :

How to Customize Header

Then paste in a three column table code and put the image link code in the middle column and the Adsense code in the two outer columns.

Anonymous said...

I have huge problem. I can't remove picture som my headline. I added one and now that I try to clik remove pic, it just flashes that uploat from computer and returns to remove pic

Vin said...

Anonymous,

Try clearing the cache. See :

Clear Cache

Use Firefox browser.

Metal Chef said...

How do I put a picture on both sides of my header while still keeping the text?

Thanks

Vin said...

Metal Chef,

Have a look at :

How to Customize the Header

Colette Frazier said...

Hi! THanks so much for your blog--it's a huge help for illiterate bloggers like me!:) I tried putting the picture on left and title on right and it worked! But I can't figure out how to get the Title to position in the center of the header instead of on the top line. I thought it was in the middle before but now that I added the image it's at the top. Also, I tried moving the description and deleted most of it's HTML. Now I can't get it back. any ideas on what the coding would have been for that?
thanks so much,
colette

Vin said...

Colette Frazier,

Modify this code :

#header h1 {
margin:150px 50px 5px 200px;
...
}

The first number is the top margin, the second is the right margin, the third is the bottom margin and the fourth is the left margin.

You will need to experiment a bit. Change a number and click Preview button to see the change. If suitable save template.

Roxylou! said...

well, I got the text to move over, but the picture is still right in the center. Do you want my link to look?

Vin said...

Roxylou,

Sure, no other way I could know!

:-)

RoxylouEOG said...

I appreciate your time! You are very helpful tp us who are learning...
I tried to create a header with pictures on both sides, which you can see on the bottom of my blog, but it didn't work. And the top header is the one I was asking about. Thanks!
roxylou-eog

Vin said...

Roxyloueog,

Your profile does not show anything hence I am unable to comment!

Colette Frazier said...

Vin,
thanks so much! You are such a huge help!!!! Thanks for sharing your brain!
colette

RoxylouEOG said...

Vin,
I am so new to this, I don't understand what you mean about my profile. What do you need me to put in my profile so you can help me with my blog? I know how to get to my profile, but I don't understand what you need there. I tried to reply to your responce in my google mail but it was returned to me.
thanks,
Roxylou!

Vin said...

Roxyloueg,

I need to see your blog before I can help you. Your profile now lists two blogs whereas before it did not list any blog!

So which blog are you talking about?

RoxylouEOG said...

the blog titled Mom n Dad is the one I am trying to fix.
I went to my profile and filled it in more, so that's why it was diferent
the second time you looked. My other blog, gingersnapshots, has the header
I really like, but I don't know how it happened. At this point I can't seem
to edit my header text in the Mom and Dad blog. I am hoping to have it

Vin said...

Roxyloueg,

If you want a blog title with pictue on both sides see How to Customize Header.

Colette Frazier said...

Hi Vin,
I hope I won't have to bother you again after this...
i 've tried putting the blog description to the right of image but when i do it puts each word on its own line and makes the header huge length wise. I've tried everything to tweak it so i thought you might know. here's the code i have...
#header .description {
margin:50px 5px 5px 400px;
<-----Change last number
padding:0 20px 15px;
max width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height:1.4em;
font: $descriptionfont;
color: $descriptioncolor;

}
thanks!

RoxylouEOG said...

I am trying to get the picture on the left and the title in the center in the Mom and Dad blog. While searching for help I came across the post about customize your blog, and attempted to create a header with photos on both sides, but that didn't work either. Can you look at my blog and determiine what I am doing wrong? At this point I can't even edit the font size and color in the header. Thanks again, for your attempts to help me.

Vin said...

RoxylouEOG,

Use Firefox browser. In your Template Code box scroll down to this code :

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

and change it to :

#header-inner {
padding-right:400px;
}

Use Preview button to increase '400' until it is properly aligned. Also change this code :

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: normal bold 126% Times, serif;
}

to this code :

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em 300px;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: normal bold 126% Times, serif;
}

Use Preview button to increase '300' until it is properly aligned. Then save template.

RoxylouEOG said...

Vin,there must be something wrong in my template. the code you say to scroll down to does not exist. my code says:

#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

so should I go ahead and change it to what you said? You said to scroll down to this:

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
and change it to
#header-inner {padding-right:auto;
}

Vin said...

RoxylouEOG,

Yes you can change it to :

#header-inner {
padding-right:400px;
}

Do email me for more instructions as this page will get too long!!

My email : drbhatns at gmail dot com

Replace 'at' with '@' and 'dot' with '.' and remove the spaces!!

:-)

Emily said...

Hi. I've been playing around with my header and have a setup I like except for one thing: the title "Be in wonder" now appears with one word on each line instead of all three words on one line. I don't mind it so much except it doesn't make room for my brief description. i've temporarily removed my description so it works.

Take a look at: http://beinwonder.blogspot.com/

and thank you very much!
emily

Vin said...

Emily,

In your Template Code box add the width line in this code :

#header h1 {
width:400px;
margin: 5px 5px 0;
padding:0px 20px .25em 200px;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: normal normal 200% Georgia, Serif;
}

Use Preview button to adjust '400' and then save.

Amrendra Narayan said...

thanks a ton,
this blog of yours help me actually understand and let me feel like the real owner of my blog, I could customize.
Though the example codes that u have written vary a slight, but they give a good enough idea of what is to be done.
Cheers,
Amrendra Narayan

Aussie Sue said...

So how do you move the title in the header to the bottom of the 'image' rather than where its default setting is placing it?

Vin said...

Aussie Sue,

In the code below changing '500' increases the left margin pushing the picture to the right.

If you want it below the picture you have to increase the top margin (0)which will push it down and decrease the left margin (500) to bring it below the picture.

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

The margins in the above code are clockwise - top, right, bottom and left.

Aussie Sue said...

Vin, if the margin only has 3 values, which 3 are they? My code is :
margin: 0px 5px 10px

so if I want to move the title down, which one is missing? which one do I adjust?

Aussie Sue said...

Vin, when I adjusted the code, it changed the border, not the title position. Did I do something wrong? Here's the original code:
#header .description {
margin:0px 5px 10px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Vin said...

Aussie Sue,

Increase the first zero. Always click Preview to check before saving.

Aussie Sue said...

i'm not ignorant or stupid, but as I increase the first number, the picture moves away from the border. I want the picture where it's at - just want the TITLE in the header to move to the bottom. What am I doing wrong? Sorry to sound annoying :(

Vin said...

Aussie Sue,

My bad! I forgot the two were connected. To treat them as two different entities :

First put a Html widget in the header using the same method shown in How to add Picture to header. Instead of Picture gadget add a HTML gadget.

In that HTML gadget put this code :

<table><tr><td><img src="LINK_OF_IMAGE"/></td></tr><tr><td>BLOG_TITLE</td></tr></table>

Replace the CAPS with link of the image and the blog title respectively. This will create a table with the image in the top cell and the title below it.

Aussie Sue said...

Vin,
I should have clarified that the title is in front of the picture - which is where I want it - just at the bottom, not the top. The adjustments I made didn't show a picture. Don't I use a link from Googleweb or some place hosting my picture? the title is there, but not the pic. I preferred the original where you mess with the margins as to where to place the 'title'. Can't I just put some 'return' htmls to bring the line down near the bottom of the pic?
Sue

Vin said...

Aussie Sue,

I do not see the title. Can you add it in front of the picture?

boiGenius said...

WOW Thanks Alot I was really having trouble centering my header image in the stretch denim template I really appreciate it. I'm really enjoying the info you put together on blogging, keep up the excellent work!!

Catherine said...

Hi Vin!, I've spent bloody hours on this header, finally got it all right with your explanation except for Title Description on the right - it's one word to a line. I've tried the solution that you gave to the other person above - I changed all the numbers one by one and Previewed but nothing's working! Here's my header code. Pls pls help!!!

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

Vin said...

Catherine,

For the description you have to modify this code :

#header .description {
margin:0 5px 5px 410px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: normal bold 105% Georgia, Times, serif;
color: #666666;
}

Susan said...

So, how would I put an image on the right and the title and blog description on the left? I played with the margin numbers and couldn't figure it out. Step-by-step instructions would be AWESOME. My blog is at: http://blogginboutbooks.blogspot.com

Vin said...

Susan,

To change picture to right use this code :

#header-inner {
background-position: right;
....
}

To change the title to left change 300px to 10px in this code :

#header h1 {
margin:0 5px 5px 300px;
............
}

Susan said...

Thanks, Vin. I actually made a header instead, but I appreciate the info.

Debbie said...

Vin,
I feel like I've tried every solution you've posted to try to get my header centered,only to no avail. Can you take a look and HELP!?!?!? Much appreciated.
Debbie
vintagescoutinteriors.blogspot.com

amit1432love said...

Hi Vin,
I just want to ask that how can i use html on right side, not title or description.Because i want to use right side of header, search bar or subscribe or other html stuff so please tell me how can i do?

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.