Saturday, April 28, 2007

Another way of adding graphic to your blog Header

I have previously posted various ways of adding a graphic to your blog Header. See

New Blogger: Adding a graphic to your blog Header
New Blogger: Adding graphic background to your blog Header (click BACK button to get back to this page).
Special fonts for your graphic Header and without removing the text title

I have found another way to add a graphic header, however a test showed this to be an unsatisfactory way. See Testing adding graphic header. Maybe you can experiment to make the result acceptable, but I don't want to try as the above methods are well acceptable to me. (Note: You will see the blog text title together with the graphic. If you have incorporated the blog text title into the graphic and want to remove the blog text title, in the method described below, you can delete the text from the "Blog Title" field). I will be repeating this test again later when I have the time and either update this post or publish a new one. Also in the example above, you see the graphic extending beyond the boundary of the Header. If you don't want this to happen, you should resize the graphic with a photo editor or use the free and very good Irfanview as described in the post: Using Irfanview photo editor for your blog. Click BACK button to get back to this post. I will probably have to redo this post or do a new post to explain this method better).

Anyway, if you want to do it, this is the way. First you have to have the graphic saved in your computer or uploaded to the web. Sign into Dashboard. Click Layout for the relevant blog. You will see a Page Element right at the top of the Layout with the title of your blog. Click edit and you will get this pop-up:

Another way to add a graphic Header

Click BROWSE and locate the graphic you have saved in your computer or type in the URL of the hosted graphic on the web. Then click "Save changes".

19 comments:

  1. I figure you might be able to help.
    I tried to copy and paste the code that from this blog into a blog post on my blog (to show my readers how to get a Digg button)
    But of course, it won't post verbatim, because blogger reads it as code, so for now I just told my readers to go to the site for the code.
    I use Mozilla and I am on the new blogger. I know the answer is probably simple. I'm sure you know what I need to do.

    ReplyDelete
  2. Hi beaj,

    I have tested it out and it wasn't difficult. See the report of the test in this post: Testing adding Digg vote button into every posts. Instruction to make it easy has also been added. Hope that helps.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  3. Hi beaj,

    I have tested the hack given in the site in your link, found that it worked and have posted a report on the test at Testing adding Digg vote button in every posts plus provided some description which I hope can help readers use the hack easier. I have tested it on this blog Generating Revenue from your Website. You can surf over there and test the buttons yourself. The hack is useful and easy to implement, I think I will do it as well for the rest of my major blogs.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  4. Peter, actually, my question wasn't about the hack, but more simpler than that.
    I want to know how I can simply paste and post the instructions on my blog in plain text.

    ReplyDelete
  5. Hi beaj,

    I don't fully understand your second comment but am guessing you are having difficulties displaying special characters like < like what I have done in my report Testing adding Digg vote button hack. If so, may I refer you to this post: How to publish special characters in your post. I hope that is what you are referring to.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  6. Thanks Peter, that is what I was looking for. I would think that Mozilla would have made it easier by now though.

    ReplyDelete
  7. It does not matter what browser you use. The proceedure is the same.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  8. Hi . . . thank you for this tip. Don't know why I never noticed it before. I have previously added a link to change the header image and it worked fine, except on Internet Explorer, where it simply doesn't show up! I thought it was a size problem but it doesn't seem to be.

    So today I tried using this tip of yours and it won't work! I did it with a totally different image and the header stays the same. Is this because of the code/link in the template that I have linked to the graphic on the web?

    Thank you.

    ReplyDelete
  9. Hi meeyauw,

    As mentioned in the post, I find this method unsatisfactory and haven't used it except for the test. I previously have no problem viewing the test blog, but today, I get 404 (Page not found) both from the link, and even when clicking View from the Dashboard. This is with FireFox. I don't know what is the problem and don't know whether it is worth the while redoing the blog by loading a new browser, redoing the header graphic etc as it is only for demonstration purpose and I am not happy with the result. The post is just to inform my readers that there is another way.

    Come to think of it, it wouldn't take long, and I think I will do it.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  10. I have reloaded the template. That is all I did. I didn't even have to redo the header and it is back on line again. Don't know what caused the previous problem as after creating the blog, I never do anything with it. You can view it here: Test adding graphic to header another way.

    Anyway, I don't know if that is your problem.

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

    ReplyDelete
  11. Hi Peter,
    A novice here, I am really impressed by your attitude and knowledge. Yesterday I spent nearly three hours sifting through the Blogger help groups to see where I could leave a query about the header dropping behind the intro when I tried to upload a photo. So I found you! And learned a good deal as I do every day in this endeavour...so I changed templates as suggested and the header reappeared! Happy Birthday. I'll see if I can inspire my husband --just turning 60--to learn to blog for his grandchildren! Thanks.

    ReplyDelete
  12. Hi Calla,

    Thanks for the kind words. Regarding "persuading" your hubby, draw his attention to youngest "blogger" in the world especially if he has grandchildren. Tell him I have entered my grandson into the hunt for the youngest blogger in the world and we are seeking more contestants. Don't know about your family, but I would have been in financial problems (children's education) if not for blogging. Draw his attention to what is in my signature line too. Perhaps at least one of these may be enough to lure him into this highly addictive hobby.

    Peter Blog*Star
    Blogger Dough
    (Blogging helped my put 2 sons through college on my pension and if not for blogging, I would have been in financial difficulties. We want to help you do the same)

    ReplyDelete
  13. Hello! I can´t get help any where.I have a big problem with my header. I have a picture there but it dosen´t show!! I can change the picture and that but it dosen´t show on the blog. Everthing has been fine but i don´t know what the problem is.CAN you help me??? What must i do to get it wright?? I WANT my header picture back! PLEACE i hope that you can help. HUgs Christa

    ReplyDelete
  14. Is it that you have uploaded your image but don't see it in the web? Perhaps you are seeing a cached copy. Most will suggest clearing cache and cookies but I prefer to use a different browser to see the change

    ReplyDelete
  15. i can't remove my image header . when im click at the 'edit' at header layout, the box appears but then before i manage to change the html, the current image is shown .

    when i click ' remove image', the image will disappear for a few seconds n then it will show the same image again .

    i already tried quite a lot of times but it didn't work out .

    what should i do?

    ReplyDelete
  16. Sorry I have never faced a similar problem (and too lazy to try to reproduce what you experienced). But what I would do in a situation like that is to use a different browser (see why you should be using more than 1 browser. In my opinion, that is more convenient than clearing cache and cookies.

    ReplyDelete
  17. Hi,

    Could you tell me what size the image header should be ? I'm having a hard time figuring it out

    Thanks

    ReplyDelete
  18. You can choose "shrink to fit".

    Alternatively to find width of Header, go to Dashboard > Layout > Edit HTML and look for

    #outer-wrapper {
    width: 990px;

    and

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

    ReplyDelete
  19. thanks

    I'm not sure I fully understood, but it'll help me figure it out ;)

    http://ssahuntsic.blogspot.com/

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics