Wednesday, September 13, 2006

Adding a graphic to your blog header

Update 25 September 2008: The very nice graphic at Guide to Malaysia has been replaced by a leaderboard ad unit from Nuffnang. When there are no incoming ad, the ad unit is minimized to a tiny logo Nuffnang logo.


For an example of a Blogger Beta blog with a graphic above the header, surf to Cheap Airfares: Air Asia, Malaysia's success story and Testing Expandable Post Summary (close new windows to get back to this page). The difference between the two is that the image in the first example is clickable whereas the image in the second example is non-clickable. If you are in the archives or in an individual post page of the first example, clicking on the graphic will take you back to the main (home or index) page (or any other sites you choose, depending on what you want). Try clicking on the graphic in the first example and see where it takes you.

Adding a "Add a Page Element" (Page Element is now called Gadget) widget in the Blogger Beta Layout

This is how you can add a graphic to your header. Sign into Dashboard. For the blog you want to modify, click LAYOUT, then click EDIT HTML. Then look for this block of codes in the template:

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


Change maxwidgets='1' to maxwidgets='4'(or any other number greater than 1, or even leave a number out, then there is no maximum) and change showaddelement='no' to showaddelement='yes'. (you may also leave out the figure in maxwidgets='' in which case the number of widgets you can add to the header is unlimited). So the section should now be

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Replacing Blog Header (Header)' type='Header'/>
</b:section>
</div>


Click SAVE TEMPLATE. Then click PAGE ELEMENT tab to go back to LAYOUT. You will see an extra "Add a Page Element" above the Header.

Adding unclickable graphic in the Header of Blogger beta blog

Click "Add a Page Element" and a pop-up will appear. Select "Picture" and click "Add to blog". In the next page, there will be 4 fields and some radio buttons for you to click. The fields are "Title", "Caption" and two fields for image. It is best to leave the title blank. If (rarely) you want a caption below the image, then fill in that field with your caption, otherwise leave it blank. If you have your photo stored on your computer, click "Browse" (the radio button for "Browse" is already ticked by default), then select the photo from your computer.

You may also tick the radio button to load an image already hosted on the web if you know the URL, but if the image is not hosted by you, there may be copyright and bandwidth issues involved. If you select this option, just fill in the field for the image URL and click "Save changes". For this, the safest option is to tick "Shrink to fit" as you have no control over the size of the photo.

The advantage of this is you don't have to deal with any HTML, but the disadvantage is that the image is not clickable like in the first example: Testing expandable post summary (close new window to get back to this page).

Adding a clickable graphic to the Blogger Beta blog Header

There is another way to add a graphic to the header. First, you need to host your image somewhere on the web. You can host it with Photobucket (close new window to get back to this page) or you can host it with Blogger. If you want to host it with blogger, look at post Getting Blogger to host your pictures for your profile, etc. (close new window to get back to this page). You may be interested to read about a comparison between the two methods here: Comparison between hosting images with Blogger and with Photobucket (close new window to get back to this page).

You may also use Google Page Creator to host the image. After uploading the image, click on the link then copy the URL from the address bar in the page hosting the image (or right-click on the mouse and select "copy shortcut" to save the URL into clipboard.

Non-clickable image Header

Have ready the URL of the image. Now when you click "Add a Page Element", instead of selecting "Picture" select "HTML/Javascript" instead and click ADD TO BLOG. Then type <img src="URL of picture" width="W" alt="" /> into the HTML editor, where W is the width of the image you want displayed. This will have to be equal or less than the width of the sidebar. If you don't know the width of the sidebar, get to the template editor (click LAYOUT > TEMPLATE > EDIT HTML) and look for this block of codes

#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

This tells me the width of the sidebar is 150 pixels.

It will be good to type in some description of the image in between the quotation marks in alt="" as search engine cannot read images but can read the text in the alt tag. This will be an advantage to you if you want your blog to be easily found by search enginges. Another advantage is that if for any reason, the image cannot be displayed, instead of a blank box, the text withing the quotation marks will be displayed instead. The alt tag is optional and you may leave it out if you want. But putting some description between the quotation marks will be good for search engine which cannot read images, but can read the alt text. Also, if the image cannot be displayed for any reason, the text get displayed instead.

When ready, click SAVE CHANGES. Then in the LAYOUT, preview if you want, and click SAVE if you are satisfied. If you are not satisfied with the positioning of the elements, you can hover your mouse over the widget (then the cursor will change to a cross) and drag it to wherever you like.

Clickable Image Header

However, doing it in the manner above will still leave you with an unclickable graphic. If you want the image to be clickable so that it takes you back to the home page (or any other site you wish), you will have to write the image HTML this way:
<a href="URL of home page"><img src="picture URL" width="W" alt="" /></a>. This was the method used for the first example blog.

Adding other stuff to the Header

Note: Instead of just adding a graphic to the header for this blog, you can use the same method to add other things like text, etc. For example, to make a "sticky post" that always stay at the top of the page. You can do it the same way except that after clicking "Add a Page Element", for text, you have to choose TEXT and click "Add to blog". I have also tried adding an AdSense link unit to this beta blog Business, Travel and Leisure (cloce new window to get back to this page). The last time I did it, it didn't work unless I tamper with the script and remove the comment tags, but this time, it worked perfectly without having to change the script. Try it yourself. I have also tried to add a Google searchbar this way, but it still ended up with a non-working searchbar. To add a working searchbar, see this post: Putting a working Google AdSense searchbar in the Header of a Blogger Beta blog (close new window to return to this page).

Update. Putting the script for the Google AdSense search box directly now will result in a working search box. You don't have to do any tinkering.

Making a graphic


For the graphic I made at Guide to Malaysia, I just took a 640x480 pixels photo, crop it to size with the very good and free Irfanview, save and uploaded to photobucket. If you want a fancier graphic header, here is a very good tutorial that shows you how to do it with Photoshop: How to make a blog header graphic (close new window to get back to this page)

For the simple header in the second example "Good Health Information", I just use the very good and free Irfanview to make the graphic. For those not famalier with how to do it, I think I will do a post on that. When I do, I will add a link to that post here.

Getting rid of the text header

I personally believe that having a text header and a description in the header is good for search engine purpose, and I personally would not want to remove it. One of my blog reader did it this way. He retained the text header, but reduced its size to 1 pixel.

Now if despite what I said, you still desparately want to remove the header, as someone just commented, it can be done. Get into the template editor, and look for this block of code:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Testing Header Removal (Header)' type='Header'/>
</b:section>
</div>


Change locked='true' to locked='false' (To add the graphic header, you would already have changed maxwidgets='1' showaddelement='no' to maxwidgets='' showaddelement='yes').

If you do this, to remove the text header, click EDIT in the Page Element for the text header, click "Remove Page Element" and the text header (plus any description) will be remove. (see screenshot below)

Page Element: text header removal

Update: If you want the text title to be incorporated into the image, it is better to add the image as a background, making sure the image and the text have contrasting color. See Adding an image as background for the blog Header. Alternatively, you can use the method described in this post Special fonts for your blog clickable graphic header without deleting the text title

167 comments:

Buck said...

Very much obliged Peter after a lot of fuss and fedupness I got it thanks to you and indeed have added your link to my bog under blog tricks.
you have helped an old bloke no end i can tell you mate,
Buck1936

loup.dargent said...

Interesting for many reasons...
One being that I'm actually looking into adding a picture
to my Header.

So, thanks for the tip. :)

