Search This Blog

Sunday, January 29, 2006

How do i post a photo on my blog title bar

Update 13 March 2007: Statcounter (a hit counter which gives comprehensive statistics (click "BACK" button to get back to this page) showed people looking for methods to put images in the blog title is landing on this page. My concern is that many of these seekers are already using the New Blogger template. If you are one of them, the posts you should refer to are
Adding image to your New Blogger blog header,

Adding graphic background to your New Blogger blog header

How to put image or logo on the side of your New Blogger blog Header

Special fonts for your blog clickabke graphic Header without removing the text title




Question: " how do i post a photo on my blog title bar where my blogs name is written?"

You mean something like this: Backyard Organic Farming?

Well, first you must get your photo hosted on the web with perhaps the free Photobucket. If you don't want to do that, and you want Blogger to host your photo. To see how it can be done, have a look at this post: Getting Blogger to host your photo for the profile, Header, etc. Then sign into Dashboard, select the relevant blog, click TEMPLATE tab, and look for the block of codes that start with <div id="header"> and ends with </div> and refer to the block of codes below:

<div id="header">

<h1 id="blog-title">

<img src="http://photos1.blogger.com/b...colo.gif">

</h1>
<p id="description">A blog about my brush with organic farming in my little backyard garden.</p>

</div>

Replace "http://photos1.blogger.com....colo.gif" with the url for your photo and replace the description "A blog about....backyard garden" with your description.

If you want the graphic together with the text title, then do this:

<div id="header">

<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<img src="http://imageurl.jpg"><$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
<p id="description"><$BlogDescription$></p>

</div>


Just replace the http://imageurl.jpg with the actual url of your photo.

UPDATE 7 October 2006:

To make the graphic in the Header clickable to go back to the home (main/index) page


A reader of this blog asked how to make the image clickable to go to the home page, so what I have done is to do some experimenting on a rarely used blog to put in the clickable image: Sheryl's template (close new window to get back to this page). Try clicking on the graphic in the header and see where it takes you.

For that blog, I am using the Minima Black template. If you use other templates, the codes might be slightly different. Here is the original code for the header:
<div id="header">

<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
<p id="description"><$BlogDescription$></p>

</div>

What you have to do is to delete <$BlogTitle$> and replace it with
<a href="<$BlogURL$>"><img src="http://img.photobucket.com/albums/v336/cikgu/backyardorganicfarming.jpg"></a>

You will of course got to replace the URL of the photo with the actual URL of your photo you want to put in the header. The code then become:
<div id="header">

<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<a href="<$BlogURL$>"><img src="http://img.photobucket.com/albums/v336/cikgu/backyardorganicfarming.jpg"></a>
<ItemPage></a></ItemPage>
</h1>
<p id="description"><$BlogDescription$></p>

</div>

Note: If you don't want to scroll throught the scroll box to see the codes, you can click on the inside of the scroll box, press ctrl+A, right-click on the mouse and select copy, then paste it into Notepad. Then you will be able to see the whole text. I am forced to put the codes into scroll boxes, otherwise the long codes will send my sidebar sliding to the bottom of the page.

69 comments:

  1. Anonymous11:27 PM

    Hi, on this topic, how do you remove the title from appearing over the image you uploaded for the header? Can't figure it out. Any help is greatly appreciated. Thanks!

    ReplyDelete
  2. Anonymous11:53 PM

    THANK YOU! I've been going nuts trying to do something like this. It isn't exactly what I want but it's pretty darn good for now. THANK YOU for sharing your expertise. A million times thank you.

    ReplyDelete
  3. Thank you, Thank you! I have been banging my head for days trying all sorts of ways to do what was so simple in HTML that seemed to confound me in CSS. I posted a link back to you.

    ReplyDelete
  4. I can finally go to sleep now ;-)
    The next step is to determine the distance between the header image and the name of the blog ...
    I'll save that for when I'm turning pro.

    ReplyDelete
  5. excellent.

    Ta very much. Been wondering how to do that.


    www.weegamers.blogspot.com

    ReplyDelete
  6. ur words of technical support is toooooo good.But tell me what if i want to put the blog title on top of the picture?

    ReplyDelete
  7. hoodi, I can't display html tags here, so the answer is in the post. I have added a section in the post.

    ReplyDelete
  8. how do you remove the title of youre blog from the inserted image?

    ReplyDelete
  9. Remove <$BlogTitle$>

    ReplyDelete
  10. im using minima black there is a $BlogPageTitle$ , but removing it does not do anything :(

    ReplyDelete
  11. The complete tag is <$BlogTitle$>

    ReplyDelete
  12. Thankyou . i didn't know it was so far down the page . thanks again .

    ReplyDelete
  13. Peter - need your help once again. I cannot find a way to post a photo either on my profile or on my sidebar. I find the post-upload keeps converting the photo to jpg which will not work. No matter what I've tried I cannot get the damn thing uploaded as a JPEG or gif.

    I just wanted to add a little picture...thanks again.

    ReplyDelete
  14. Try uploading your image to Photobucket and get the url from there.

    ReplyDelete
  15. thank you, your blogg is very needed! :)
    have one question, how do you get rid of the border around the picture?

    ReplyDelete
  16. Hello. I have a question. I am using a template called "This way Rose" and I am looking at the area where this code is found. Question I am not seeing a line of code that has "image" or jpeg or anything similar. All mine says is Blog Title - Are there blogs that cannot have a picture uploaded into the area where the Blog Name Title is displayed?

    Thank you :)

    ReplyDelete
  17. Every template is different. Most html tags are not allowed on comments, so you will not be able to post your template here. Why don't you post your template to Blogger Help Group and see if someone there can help.

    ReplyDelete
  18. is there anyway to put a .swf instead of a .jpg up there?

    ReplyDelete
  19. Well, what do you know? I just posted a photo on my blog title bar. THANK YOU SOOOOO MUCH for making what seemed like an eternity of neck pain, eye strain and knots in my stomach turn into a success. You are a great teacher.

    ReplyDelete
  20. I only wish I had found your help site a few days ago, very well explained, easy to follow. I have bookmarked your site and will be referring to again soon THANK YOU!

    ReplyDelete
  21. Peter,
    I am so glad I found you - been trying to post on Google Groups but my post has not been posted (yet?)
    I don't seem to have the same code for header as indicated in your post - however, by erasing the URL to the images and then viewing preview I have mostly figured out what corresponds to what except some images/URL just show blank when I place them in address bar.
    Basically, I can remove the current template's image, replace it with another but the other shows up on the left or right only and not behind the title nor does it repeat to fill the space.
    What is #fff and #D8DADC? They are written before the URLs of the various components of the header. I've tried erasing them to see what they correspond to but can't see any difference!

    ReplyDelete
  22. Hi there,

    Newbie here, I was wondering what size should the uploaded photo be for a banner? I'm using the standard Herbert) banner and when I link the photo in the header html it copies the photos many times...is something like 486 X 60 or 460 X 60 OK? Check out my first shot at a blog...
    http://japan-japan.blogspot.com/
    Any help would be appreciated !

    ReplyDelete
  23. This blog is loads of help, thank you. I've managed to post a photo in my title bar but it only takes up about a third of the space - how do I stretch the image so it fills the whole title bar, behind the text?
    Thanks so much...

    ReplyDelete
  24. merci un mille fois from France. I have finally loaded a picture for my header successfully thanks to your helpful explanation. I am now uncertain as to how to get it to fill the entire header space without the margins...is it a simple clue I'm missing?

    Thanks again ... and in advance!
    L

    ReplyDelete
  25. (and further more...)another question...
    I must be doing something wrong when uploading my pics as the picture I am using for the header (to replace the title) is very blurry when I can get it to the size that fills the header space and the text is not clear. How can I avoid this? (I want to use a particular font that does not seem to come through on the template and I've constructed a title header in photoshop.) Thanks...again!
    L

    ReplyDelete
  26. You will have to resize your photo to fit the header and redo.

    ReplyDelete
  27. Hello Peter,

    thanks for all you help. I have another question for you

    How do I upload my logo to box with the name of my blog? I would like to place the logo to the left or right corner of the box...

    Thanks

    Petra

    ReplyDelete
  28. Thank you so much for your words of wisdom. I am starting my first blog for a charity and had been struggling to figure out how to load the logo for several days. You advice made it so easy for me to follow and I have finally been successful. You are a life saver!!

    ReplyDelete
  29. To Anonymous and whoever might be interested.
    I've pushed the title down and inserted before it a br. now the title is not only detached from the pic but even more beautiful - the pic is now centered and the title is situated underneath it.

    Still, the title used and is meant to be in red - yet it has rebelously reverted to black.

    Discussing colors, where could I change the color of the sidebars ul.li. etc., titles/headings? Right now they're all in black. Living in Israel this color is much too much...

    May I ask, What should I do, Peter?

    And yes, for sure I'm greatly indebted and will link to you as soon as this specific blog gets well ready to do the job; hopefully in a couple of days.

    The blog is:
    http://corinna-hasofferett-hebrew.blogspot.com
    In thanks,
    Corinna

    ReplyDelete
  30. If only possible, I would love to go a step forward and understand how to post more than one pic on my Hebrew blog title, the way it was done by a friend at my English blog: (the HTML used there was different, hence no point of reference.
    http://timeintelaviv.blogspot.com
    In thanks,
    Corinna

    ReplyDelete
  31. i can't find any such html in template.
    please advise,
    w

    ReplyDelete
  32. Mine is based on the Blogger minima template. You may be using a different template.

    ReplyDelete
  33. Peter,

    How do I remove the border that is surrounding my image?


    Thanks!
    Erin

    ReplyDelete
  34. You mean this blog: Croquembouche?

    I think the border is not part of the photo, but part of the header, which will be in the Blogger script. I don't know how to get rid of it. Sorry. Hope some reader can throw some light on it.

    ReplyDelete
  35. You mean this blog: Croquembouche?

    I think the border is not part of the photo, but part of the header, which will be in the Blogger script. I don't know how to get rid of it. Sorry. Hope some reader can throw some light on it.

    ReplyDelete
  36. great stuff, thank you! i use the same template as you and would like to fill the title box with a background image and have the title/description remain the same.

    ReplyDelete
  37. This is amazing! I have been looking ALL OVER for days, to find what to do to get rid of my "blog-title", and there you are, like an ANGEL!! I did put a link to your blog, on my own blog, and I'll probably use your helpful tutorials OVER AND OVER AND OVER again!! :)
    ----------
    majann

    ReplyDelete
  38. Anonymous1:09 PM

    Any idea how to do this in the new Beta?

    ReplyDelete
  39. Anonymous10:42 AM

    Okay as far as I can tell...this is where I'm suppose to post my pictureinto my header (I've capitalized where I've tried)

    /* Header */

    #header-wrapper {
    background: #8b2 url(HTTP://WWW.BLOGBLOG.COM/etc...etc...etc...) bottom left repeat-x;
    margin: 0 auto;
    padding: 0 0 15px 0;
    border: 0;
    }

    #header h1 {
    text-align: left;
    font-size: 200%;
    color: $pageHeaderColor;
    margin: 0;
    padding: 15px 20px 0 20px;
    background-image: url(http://HTTP://WWW.BLOGBLOG.COM/etc...etc...etc...);
    background-repeat: repeat-x;
    background-position: top left;

    When i do this...in either place...the picture goes tiny and repeats itself along the bottom or top have of the header? I don't care if the pic is small, but I want it ONCE beside the title.

    Any thoughts?

    ReplyDelete
  40. Anonymous10:49 AM

    Okay...I just read your very last comment (After posting previous comment and I think I get it...)

    THANK-YOU!

    ReplyDelete
  41. Anonymous3:31 AM

    Ive tried this repeatedly without success. apart from not being able to find the exact spot in the template where the code (i have been trying to put it in the header section), i get this error message when i cut and paste the code..
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Element type "b:widget" must be followed by either attribute specifications, ">" or "/>".

    ReplyDelete
  42. Adding content to Blogger beta blogs is a headache for most bloggers who have been used to the blogger classic template. The method I describe in this post does not involve pasting codes in the template, so I don't understand why you are having a problem unless you are not following the method I outlined in the post.

    ReplyDelete
  43. Thanks a lot for the great help :) Now I just need to make a good looking banner ;)

    ReplyDelete
  44. Okay, this is great. HOwever, when I post the photo in, the blogger header doesn't go away - mine is just pasted on top, with a ring of red around it that won't disappear.
    How do I make the blogger minima header disappear from behind my new header? I don't want any text or any border or any color or anything else - just my logo that I designed and uploaded from my computer.

    Thanks!

    ReplyDelete
  45. Perhaps you can try removing the tag <$BlogTitle$>. Remember, whenever you make changes to the template, backup the current template first, and always preview before you save.

    ReplyDelete
  46. It took me all day to get this preview shot! This is fairly close to what I want, but notice how the title box isn't quite centered when you look closely. From creating the logo, to learning how to put it on the blog, to resizing it accurately, and playing around with it in paintbrush when I could think of no other way to get rid of the existing title box...this is what I have to show for it. If there is a better way, please tell me! Here's what I did:

    Took a screenshot of the existing page, pasted it in paintbrush, filled in the title box completely, stuck my logo in, then saved just the new title box as a separate file. I then posted that picture and deleted the following in the template:

    (I'm having trouble putting all this template stuff in the comment. Go here for all the details.)

    ...and now for the final question: Is it possible to have the above jpeg logo yet still have title text somewhere not visible to readers (for the benefit of search spiders)?

    ReplyDelete
  47. Dear Peter,

    Thank you for generously sharing your time and skills.

    I've replaced my blog title with an image. But then clicking on the banner (wheter on the main page or in individual posts) no longer brings me back to the home URL. Please advise on how to reinstate that function...I've been going insane trying to do it.

    ReplyDelete
  48. Please look for the solution in the updaate (at the bottom) of this post: How do I post a photo on my blog title bar

    ReplyDelete
  49. Dear Peter, thanks so very much. I've managed to do it for the front page, but doesnt appear to work for an indivual post.

    I will email you my site URL if you need to look at the template itself. I'm using Minima Black too (just that the background is no longer black).

    THanks again for your time.

    ReplyDelete
  50. Anonymous11:52 AM

    Hi Peter,
    This hack is for old style templates. What about the new ones that used to be known as beta? Do you think you can help, please?
    I have a Scribe template and already know there are quite a few differences from the others. Thanks and a Happy New Year.

    ReplyDelete
  51. For the new Blogger (formerly beta), have a look at this post:
    Adding graphic to your blog Header.

    Peter a.k.a. Enviroman
    Enviroman Says

    ReplyDelete
  52. Anonymous1:41 PM

    Thank you very much for the tip. I found it and it contains other interesting things that I will apply later.
    One thing I don't understand. I use target="_blank" in a site and it works OK. You use the same in your blogs and it also works. So why does it not work for me in my blog, too?
    Do you have any idea, Peter? Thanks and sorry to bother you again.

    ReplyDelete
  53. Anonymous6:20 AM

    I'm trying to do this exact same thing only in the new version of Blogger. I'd like to have a photo from my Flickr account in my header.

    The html code doesn't look the same in the new version as you've indicated here.

    What should I be looking for?

    Thanks so much for your help!

    ReplyDelete
  54. Have a look at the graphic headers in these two blogs:
    Guide to Malaysia
    Good Health Information

    The first is a photo and is clickable, and the second is a simple graphic header generated using the very good and free Irfanview:
    Generating a simple graphic header with the free Irfanview

    The text header has been left in place because my opinion is it is important for search engines. Search engines can't read graphic and headers are important for SEO. If you want to remove the header, include a alt="description" attribute in the image tag.

    The method to add the graphic header is given here:
    Adding a graphic header to a New Blogger (formerly beta) blog.

    If you have further question, feel free to comment somemore.

    Peter a.k.a. Enviroman
    Enviroman Says

    ReplyDelete
  55. Anonymous7:03 PM

    Hi: I've checked out your instructions but they seem to be different from the "new" operational version of what was once the Beta version. The instructions re the templaye html code, for example, don't match what is now there- so I'm totally confused.
    This seems to be Soooo complex- why the hell can't they make it so I can just drag and drop and image instead of this run around.
    Maybe one day. Anyway, can you please help with putting in an image now...much appreciated...tony in oz

    ReplyDelete
  56. Hi Tony,

    This instruction is for those who use the old (classic) template. If you are using the new (formerly beta) template, you should check out this post: Adding a graphic to your new Blogger (formerly beta) blog Header. The method give you the choice to retain or delete the text Header. My opinion is it is better to retain the text header for search engine purposes as search engines cannot read graphic, and the header is important for SEO.

    Peter a.k.a. Enviroman
    Enviroman Says

    ReplyDelete
  57. Anonymous2:28 PM

    Hi Peter (again)

    Many thnaks for the info and at last I have a picture up following your instructions. Can you help me further please? Here it is: http://traveladventurers.blogspot.com
    and despite careful measuring I just can
    t fit it correctly into the frame. No matter what I do, it just won't shrink to fit. Can I (1) eliminate the frame somehow or (2) adjust the pic to fit completely within the frame eg what measurement do I use? I love your Malaysia page- we are sort of in the same business, I guess - I'm, a travel writer about to create an online guide to everywhere - and I'll certainly link to your Malaysia page if I get your okay. Best wishes - Tony

    ReplyDelete
  58. Hi Tony,

    I made a test and added a photo size 640x372px to this test blog Minima Test Blog. I believe that it is the same template that you are using for that blog you gave the URL for. I uploaded it via the Add a Page Element , then Add Picture, and chose Shrink to fit, and it fitted the Header OK. So I don't understand why you are having problem. Maybe you should resize your photo using Irfanview (free) before you upload. See Using Irfanview photo editor for your blog.

    Regarding the border, you will have to post your question to the Google Blogger Help group and see if someone can help you.

    Peter
    Blogger Tips and Tricks

    ReplyDelete
  59. Thanks Ace! I sort of figured that was what I needed to do, but I was too scared to do it and mess things up, but it worked. Thank Thank Thank you.

    ReplyDelete
  60. My photos are in "my pictures" file on my computer. I don't know the url for the one I want to put in my profile. How do I get it there? I have on on another website and I tried what I thought was it http://...... but no picture came up. I'm new and trying to figure this out. Any help would be great!!

    ReplyDelete
  61. Hi Tricia,

    I will answer you in a post where I can give more detailed instructions. I am half way through the post, and have saved the URL of this post into the folder of my "To do" folder. Will publish the link to the post as soon as it is ready.

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

    ReplyDelete
  62. hi peter..

    i liked the way you have put your codes into the scroll box.i want to have codes exactly that way but the actual text shows up.i want people to copy the html of my site and paste into theirs.please put down a detailed guide about it.below ive pasted the text am not able to edit well.please help! u can also leave the actual code on my site please!will be most greatful.

    http://nishasworld-and-babyalisha.blogspot.com/ as the clickable heading and "her experiences,interests,dreams,family and baby alisha..." as the description

    ReplyDelete
  63. hi peter..

    i had postd a comment but ive just succeeded in getting the whole html into scroll box, from another site.thanks for all the other tutorials!

    ReplyDelete
  64. Hi Nisha,

    Please refer to Displaying HTML tags.

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

    ReplyDelete
  65. Hi Peter -
    I've been trying to get a graphic into my title/header box and have looked at helps and all, but the best I've been able to do is get it above the title/header box. I'm using Minima White classic template.

    Can you help? My blog URL is http://d2power.blogspot.com in case...
    Thanks,
    Mollie

    ReplyDelete
  66. Hello, i want to add a title picture above my blog title. The picture has the html code of marquee
    ... i have gotten the html but dont know how to add above blog title... please help me.. you seem like a great person.

    my blog is
    http://kashifkasanova.blogspot.com/

    Just in case

    help!

    ReplyDelete
  67. "What a nice post!
    Great comments shared here.
    Continue in what you have been doing."

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...

Find topics by using the Google custom search box above which can search multiple blogs, or the SEARCH BLOG in the left corner of navbar. You can also find topics in the Label List and Categrories in the right sidebar.

For more information and special deals related to any of the issues on this page, place your cursor over the double-underlined links. All information supplied by Kontera.com.

Disclaimer: This blog has no relation with Wiley Publications