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

ADD PICTURE AS BACKGROUND

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

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

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

28
comments:

Can you Help me Vin.?I question this because I didn't find it on your helpful blog or I might have missed it." I've got difficulties in choosing the TEXT COLOR of my posts in the box post editor because the background of the text box editor is not the same as the background of my templates ( where the posts will appear after been published ). How to change the Background color of the Box of Text Post editor ( the box where we type our posts ) ? or I will be very thankful if you would show me how to change the layout of that page ( "publish a post" editor page ) thanks in advance ....

How do I stretch my photo accros my header so that if fits perfectly? I try to edit my html and in the header portion I only find margin and padding. I don't know what the dimensions that are needed for my photo. Could you shed some light on this.

I would like to change my header so that I could have four columns in the header where I could add pics of my grandchildren. Could you help me with this. I would really appreciate any help you could give.

Hi Vin.Is there any practical use for the $variables? I declared a $number variable, and it works OK, but i need to set its value later in the code (in the #header H1 section )using JS. I'd like to know at least if I can set the value with something like $number: 4; or $number="4"... I've tried all the combinations but it doesn't get the value... give me a hand mate!

Basically, I declare the variable in the definitions section like this:Variable name="IdImage" description="Image Id" type="automatic"default="7" value="7"Later, I can use the variable in the #Header section like this:#header h1 { background:url("http://www.jquiroz.com/headers/front$IdImage.jpg") no-repeat;

where it succesfully trasnform the URL string to"http://www.jquiroz.com/headers/front7.jpg"

So far it works OK, the next step for me is assigning a value to thevarable IdImage, theorically something like this:$IdImage=8;IdImage: 8;$IdImage:"8";(...)You name it, I've tried any combination but the variable keeps itsvalue from the declaration. If you can use the variable later, I guessthere should be a way in which you can assign a new value...

The final step will be using JS to assign a random value to thevaraible, so the picture in the header will be differente everytimeyou refresh the page:

script type="text/javascript"{aleat = Math.floor(Math.random()*10);document.write("$IdImage="aleat")}/script(I had to remove the "<>" so the comment can be accepted)

This is not my main concern so far, as it should be easy to do as soonas I descover how to assign the value....

Hi Vin.2 things here. I know the trick, it has been on my personal webpage for more than a year (www.jquiroz.com), but it didn't work on blogger and now I CAN see why. I was using document.write to write just the background line, but I reckon I need it to output all the header style section. Actually because mi images are on the same web directory and have the same name + number, I don't need to define an array. Will try to midify my code an I let you know. Big thanks for your help so far.Jose

Hello! It Works! But I could not take the link function from the header... I've tried so many times in the css code, but nothing worked... Check my blog, when you roll the mouse over the header image, it works as a link, showing an awful grey color the same way the links do. How can I take off this link from the header image? Thanks!!!! :))xandrelima.blogspot.com

Hi Vin,Pls see my blog I want to modify and want to make my blog look good, create drop down for dishes, extend the body, add picture to the header,actually i am not able to see the add and edit element page getting an error msg. thanks.

Vin - I've tried everything you have suggested - clearing caches etc. another help page suggested making the opacity of the header space 0 - tried that, loaded my photo up to photobucket - no joyeither. I can get the image to load in a new blog - but not mine...

Thank you very much for your prompt help Vin...i like my header for now...some recognized me in the image...lol.. but come Spring again someday i,ll change again..it bothered me that it would not "go away"again...now i know how to remove it.. its ok...thanks again!!greetings Francien.

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,