Loup

PS: As soon as I've chosen and added
a graphic, I'll list this page in
the list of Beta Hacks I used for my template.
Fair being fair and all that. :)

Shelly said...

You might want to see about widening the header here. The ads run past the header border on my PC (I'm using Firefox, too) and looks very odd. :)

Peter said...

Hi Loup,

Hope your adding a graphic to your header goes well. As soon as it is finished, I hope you will post a link to it here for us to see. And thanks for your offer of a link.

Peter said...

Hi Shelly,

Thanks for your observation about the Ad unit. I don't see this problem in other browser. Anyway, I'll see about widending the header border. Thanks

月夜天翔 said...

Yep, you certainly ease a big headache of mine, thanks a lot ! :)

dreamkatcha said...

Wow, finally a solution to this seemingly trivial issue, thanks muchius!

Previously I tried the hack where you stick img html in the title field. I wouldn't recommend it - the html appears at the top of your browser and the image is inserted in your Blogger control panel obscuring the links.

My only problem now is removing the text title of my blog - if this is all your header image consists of, repeating it in text form will look silly. For now I've dragged the header to the bottom of my template so at least the text is small and out of the way.

The hoops the Google coders make you jump through to achieve such common tasks, eh!

Peter said...

If you want to remove the Header title, perhaps you can go to layout, then click "Remove Element" for the header title. But this may have implications for your search engine ranking.

dreamkatcha said...

Oh yes I know - I read your disclaimer and that's why I was reticent about trashing it.

Dennis said...

I'm having exactly the same problem. Putting the html into the title bar crudely gets the job done, but obviously messes up the title. However, I'm going with that because, as dreamkatcha said, the title is repeated in my graphic.

I considered putting the description in the title bar, but a) it's too big and b) I don't want my blog listed with the description as the title.

I also tried to change the font to make it a) smaller and b) the same colour as my background so it would not be visible, but still be listed. However, the tags wouldn't work (even though the link to the pic works!)

Any thoughts?

Peter said...

Hi Dennis,

I don't know. However, I like the way the graphic and the header appear in my blog Guide to Malaysia so I am inclined to leave things as it is. Regarding your making the text the same color as the background, that is frowned upon by search engines as it is considered black hat SEO and your blog may be blacklisted for that.

Heidi Epp said...

Hey Peter, so helpful as always...Question for you (or anyone):

I'm having a difficult time getting a picture to be in the center of the page element (above the header). How do I resize pictures effectively?

Any ideas?

Peter said...

Hi Heidi,

As far as I can remember, I only did a "Add a Page Element", then selected "Add a Picture", then typed in the <img> tag. The picture is centered without me having to add the <center></center> tags.

Here is what I got from the page source.
<div class='widget-content'>
<img alt="kompang malaysia" src="http://img.photobucket.com/albums/v336/cikgu/MalaysiaHeader.jpg"/>
</div>

Peter said...

Hi Heidi,

Just saw this part of your comment:
"How do I resize pictures effectively?"

I use the free and very good Irfanview. Highly recommended. You can google "download Irfanview" and have it install it on your computer. I use it frequently.

Melissa said...

Hi Peter,

I have a big problem--I successfully used your instructions to add a graphic to my header, and it looks gorgeous in Firefox--but it won't show up in Explorer!! What am I doing wrong? Is this a problem other people are having?

Here's my blog: www.casting-off.blogspot.com. Please help...

Melissa

Peter said...

Hi Melissa,

Your graphic appear in both FireFox and Opera, but not in IE. I am afraid I don't know why.

Melissa said...

Thanks for your comment, Peter--glad to know the blog posts in Opera. It's not just the header picture, though, I've discovered. I used the GUI to change the font sizes and colors on the template, and those have all disappeared too! Also, the margins built in to the "Rounders" Blogger template have disappeared. I didn't mess with the standard template at all--this can't have all been the fault of my little header picture!

The other flukey thing is that the html break I put in my title description appears in Explorer but not in Safari. Could that have messed everything up?

If you have any brainstorms I'd be most grateful...

Melissa

SEN said...

Works great, thanks.

Dennis said...

Okay, so I looked at Melissa's site (above) and she has exactly what I want: a graphic at the top, with writing over it, and the title left in tact.

Any idea how I can do that?

Peter said...

Hi Dennis,

I have no idea how Melisa did it. However you should try to view her blog in Internet Explorer. It doesn't work well there. That is important because the majority is still using Internet Explorer.

Melissa said...

Dennis,

What template are you using? Because I can tell you how I did it in the Rounders template, which I used. But you should be careful, because my blog still looks awful in Explorer and no one can figure out why.

I did figure out how to get the image to actually appear in Explorer, though.

And if anyone can tell me why my header image is three times as big in Explorer, I would be most grateful!

Melissa
www.casting-off.blogspot.com

David Reed said...

Hi Peter
I'm following your directions for the header but get to this section and can't see how to "Select HTML/JAVASCRIPT:-"

Select HTML/JAVASCRIPT and click ADD TO BLOG. Then type in the img src="URL of picture" into the HTML editor and click SAVE CHANGES. Then in the LAYOUT, preview if you want, and click SAVE if you are satisfied.

Can you someone tell me how/where to do this please

Peter said...

You must be referring to this section of the post:

"Click SAVE TEMPLATE. Then click PAGE ELEMENT tab to go back to LAYOUT. You will see an extra "Add a Page Element" above the Header. Select HTML/JAVASCRIPT and click ADD TO BLOG."

After doing the what had been described above, and saving the template, there will be an extra "Add a Page Element" in the Header section of the LAYOUT. Get to LAYOUT and look for the "Add a Page Element" in the Header section. There is a screenshot
of the LAYOUT at this post (but withour the extra "Add a Page Element" in the Header section:
Adding advertisements, hit counters, etc. in Blogger Beta

Clicking on that should give you a pop-up with a list of choices. There should be one choice that says "HTML/javascript" with a "Add to blog" button at the bottom. Clicking on that button will bring out an editor to add HTML, etc.

I think I will reread my post and see if I can make any changes to make it clearer, and I think I will add some screenshot to make that even clearer.

Karen said...

Hi and thank you for the information in your blog, it was very helpful.

dkvision said...

This was very helpful!! Thank you very much! The image is off center though. Any way to fix it? Here is a link to my blog http://paintsomethingnew.blogspot.com/ I didn't really want my photo on this post either. Is that something I change in preferences?

Peter said...

Graphic off center. Are you referring to the graphic in the header? I viewed your blog in both Firefox and IE and the graphic seem to me to be centered. I have put a screenshot here Graphic in header off centered?

And the photo that you don't want. Are you referring to the photo in your profile?

Jebb Johnston said...

I understand the concern about not removing this code because of search engines: data:blog.pageTitle

However, you can remove the entire prefabricated header section and still keep that code in the template html -- I've done it with my blog. The section of code that I did remove is the "* Blog Header" bit. That doesn't negate the presence of the title code closer to the top, does it?

I have had an issue with google blog search losing me in the switch to beta, but all other search engines are picking me up as normal, so I think that's an anomaly.

Izmir Blogger said...

Thanks Peter! Very useful indeed. But how do I make the "add page element" go BELOW the title header so that I can place google ads in it? using the "page elements" in Beta?

Thanks,
Sandra (aka Izmir Blogger)

Izmir Blogger said...

Duh.. really easy! sorry for that SILLY question. All I needed to do was drag and drop! ;-)
Sandra

Peter said...

It doesn't matter where the "Add a Page Element" is as nothing is displayed. It is only after addin the page element, then it is important to drag and drop it into the place you want it displayed.

Izmir Blogger said...

Hi again,
Thanks for your reply. Another question for you on the header: I tried to include a Google search at the top (like you have on Blogger Tips & Tricks) but it a) looked funny (like it does at the bottom of this blog with the selection button for the web way out to the left and disconnected from the rest) b) I could not get it to appear below the header (like in Blogger Tips & Tricks) but within it.
Any ideas?

Peter said...

I added a working searchbar at the bottom of the page by using "Add a Page Element". I used the method described in this post to add an
Adsense ad unit below the header in this post, but I think you wouldn't be able to add a working searchbar below the header with this method. At the moment, I believe the only way is to add it via the template editor. At the moment, I have too much thing to do to try it out. Maybe next time. In the meantime, perhaps you can contact Adsense at
https://www.google.com/support/adsense/bin/request.py?
to ask them for a solution and/or inform them about the problem. Please keep us informed about their response and the method if any.

Janet a.k.a. "Wonder Mom" said...

I followed your instructions. Thank you. I am just learning so you were very helpful...I'm still playing on Blogger I'm not knowledgable enough to be brave yet.

Thank for your help!

christaw said...

For some reason I cannot get this to work. Anyone have any ideas what I could be doing wrong?? My site is http://christaw-justme.blogspot.com/

thanks!!

Unusual Learner said...

Great stuff man. Really had fun editing my blog! Your instructions were very simple yet precise and that made it helpful.

Peter said...

Hi Christaw,

I visited your blog and I could see the graphic in the header above the text title. Looks like you got it to work. Only thing is, that graphic took some time to load and also, the width exceed the width of the header. Maybe you should resize the graphic and try again. See post Using Irfanview photoeditor for your Blogger blog

JOAO said...

Hi
I found your blog really interesting and helpful.
Even being very unexperienced I managed to costumize my blog satisfyingly.

Though I'm stuck with a 'title' just underneath my brand new banner.
can you check my code and tell me how to remove it?
i use blogger beta.
I would also like the side bar to start right from the top of the page.

can you help me?

if you do find some advise and post it here please email it to joaosantos.rp@gmail.com also.

www.eastparadise.blogspot.com

Peter said...

Hi Jaoa,

I am afraid I am not familiar with the template you are using and am unable to help. Sorry.

Peter said...

Hi Jao,

Don't understand completely what you want to do with your header, but just making a guess. Maybe you can figure out a way to do what you want to do by looking for this block of code

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

and changing showaddelement='no' to showaddelement='yes'

Austin Havican said...

Peter,
I think I'm having the same problem Joao was having. I'd like to get rid of the space below the image I added. It's where the title of the blog was (and still is). I've tried making it as small as possible, deleting it from the original script, etc. Any advice? Thanks for the help (from your post) thusfar.
Thanks,
Austin

Marti Sanders said...

Thanks a ton for the help on adding a graphic to my header. I have gotten to the point where blogger is hosting my photo and i have edited the html to add an element but now when i add the html/java element I cannot get the photo url to work correctly. I have tried everything. Any suggestions. I am most likely typing something in wrong. I need a little help if you can offer any thanks so much!!
Marti.sanders@gmail.com

Peter Chen said...

Hi Marti,

Perhaps if you can give a little bit more info on your problem, we can see if we can help. Perhaps the HTML you put in the Add a Page Element box. If you have any problem getting COMMENT to accept your HTML (which I expect), feel free to email me via this blog (in the sidebar, right at the bottom)

Peter Chen said...

Hi Marti,

After your comment, I took the trouble to check the post again as there are other methods to add in a graphic, and I thought of adding an update or doing a fresh post. I found an error. A special HTML character which should be > was given as <. I have since corrected it. See if it helps.

ania said...

Thanks a lot!!

May want to mention that if people chose the clickable graphic option they may want to readjust the header borders in "edit html" under the section Header wrapper - width: :)

L.A. said...

Austin & Jao,

You can remove the title from showing up under your graphic by adding

display: none;

to the header h1 { code

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

Beth Lee said...

Thank you, thank you, thank you! This was driving me crazy, and it was just what I needed. A quick additional note, and you should tell me if there's a better fix: Since my image *was* my blog title, I didn't want to show the $pagetitle but I did want to show $description. So I added the line "display:none:" to the rule #header h1. Seems to work. My blog header is shown here: callibeth.blogspot.com

DetBlåTehus said...

Thank You!! It was driving me mad -the header thing.

Dr. Mazhar Khan said...

Thanks a lot. I have Finally Managed a decent Blog. Thanks again.
If you wan to have a look here-
Breast Cancer

Dr. Mazhar Khan

Flashy_Shades said...

thanks for your help, i really appreciate it!

Syafiq said...

can I know how to add comments to our index page like your blog? Please leave me a message please :-)

Peter Chen said...

Hi Syafiq,

I am afraid I don't understan your question. In all standard Blogger templates and also the template I use for this blog, in the index page, a link to see the comments is at the bottom of every post. You can't see the comments or make a comment until you click on the link. It is only in the individual post page that you see all the comments on the page.

Peter a.k.a. Enviroman
Enviroman Says

Syafiq said...

Peter.... I mean, how to show the comments in this comment's page to the index page, like yours.... If you visit my blog, you'll see that if you want to read my blog's comments, you first must click the comment button under my post body.... I want all those comments are on my index page.... It means that you'll automatically see my comments as soon as you visit my blog.... Like what you've done to your blog just now! :-)

Kimberly said...

Thank you! Talk about easy, simple and thorough directions! You rock!

WillT said...

Thank you very much.

New question: Can anyone here tell me how to remove the (new) Blogger nav bar and then add back the search functionality to another part of the page?

Will

Retta said...

Thank you so much ~ I was trying and trying forever to figure out this darn header problem I was having! You totally pointed me in the right direction!

Peter Chen said...

And Syafiq,

I can't visit your blog because you didn't leave the URL to your blog, and your profile don't show your blog or email either. So I have got no way to let you know I have responded to your latest comment.

Peter a.k.a. Enviroman
Enviroman Says

Peter Chen said...

Will posted a comment, but after approval, somehow the comment can't be seen, so I am reposting his comment here for him. His comment: "Thank you very much. New question: Can anyone here tell me how to remove the (new) Blogger nav bar and then add back the search functionality to another part of the page? Will"

It is difficult to answer this question in a comment, so I have done a post. and you can read it here: New Blogger (formerly beta): How to hide the navbar.

If you have any further question, feel free to leave a comment.

ze czar of blah said...

This might sound trivial, sorry!

I tried your clickable header (using an HTML widget) idea, mainly because when I tried just using the default header, my profile would show my blog as being "img src=thewebpage" instead of "Czar of Blah."

Your method resolved this, but I do have another query: would there be some way that I could make the image be unlinkable on the main index page but linkable on any of the individual post pages? (This is how the regular header operates.)

Thanks for any help.

Peter Chen said...

I am afraid not.

Peter a.k.a. Enviroman
Enviroman Says

A said...

Hello Peter,

Can you please look at my test blog and advise me on how to get rid of the empty space below the banner, leaving the image within the border itself only?

Thanks!

A said...

Hi Peter,

I have already figured out the way to solve my problem. Thanks!

Eleanor said...

Hoorah, at last, I have a picture. OK so it's a bit away over to the left, but I'm chuffed I managed it at all. Thank you muchly.
Eleanor

KatieJ said...

THANK YOU SO MUCH! I love that it was so easy for someone who is totally HTML illiterate!

Fabster said...

A big thanks for helping my blog look that little bit better :D

Lee said...

Thanks a million for your post.

Evelyne said...

Thanks for posting it but, it doesn't work on my blog... here's the message that I get when I try to save the template after the first step :

We were unable to save your template
Please correct the error below, and submit your template again.
More than one widget was found with id: LinkList2. Widget IDs should be unique.

Evelyne said...

Thanks for posting it, but i tried it and here's the message that I got when I tried to save the template

We were unable to save your template
Please correct the error below, and submit your template again.
More than one widget was found with id: LinkList2. Widget IDs should be unique.
I'm currently using the minima template, should I change it to make it work?

blogmeme said...

Yes Hugely helpful...in sorting out my site I ended up putting the title at the bottom as I found the Blog Title Fonts so limiting.

Why isn't this in Blogger help?? Blogger really need to get a more complete help page on editing html template components.

Genmobi Technologies said...

Hi Peter, I successfully used your instructions to add a graphic to my header. It's centered but I'd like it to be aligned to the left of the title and description of the blog. Is that possible? How? I'm going crazy with the new version of Blogger! Thanks a lot!

Dalila said...

Hi Peter, I successfully used your instructions to add a graphic to my header. It's centered but I'd like it to be aligned to the left of the title and description of the blog. Is that possible? How? I'm going crazy with the new version of Blogger! Thanks a lot!

George said...

My site is talkingthrash.blogspot.com.

any help on getting rid of the empty space underneath the top picture?

Peter Chen said...

Hi Evelyne,

At which point of my instruction in this post did you get the error message?

Peter a.k.a. enviroman
Enviroman Says

Peter Chen said...

Hi Genmobi Technologies,

You can try adding an align="left" attribute to the <img> tag, that is:

<img src ="photo URL"
align ="left">

Peter a.k.a. enviroman
Enviroman Says

Evelyne said...

I get the error message when I change the addelement to yes (the first step). but could it be the template that I'm currently using?
Thanks!

Peter Chen said...

Hi Evelyne,

I have done that (changing showaddelement='no' to showaddelement='yes' numerous times to numerous templates and never got an error message. The templates include those mentioned in these posts:
3 column template for New Blogger (formerly Blogger Beta)
New Blogger (formerly Blogger Beta) 3 column template modified by Stavanger of Blogcrowd forum"
New Blogger template for posting large photos, etc..

I don't understand why you are getting the error. Why don't you give the URL to the blog with which you are getting the error message?

Peter a.k.a. enviroman
Enviroman Says

Gdog said...

Just followed your awesome instructions, thanks Peter! I'm about to change my blog over to the new blogger layout design...check out my test page here:

http://gdoginkorea.blogspot.com/

Peter Chen said...

Hi gdog,

Nice blog you have with a beautiful graphic header. Hope you are enjoying the Kimchi.

Peter a.k.a. enviroman
Enviroman Says

JAHMODI said...

Hey i have been wanting to add a header to my blog and you came along and explained it to a "t",I even got my adsense incorporated into it..thank you a million times..and I added you as a link on my blog also.

Peter Chen said...

Hi Jahmodi,

Thanks for the link to Blogger Tips and Tricks and for the compliments.

Many others have also commented that my blogs contain content which are well explained and easy to follow. And like any other bloggers, I like my blogs to be read, so I hope you don't think me too greedy if I ask that my other blogs, including this one, be included in your link list. It may even help your blog visitors find useful information and the help they need by doing so. It is absolutely on a voluntary basis though. Check out my blogs:

Peter
Blogger for Dummies
Testing Blogger Beta (now New Blogger)

and this upcoming one
Dummies Guide to Google Blogger

La Nouvelle Heloise said...

Many thanks Peter, this worked like magic! I am new to the blogosphere and had learned from a book how to add the graphic into the "blog title box" which worked fine on Firefox and Safari but not with Internet Explorer. Your solution is much better.
Only thing I still need to figure out is how to make IE render my blog title (courier lowercase font) in a non-pixilated form. How I wish IE was less widely used!!

Maeven said...

Hi Peter,

I just wanted to let you know that while I haven't asked you any questions, I came here looking for the answer to a problem I've been having (PostTitle poking through my graphic header) and saw that you had already helped somebody else with the problem. I tried your solution and it worked - I've only been stuck trying to figure it out on my own for about 6 hours.

Thank you! You've been a great help.

shackk said...

thanks for your help, much appreciated

Omar Netter said...

A word about hiding the new blogger nav bar: this post shows how to hide the navigationbar by default but adds a button to later show/hide it as you wish. I think its more usable than completely hiding it; it let's you use the New post link as well.

Peter Chen said...

Thanks for the tip. However, it would have been more appropriate to post it at this post Tip: Hiding the navbar

Peter a.k.a. enviroman
Enviroman Says

Lovely said...

Hiii Peter,
Can we do same on New Blogger, what i see on your blog is all related to Beta. HOpe you would come up with New BLogger tricks. Thanks in advance

Guardian Investors said...

Thanks for the header graphic tip. I got it work as a clickable. http://www.guardiandeals.com Now i'm looking to figure out how to insert "Read More" or "Continue Reading" links to shrink the size of my posts on the main page. Thanks again for this help!

Guardian Investors said...

Thanks for the header graphic tip. I got it work as a clickable. http://www.guardiandeals.com Now i'm looking to figure out how to insert "Read More" or "Continue Reading" links to shrink the size of my posts on the main page. Thanks again for this help!

Peter Chen said...

Hi Guardian Investor,

Glad to hear you got everything fixed up. Regarding expanding post summary (Read More ....), I have described it in this post: Expandable Post Summary for the New Blogger (formerly Blogger Beta).

Peter a.k.a. enviroman
Enviroman Says

MrBrownThumb said...

I've been searching around and I came across your blog through your comments in another blog.

I've hacked the header and added more page elements so I could add a clickable image in the header. I was wondering if removing the title and description would hurt a blog, when I saw your comment that it would hurt you in searches. So I'm wondering if there is a way to make the blog title and description font some real small font like 1 pixel and the same color as your background to hide it so you don't have to remove it at all?

You can see the blog I want to do it at Here.
As you can see I have a clickable banner but I still have the blog title. How can I get around it without having to remove it and hurt my searches?

Peter Chen said...

Hi Mr Brown Thumb,

Are you sure you are not Mr Green Thumb :-) What is the signifance of Brown Thumb?

Regarding your question, perhaps I should first mention that I am not an expert at SEO but if I remember correctly, the lessons in WebCEO (see post SEO tools for blog post using Overture and WebCEO), it did mention that the text header and description is important for search engines to determine what a site is all about. Perhaps you would like to download WebCEO and read their lessons (free without the frills) and check it yourself.

I see you have already reduced the size of the text header. I think reducing it to 1 px is a good idea as size does not matter to the search engines. You will only be blacklisted if you try to make it invisible by using the same color for the text as the background.

Peter a.k.a. enviroman
Enviroman Says

Peter Chen said...

Hi Mr Brown Thumb,

There is another probably better way. Look at this post: Adding graphic background to blog Header. In this case, you do not have to remove the text Header.

Peter a.k.a. enviroman
Enviroman Says

MrBrownThumb said...

Hey Peter,

Thanks for the response. Yesterday as I was playing around with the template I realized I could shrink the title's font. I think I'll keep it like that for now and not risk getting penalized.


I chose MrBrownThumb as a screen name one day for my main blog because it was memorable and because I kill plants from time to time so my thumb isn't very green. :)

Anyway thanks for the help and for responding.

tai haku said...

Hi - The hack worked but I have white space under my graphic - see here: http://tai-haku.blogspot.com/
Any ideas why? Many thanks.

Peter Chen said...

Hi Tai Haku,

I viewed your blog with Opera browser and I could see no empty space below the image header. See the screenshot here: White space below the imgage header?. I also checked with FireFox and the result is the same. What browser are you using?

Peter a.k.a. enviroman
Enviroman Says

tai haku said...

I use internet explorer Peter. Its a white strip the same width as the image and perhaps a fifth of the height. I really appreciate your site and advice.

Peter Chen said...

I checked with 3 browsers - Opera, FireFox, Internet Explorer, all the same, no white space below graphic. Perhaps you may want to check screenshots in various browsers. Check out this post: How to get screenshots of your blog in various browsers and with various settings.

Peter a.k.a. enviroman
Enviroman Says

Whitney said...

I am desperatly trying to get rid of my header. I hate that it's below my graphic. I've tried going to layout and remove element. But it doesn't give me that option. ANy ideas? I know it can be done as I've seen many bloggers with graphic and no header. Question is.. how?? Thnx!

Peter Chen said...

Hi Whitney,

I personally wouldn't want to remove the text header (plus any description) as I believe it is important for search engine to determine what your blog is all about, but if you still want to do it, I have updated the post and you will see the instruction at the bottom of this post.

A better way perhaps is to have an image as a background and to make sure that the text Title have a contrasting color with the color of the image. Refer to this post: Adding graphic background to you blog Header

Peter a.k.a. enviroman
Enviroman Says

Elsie said...

Peter, Once again you have helped me.
I started a new blog (my third one) tonight and it was so easy to put a picture in the header.

I would maybe make some changes to it at a later stage, but for now it is ok.

thanks, as usual, your link will also appear on this new blog tomorrow night.

If you like, you can have a look: http://ezi-kids-stuff-galore.blogspot.com

Peter Chen said...

Hi Elsie,

Nice granddaughter you have. I too will become a grandpa soon. You can view my future grandson at My first grandchild. And thanks for the offer of a link. I like any other bloggers are always hard up for links, and links are greatly appreciated.

Peter a.k.a. enviroman
Enviroman Says

2Jins said...

Dear Peter Chen,

You are the best of the best. I've googled everywhere trying to find the best way to change my blog header. I wish I found your blog earlier.

I thank you for the bottom of my heart and congrats on being a new granddaddy!!!!!

Fiona said...

I know this is an old post for you, but thank you so much for showing how to insert a picture into the blog header - as someone with no knowledge whatsoever of html it was invaluable. Many thanks.

Med said...

hello peter.. thanx for ur wonderful hack..
i was searching for this and thankfully u got it well explained..
But kindly look into my blog, it still shows the green color of the header color though i have deleted the header as u have mentioned..

kindly help me fix this..

www.medtape.blogspot.com

sorry for the trouble..

TheProudestMonkey said...

Thanks for all the great tips. Unlocking the header was exactly what I was looking for!

The Rhyme and Reason

Swerl said...

Thanks for the tip! The placement's a little wonky still, but it's there!

http://swerl.blogspot.com

Nancy said...

Hi Peter,

I'd like to insert a graphic into my header that is exactly 750 x 150 px. How do you adjust the header width so that the graphic fits into it properly?

Currently, my plan is to have my custom made graphic at the top of the page, then a small header title underneath it (like your Malaysia blog, but with a wider graphic).

Any suggestions?

Peter Chen said...

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

Peter
Dummies Guide to Google Blogger

dwianakitchen said...

Hello,
I just found your blog, it is very helpful. I am a new blogger there are many things I still confuse about html.
Can you help me to figure this out. I try to add effects upon page enter. I got the code and paste it under head but I don't know why it wont work. I can't copy the html code here, it won't allowed me.

after I click on save, come up like this:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "META" must be terminated by the matching end-tag "".

Will appreciate your help.
Many thanks,
Dwiana

Daniel Sabater said...

Oh thanks! Just updated my blog in no time thanks to your post. Great job!

Zahra said...

Thanks for the tips!

Lisa said...

Thanks so much! This was great. I've been trying to figure out how to get a pic in my header for a while.

huamulan03 said...

Thanks for the tip (added a link to you, too ^^)

Amanda said...

Thank you so much for this tutorial! It really saved me alot of time!

Russellji said...

Peter,

Thank you very much. I have been trying to do this in various versions of blogger for the past 18 months.

You fixed for me.

TA!

MTNH said...

I have a question.. as you can see on my (brandnew :) blog, I tried to replace the header text with an image but failed. I don't want text AND an image, I just want a picture over there.. do you have an idea how I could fix that?

And, I also can't figure out why the second "divider" has been succesfully replaced with an own picture, but the first one is still there.. thanks in advance!

MTNH said...

I am so sorry, I already found it somewhere else on your blog. Thanks!

Blogger said...

Can you please help me out with this - How can I change the title of my blog to the title of my posts. Meaning, when someone clicks on my post link, instead of my Blog name being displayed in the blog title, I wish to have my post title out there.

Thanks!
Allan.

Peter Chen said...

You mean change the blog title in the Header to the post title. It is not possible.

Peter (Blog*Star 2006 and 2007)
Blogger Tips and Tricks

Blogger said...

Peter,

Thanks for your reply. Its possible. Check this blog http://labnol.blogspot.com/ - Click on any of its posts. The title changes to the post title and not the BLOG TITLE.

Peter Chen said...

Hi Blogger,

I did surf over to the link you provided and th Blog title was Digital Inspiratin. I clicked on some individual post pages, including one titled "How to Overcome Blogger's Block" and I still see Digital Inspiration in the blog title. Only the post title changed, which is normal. I don't know if we are talking on the same wavelength.

Peter (Blog*Star 2006 and 2007)
Blogger Tips and Tricks

Blogger said...

Peter,

Thanks for your reply.

I mean to say the PAGE Title - -0 The Internet Explorer page title, not the post title.

In our blogs, the page title remains the same (BLOG NAME), even after we eneter individual posts.

But out there, when we enter individual posts, the PAGE Title changes to the 'Title of the POST' itself.

This feature gives the blog a higher pagerank on Google too.

Peter Chen said...

Hi Blogger,

I still have some difficulty following what you want to say in your comment, but I am guessing. Maybe you need to enable individual post pages. This is enabled by default in Blogger, but Blogger has been know to change the settings of blogs without the blog owner doing anything. It has happened to me. Go to SETTINGS > FORMATTING and make sure Enable individual post page is set to Yes.

Peter (Blog*Star 2006 and 2007)
Dummies Guide to Google Blogger
"online book" in progress

Blogger said...

The PAGE Title - Windows Browser Page title.

HotSauce!! said...

Hello,

Where can i find graphics that i use for my blog. I'm very picky and i have an idea of what i want but i don't know where to look and then how to do so. I'm lost. HELP!

British Gal Does Tokyo said...

Thank you so much for your brilliant tips. I am new to blogging and your advice is really, really helping me.
I do have a question:
how do I shrink the height of the title bar and the graphic? With a graphic and the title, it takes up too much space
http://britishgaldoestokyo.blogspot.com/

Peter Chen said...

Hi British Gal,

Regarding your question about reducing the height of the Header, I have actually done it for this blog Business, travel and leisure. However, since it was sometime back, I couldn't remember exactly how I did it. I check the template and sort of came to a conclusion that you cannot do it via the CSS. It is hard for me to answer you in the comment, so I have done that in this post. How to adjust the height of the blog Header with a graphic. If you try if, I hope you will let us know the outcome by commenting in the post again.

Peter (Blog*Star 2006 and 2007)
Blogger Tips and Tricks

British Gal Does Tokyo said...

Hello;
Thank you so much - I didn't notice the update at the bottom of your post and so I had a graphic and a header at first(taking up much of the page on my small monitor!)
But the update (title on graphic is a better choice for me) and I will try to shrink the graphic further.
I really appreciate your help and your fantastic website.
-British Gal

Norman Roberts said...

thanks for the help, you can see the results here
http://nosubscriptionrequired.blogspot.com/
regards
Norman Roberts

Tammy Snyder said...

Hi Peter. I was happy to find info. on header text overlapping image. I, too, want to move my image to the left of the header and keep the text to the right of it. I tried your advice but without success. Here is my template I am using. Could you please look at the code and show me exactly where it is to put this align= "left">. It didn't work for me so perhaps I put it in the wrong place. Thank you.
Template is at hhtp:www.thurboeders.nl/
It is the "DownRight Blogger Theme-v1.4.
Thank you so much for your help!

Tammy Snyder said...

I don't want to be a pest, really I don't. I just don't know if my two comments went through to you or not. If you don't mind, could you, if you get this, please email me at novelimagination@yahoo.com to let me know you received them. I am having the hardest time trying to get help with moving my header image out from under the title/description and I think you could best help me. I really would like to know if you got them or if I should resend my request again. Please don't put my email address on the bloggerfordummies site. Thank you for your help...if you're getting this of course.

Peter Chen said...

Hi Tammy,

I am afraid I didn't get email notification for your comment. So sorry if this response is a bit late. Are you not able to drag the Page Element in the LAYOUT to wherever you want?

I have never come across a problem like this so I am guessing a bit. Can you check your template and see if the section for the Header or the widget has this line

locked='true'

If so try changing it to

locked='false'

Remember always to Backup template PLUS Page Elements before you do any editing of the template.

Peter (Blog*Star)
Blogger Tips and Tricks

Peter Chen said...

Hi Tammy,

Again your comment dated 7/26/07 didn't get email notification and my apology for the late response again. Regarding

align= "left">

I am afraid I don't have enough information to go on.

Peter (Blog*Star)
Blogger for Dummies

Peter Chen said...

Hi blogger,

"Can you please help me out with this - How can I change the title of my blog to the title of my posts. Meaning, when someone clicks on my post link, instead of my Blog name being displayed in the blog title, I wish to have my post title out there."

I am sorry but I didn't get email notification for your comment so apologise for late reply. I am not sure what you want. Is it that you want what is displayed in the blog Header to change to the post title. I am afraid if that is what you want to do, it is not possible.

Peter (Blog*Star)
Blogger for Dummies

Peter Chen said...

Hi Med,

I am afraid I didn't get email notification of your comment so I apologise for this late response.

"hello peter.. thanx for ur wonderful hack..
i was searching for this and thankfully u got it well explained..
But kindly look into my blog, it still shows the green color of the header color though i have deleted the header as u have mentioned..

kindly help me fix this..

www.medtape.blogspot.com

sorry for the trouble.."

I am afraid I don't see any green color in your header so you must have fixed your problem.

Peter (Blog*Star)
Generating Revenue from your Website

Peter Chen said...

Hi Lovely,

I am afraid I didn't get email notification of your comment so I apologise for this late response.

"Hiii Peter,
Can we do same on New Blogger, what i see on your blog is all related to Beta. HOpe you would come up with New BLogger tricks. Thanks in advance"

Blogger Beta is now out of Beta is is New Blogger or just plain Blogger, so whatever works in Blogger Beta will work with New Blogger.

Peter (Blog*Star)
Blogger Tips and Tricks

Peter Chen said...

Hi Evelyn,

I am afraid I didn't get email notification of your comment so I apologise for this late response.

"I am afraid I didn't get email notification of your comment at
http://testing-blogger-beta.blogspot.com/2006/09/adding-graphic-to-your-blog-header.html
so I apologise for this late response."

New Blogger is very fussy with template and I have come across this problem numerous (error messages) times even when everything seemed OK. Once there was a message that Link List widget whould be unique (or something like that) when I don't have any Link List in the template.

If you really want to take the trouble to get this working, maybe you should consider Backing up and editing your New Blogger template PLUS backing up the Page Elements, get a fresh standard Blogger template, reload the template you want to use and start all over again, including putting back any deleted or empty Page Elements.

Peter (Blog*Star)
Blogger for Dummies

Michael Erik said...

Peter

If I wanted to use 2 different colors for my header text, how do I do this (is it possible) in blogger tic tac? It seemed not to accept html tags to do so, in the settings-basic area Thanks!

Michael Erik
www.qualityblogger.com

Peter Chen said...

You mean the blog text title? I tried that for Tools for bloggers to change that via SETTINGS > PUBLISHING and adding an inline CSS

Tools for <span style="color:red;">Bloggers</span>

but got an error message:
"This title cannot be accepted: Tag is not allowed: <span style="color:red;">"

Will try again for the blog description but expecting the same problem.

Peter (Blog*Star)
Blogger Tips and Tricks

de_naturaleza said...

hello Petter,...
i would say thank to you.., couse your http://blogger-tricks.blogspot.com, is very helpfull to me,.. if i have a confused abaut the blog i always opened your blog, to review the tricks.
...greatfully, my adsense have recent approved by google.
please review my blog:
http://ismailhidayat.blogspot.com
http://musicallyric.blogspot.com
http://urbanplanningtheory.com

now i still to prepare be a succes blog, maybe you want help me???
do you remmember about the scrollbar, now i have too (in http://ismailhidayat.blogspot.com)

yess... i think you want help me, couse you are a kind man....hehehe :)

so...what should i do with my blog???
ok...thank and success to you Petter.
my Id for Yahoo Mesenger is de_naturaleza, maybe you want a friend to chatt with...
and also my email is denaturaleza@gmail.com

...thank.

Peter Chen said...

Selamat hari de_naturaleza,

Please do not leave your email address in comments as it will be harvested by email harvester for spam. Further, I prefer to answer via comment rather than private mail so that others can read the response.

Regarding
http://ismailhidayat.blogspot.com
I think you are doing just great.

Regarding
http://musicallyric.blogspot.com/
I don't like the template although it may impress people. The graphic may look nice but distracting and make some text difficult to read. Further, I would suggest using a 3 column template. For reasons, refer to Best Blogger template for AdSense and others.

There are plenty of 3 column templates, more on the way when I have the time:

New Blogger template modified by Stavanger
Dots New Blogger template with Header
New Blogger templates modified by Ramani
New Blogger templates by Isnaini
New Blogger templates by Thur
Ramani's New Blogger Neo template
New Blogger template by Final Sense
New Blogger templates by BloggerBuster

Regarding
http://urbanplanningtheory.com
Server not found

Peter (Blog*Star)
Natural Remedies

Peter Chen said...

Selamat petang de_natureleza,

Saya pasti sekarang masa petang di Indonesia.

Forgot to add. Please do the following in the future. Copy-paste the URL of the post into Notepad file, save it into a "to do" folder, come back to the post to check for response.

Peter (Blog*Star)
Alternatives to AdSense

Jill said...

This is very informative, but is there a way to use an image map with the header in the new blogger. I did this with the old version and would like to with the new but I cannot figure it out. I have the image on my page but can't figure out where to put or how to use the image map I have set up for my image. HELP! my blog is justtherightscrap.com.

Jill said...

i miss typed my blog name. it is justtherightscrap.blogspot.com

Peter Chen said...

Hi Jill,

I am afraid I don't understand what you mean by image map. Is it an image which is divided (invisibly) into different part where if you click on different of the image, you get linked to different sites?

Peter Blog*Star
Blogger Tips and Tricks

Melody said...

Thank you so much! I thought I was going to make myself crazy trying to figure this out!

I reduced the size of my header title and made it white so you couldn't see it. I don't like how its so top heavy because the space for the title is still there.

Is there a way to get rid of the border on the header???? Please advise. Thank you!

http://penniesinmypocket.blogspot.com/

Peter Chen said...

Hi Melody,

Making your blog title invisible by making the font color same as background. That is black hat SEO and can get your blog banned by search engines. Unless you don't care about being found by search engines, I would suggest you immediately do something about it. There are other ways to not delete the blog title like maeking the font very small like 1 pixel (However, I am not very sure if search engines also consider this as black hat SEO and don't have the time to research that.)

Alternatively, make the blog description as a kind of blog title:
Making your blog title font very small.

I much prefer to leave the font as it is as described in this post, and as demonstrated in the blogs
Good Health Information
Guide to Malaysia.

However, it is all a matter of preferences. Some bloggers are very fussy about how their blog looks like, and to that, I have nothing to say.

Peter Blog*Star
Blogger Tips and Tricks

Aeris Cloud said...

Thank you so much! I was finally able to get rid of that pesky, uncentered header border that kept popping up behind my banner picture.

Peter Chen said...

Hi aeris cloud and others,

Thanks for feedback and for taking trouble to express appreciation. We alway appreciat feedback and appreciations encourages us to battle on.

Many thanks

Peter Blog*Star
Generating Revenue from your Website

kate said...

Hi, again.

See--I was trying to find the answer on my own. ;>

I don't have "add page element" on my template tap anymore. Under the page elements tab it says "add and arrange page elements" but it does not have "add page element" either in my list of sidebar items or in the rest of the template. The edit option is there. but, I cannot arrange elements by dragging or add new ones.

Help? (Hmmm...not happy with new layout feature.)

Thanks!
Kate

Peter said...

Hi Kate,

I suppose you know how to take screenshot, if not, refer to Making and editing screenshots.

I don't quite get you. In Layout, there is "Add a Page Element" (no edit), and below that various Page Elements that had been added and have a link "Edit" to edit the Page Element added. Nothing corresponding to what you describe.

Peter Blog*Star
Successes with Kontera ContentLink

kate said...

thanks for trying to help. the problem is exactly as described. it sounds like it may be a blogger problem. i've asked for help there and will hope they can sort it!

crustcake gerf said...

Hi there, I am trying to set it up so I have a header image as well as a banner ad above the header. I made the changes so that I can now 'add page element' in the header, but when I add an HTML/Javascript element and include an image embed, both that image and the original header image become distorted.

See my blog here and compare to this screenshot of when I added another image to the header.

You can see how the 'test' image becomes stretched vertically despite my specifying the height as "88".

Any idea why this is happening? I am trying to add the ability to have a leaderboard banner ad at the very top (where that 'test' image is)...

Peter said...

Hi Crustcake Gerf,

I understand that Blogger made some changes that affected graphics in the blog Header and that some or all of it may have already been fixed. I am a bit out of touch, as I have no time to stay active in the Google Blogger Help group (BHG) and I would suggest you post your question there. I would draw the attention of the other Blog*Star to look out for your question and hope you get it all sorted out. Will appreciate feedback when your problem is solved.

Now hope you don't mind me taking turn to ask you something:

1. How did you get this post?

2. Also, like to let you know I supported my 2 sons through college on my pension supplemented by income from blogging. If not for blogs and Internet, I would be in financial difficulties. I hope to help other bloggers who need to generate income do the same. I and an Australian relative is trying to set up a website to help bloggers earn some income from their blogs. I am more comfortable now financially, but still hope to start something that can help other bloggers have the same opportunity as I had plus leave behind an online business I hope my sons will take over. I hope to interest you to join this temporary Yahoo group Yahoo group - Blogger Dough

3. The above Yahoo group is preferred as it offers more flexibility in keeping members updated, but if you don't have a Yahoo account and don't want to create a Yahoo account, an alternative would be the Google group: Google group - Blogger Dough. You are encouraged to subscribe by email as if members joins Google groups where members have chosen "no email", it is much harder to keep members updated such as when there is a task available or when we have a new advertiser looking for bloggers to publish a post.

At the moment, we only have 1 advertiser which need blogs that have PageRank 3 and above, and if you want an easy way to find the PageRank of your blog or blogs or any other websites, refer to How to easily find the PageRank of your blog or blogs or any other websites

Even if your blog do not have the required PageRank, I would still encourage to join as our website is not even ready yet, so just having 1 advertiser is already very encouraging. In future, we will have advertisers with different requirements and by joining, you will be kept updated on developments. You may also follow developments at Suppliment your income by blogging. As you continue to update your blog or blogs, your PageRank will eventually increase, so don't be discouraged by low PageRank.

Bookmark that blog or wait till I put a "subscribe by email" box in the blog, but hope you will first join the Yahoo group or less preferred, the Google group.

Peter Blog*Star
Blogger for Dummies

Jake said...

Hello,

I came across this post in search of help with regards to putting an image above my blog title. I was able to get one image where I wanted it but when I added an additional image, it showed up below the first image rather than next to it.

I am trying to make the switch from my old template to the new blogger template but many of the things I added to my old template didn't transfer. I've been working on ways to add the elements and this is the only one I am stuck on.

My website is motownsportsrevival.blogspot.com

The banner at the top with all 11 logos side by side is what I'm trying to duplicate. I was able to get the effect at the bottom by simply adding the code from old template into the new template. However, I ran into problems getting the logos from the top of the page into my new template.

Long story short, do you know how I can get all 11 logos side by side at the top of my blog?

Any help you can give me would be awesome.

Thanks!

Jake

Peter said...

Hi Jake,

I suppose you have all the logos in the appropriate size. There may be other ways of doing it, but one way is to set up a single row 7 column table using the table HTML <table>, display the logos as framed by the table take a screen shot, display it on the web then upload it to the blog header.

Peter Blog*Star
Blogger FAQ (Frequently Asked Questions)
(Blogger FAQ in progress. More will be added as I have the time)

Jake said...

Thanks for the info, Peter. I'll give it a shot. I'm sure I'll be back for more helpful tips in the future since you have so many to offer. I could spend days just following links from one of your posts to another.

Thanks again!

Take care,

Jake

Jasmin said...

Hi, I'm not sure if you're still helping out those who comment. I ran across your blog when formatting my 3 column blogger template. Everything looks good other than the fact that my header description is not centered...even though the title is. Strange.

My blog is at: www.jasminlovescoffee.blogspot.com

Thanks in advance for any help you can provide. :)

Jasmin

Peter said...

Look for this or something like this:

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

add text-align:center;
so it become

#header .description {
text-align:center;
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Jasmin said...

Hi Peter,

Thanks for your help. Unfortunately, it still didn't work. For some reason, the blog description is uncentered when viewing in Firefox, but is centered when using IE. Maybe it's nothing html related?

Thanks,
Jasmin

nprphotography said...

Hello,

I tried to add the "Add a Page Element" but instead it reads above the header, "Add a New Widget".. Please help!

thanks!

Patriot said...

Blogger started with the name "Page Element" and later changed it to "Gadget". They are the same.

Jade Zoë said...

Hello,
I tried to switch from a 2-column Blogger (template back-uped) to a 4-column Blogger. I copied the template from: http://4columnblog.blogspot.com/search/label/template.
Into a clean edit template section.
Then I tried to include some of my widgets from the back-uped template. But it constantly gives me errors like:Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "b:section" must be terminated by the matching end-tag "". Or same with "b:includable". Can you help me?
Thanks in advance, doing an amazing job here!
Jade Zoë; share-express.blogspot.com

Patriot said...

Do I understand you correctly that you signed into Blogger.com (dashboard) > Layout > Edit HTML to open the template editor, deleted the old template, copy from 4 column template and paste into the template editor, edited (add) something to the template and then could not save the template (error message)?

Patriot said...

"I copied the template from: http://4columnblog.blogspot.com/search/label/template Into a clean edit template section. Then I tried to include some of my widgets from the back-uped template."

Are you using a old classic Blogger template or the new XML template?

Manisha Kumar said...

Hi Peter,

Please have a look at my blogger site here : www.vcreative.in

Please help me remove that line (border) from the header........it looks very ugly there.

Bests,
Manisha

Patriot said...

Manisha, refer to How to remove blog Header border.

Lost in Scandiland said...

Hi Peter,

I have created an image map header with a few roll overs in Adobe Image ready. I have uploaded the images to photobucket, put that info into the html/java script, and it works fine on browsers and it also works in my blog posts... However, when I try it as a blogger header only the image map works, no rollovers :/ Any ideas?

http://jordans-blogg.blogspot.com/