- finding an image and cropping it to fit (once again using Irfan View)
- upload this image to your web host
- put this code in your template between the <style> and </style> tags in your blogger template:
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background: #fff url(http://your image.jpg) no-repeat top right;
} - change the URL between the parenthesis from http://your image.jpg to the URL assigned by your web host
Also see: The Gimp: New Custom Header
How do you keep the blog title from showing up across the front of the new header?
ReplyDeletesmokes, If you don't want the title to show, go to 'settings/basic' in your template section. Leave the first two boxes empty. I think that should do it.
ReplyDeleteThanks for your help, it's been very informative. Quick question... how do I get my new banner to appear correctly sized across the top of the blog? At the moment it is appearing way too small.
ReplyDeleteali, if you added an image to your banner, it should not change the size of the orginal banner. But, you can change the size of the orginal header by finding: #header and #description in your template and changing the width element.
ReplyDeleteI hope this helps. If you would post your blog URL, I could see exactly what you mean.
smokes, I re-read your comment, and to get rid of the blog title, follow the instructions on this post:
ReplyDeletehttp://bloggeruniversity.blogspot.com/2006/05/gimp-new-custom-header.html
anniebluesky, do you know how to make the image in the header clickable?
ReplyDeleteI mean to add hyperlink to the image in the header.
ReplyDelete@anton, add this to where you have your 'image.jpg' in you blog template:
ReplyDelete<a href="your-link-url"><img src="your-image.jpg""></a>
That should do it. I think there are 2 places in your blog with the header image.jpg
@anton, sorry, I think that will work with the orginal blogger...not sure about beta...haven't tried it yet.
ReplyDelete@anton, I'm working on a post for this...should have it out in a day or so!
ReplyDeleteAnnie, thanks a lot for your efforts. I will be expecting your post :)
ReplyDeleteHere's a way I just figured out to replace the blog's title and description with an image. First go to Edit HTML and in the header-wrapper div change locked value from true to false. Save changes and go to rearrange page elements. Now you can remove the header. After removing it, add a new page element (image) and drag it to the top. You're done. If you want to change its postion, go to Edit HTML again and in the header-wrapper part of the CSS Style change the text-align value to left, center or right.
ReplyDelete@1977, I'm going to play with that and see if I can get it to work. If so, I will write a post! Thanks for sharing!
ReplyDelete@1977, I did the post! Thanks for the hack. You can see it here:
ReplyDeleteBlogger Beta: Using Widgets for Your Header.
No problemo :)
ReplyDeletePhew! Considerable hair loss over this one! I never did find those style tags but I did discover the reason why my image wouldn't show up in the header space - it was because I needed to add "height" as well as width - i.e.
ReplyDelete#header {
width:700px;
height: 100px;
margin:0 auto 10px;
background: #fff url(image location)no-repeat center;
}
Tha probably would have occurred to most people sooner than it did to me! Oh well, now I can sleep.
Cheers Annie,
SJ xx
@skanky jane, Sorry you had problems. There is always something. Glad you figured it out! For future reference, this is what your opening style looks like and what it is before:
ReplyDelete<style id='page-skin-1' type='text/css'>
/*
-----------------------------------------------
Blogger Template Style
Name: Minima Stretch
Designer: Douglas Bowman / Darren Delaye
URL: www.stopdesign.com
Date: 26 Feb 2004
----------------------------------------------- */
And this is the closing style tag:
/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
</style>
Just in case the need arises to find it again!
Doh! Thank you Annie - yes my template doesn't have the style tags - I figured I had to be in the right place though. Thanks for your reply!
ReplyDeleteSJ xx
Annie, have you already find a way to add a hyperlink to the image in the header?
ReplyDelete@anton, as matter of fact I have.
ReplyDeleteClassic Blogger - Clickable Header
Beta Blogger - Clickable Header
@annie
ReplyDeletegoogle already added this feature to it's layout page..
http://bforbloggerbeta.blogspot.com/2007/04/add-image-header-to-blog.html
anyways..awesome blog :)
AH! I've figured out how to input the heading image, but the borders are still hiding it. Check it out here. Get back to me ASAP!
ReplyDeleteGot it; thanks for the info anyways.
ReplyDeleteThank-you, I was wondering how to do that.
ReplyDeleteAnnie,
ReplyDeleteWhen I hacked my header/header to have more than one widget in it I removed the borders that were there. But when I do that the text no longer seems to fit right. It ends up spreading to fill the whole area.
How did you keep your text spacing looking neat?
mrbrownthumb, My header is an image, complete with the text on it.
ReplyDeleteHi Annie,
ReplyDeleteHelp me pleeease! I am a new blogger. I just started to create one and already got stuck at the header itself! Here's what I wanted to do:
I'm using Sand Dollar and I have an image of 1230 x 230px. When I insert it from the computer, size is getting reduced to almost half with almost half the empty space on the right. I wanted to go across the screen in actual size.
Please help... I know I may sound silly. Here's the link:
http://golden-memories1.blogspot.com/
I also like to try this in Minima. Waiting for your valuable guidance.
@Comics Forever, with that template, I had to do something different for it to work. First, go to Blogger Beta: Using Widgets for Your Header. Follow the instructions, except don't "Add a New Page Element/ Picture". Instead follow the second update and "Add a New Page Element/ HTML Javascript". Put this code in the window (leaving the Title field blank):
ReplyDelete<center><a href="THE URL OF YOUR BLOG"><img border="0" src="THE URL OF THE HEADER IMAGE"/></a></center>
Then, in the CSS section of your template, find:
#header {
padding-top:0px;
padding-$endSide:0px;
padding-bottom:0px;
padding-$startSide:0px;
margin-top:0px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0px;
border-bottom:dotted 1px $bordercolor;
background:$descbgcolor;
}
and change it to:
#header {
padding-top:0px;
padding-$endSide:0px;
padding-bottom:0px;
padding-$startSide:0px;
margin-top:0px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0px;
border-bottom:dotted 1px $bordercolor;
background:ffffff;
}
That will give you your header in full and it is clickable.
Dear Annie,
ReplyDeleteThanks a million. I have tested it in a different test blog and it is working!!! You are a great help for absolutely new bloggers like me. I have learnt a lot in the process. YOU ARE A STAR!
@Comics Forever, I'm so happy it worked for you. It worked in my test blog, so I was confident it would work for you too. But, as I've found out, you just never know!
ReplyDelete@Comics Forever, I'm so happy it worked for you. It worked in my test blog, so I was confident it would work for you too. But, as I've found out, you just never know!
ReplyDeleteHi Annie,
ReplyDeleteMe again! I was trying another blog header in Minima. I uploaded my animated gif (650 x 381px) in Photobucket and tried to give the link 'from the web' in 'edit header'. It simply says: "Invalid image url." I just can't get it right. Help pleeeaaase!
@Comics Forever, I'm looking at your blogs and the animated header is working on Comics Forever and Comic World. Did you figure it out, or is it a different blog or different header?
ReplyDeleteHi Annie,
ReplyDeleteI was trying on a different blog using Minima template where I was getting this message ("Invalid image url.") when I was trying to give the link for animated gif from Photobucket for the header.
Can you please help!
@Comics Forever, are you sure you have the correct URL? Double check.
ReplyDeleteOtherwise, send me the link to your image and let me test it.
Hi Annie,
ReplyDeleteI hope I had done the right thing, but it doesn't seem to work. Anyway I have sent the link by email. Thanks for your help again.
@Comics Forever, the image is rather large. I'm only saying that because the code has to reflect this.
ReplyDeleteHere is the code I tested and it worked:
#header {
width:650px;
height:381px;
margin:0 auto 10px;
background: #fff url(http://i246.photobucket.com/albums/gg113/comicrazee/ICCHeader1.gif) no-repeat;
}
I am using minyx xml template for my blogger blog. How to change custom header image in that?
ReplyDeleteThere is no style /style tags in the xml template.
Please help.
@Rajeev Edmonds, I'm not familiar with that template. If you could send me the xml file I'll take a look.
ReplyDeleteBut, it will be next week before I can do anything with it...I'm going out of town for the next 4 days.
how to add image to my post using codes?cause if i follow the normal steps itz always failed.i can't upload any of my pictures to my post.
ReplyDelete@Anonymous, how strange that you can't post a photo. Do you click on the little image icon in the post editor?
ReplyDeleteHere is a way to manually get a photo in your post. You must upload your image to a web host. Then get the URL of the image and paste in this code:
<img src="URL">
Is blogging always this frustrating? I can't even figure out how to add a link.
ReplyDeleteHey!
ReplyDeleteI had a question and I've been searching everywhere and can't find the answer. I want to know how you can put multiple images in the header section like this girl's: www.leblogdebetty.com? Did she use Photoshop or is there a way to do it with code? Thanks.
Link to my blog: barepeppermint.blogspot.com
@Tony, those images are the header it's self. Done in an image program such as Photoshop or Gimp.
ReplyDelete@tony
ReplyDeleteas anni said it is photoshop i can do it for you if you want send me your images and what you like to do on samixx@gmail and sure i can do it 4 you
As far as i suggest Your Web site acts a great role in providing information to targeted visitors. I recognize or rated it as excellent.
ReplyDeleteI love the minima template for it's simplicity. You can customize so much with just tweaking the code.
ReplyDeleteThanks for the example for how to add you own graphic into the header.
I wish, there was a way with Blogger to edit a CSS style sheet separate from the page HTML.
I cannot find < style > and < /style > in my blogger template. But see the following:
ReplyDeleteBlogger Template Style
Name: Thisaway
Designer: Dan Rubin
URL: www.superfluousbanter.org
Date: 29 Feb 2004
Updated by: Blogger Team
What to do?
i was looking for this from long time , how to do few things which r mentioned above like adding images etc, its a great post , very useful to people like me .thnaks.
ReplyDeleteAbhishek Parab I found it. Just use crtl+f to search. My browser fount these lines immediately.
ReplyDeleteP.S. Thanks to all it is really useful.
Hi, so i've been reading and reading and havent found anything that will help me, so my problem is i put the code in and when i preview the image firstly doesnt show up but then when i hit button to make the screen full size of my monitor my entire blog wipes out. ughhhh frustrated. My image is this http://picasaweb.google.com/lh/photo/GXh9mqGHrCh-TR8W1JLBZQ?authkey=Gv1sRgCJbfk_aGyLuN9gE&feat=directlink
ReplyDeleteis that the first problem?
Im ready to give up.
Thanks for any help.
I haveone question, how do make a hyperlinik for a background image on the header (I want to make the image clickable)?
ReplyDeletehere is the code:
#header {
background: url('http://localhost:4770/324a9665d5375b0106a4de2e9d5e03fa/image/59e4268909476427.jpg?size=160');
background-repeat: no-repeat;
height: 200px;
width: 440px;
text-align:left;
padding: 0 0 0 170px;
}
this is my blog URL: http://juragan-dinar-irak.blogspot.com
any help would be much appreciated
@sudirdjo, Clickable Header
ReplyDeleteHi Thanks for the info, i just wandering if i can use this banner to worpress? if not might use other blogging sites. thanks alot!
ReplyDeletehi anne thats for the infos ---scout
ReplyDeleteHi I downloaded this blog template from blog crowds
ReplyDeletehttp://www.blogcrowds.com/resources/blogger-templates/45-sky3c
However when I go to layout in blogger
Then edit header image
Then upload an image from my computer nothing happens, the clouds /skies remain (default).
Can someone please help urgently?
Regards
I always tried to customize the header of my blog but didn't know how?. thanks you for sharing this information
ReplyDeleteYour information was very important for me because it could change the image of the title of my blog
ReplyDeletethe header makes the website look better..that's the first thing someone sees when they visit your site so it has to be something really creative..
ReplyDeletei just wandering if i can use this banner to worpress?
ReplyDeleteanyone can post how to install a flash header on a word press theme? I've tried one but the animation didn't came out, just plain white box! :D
ReplyDeleteThis is a great post. You are sooooo technical I have found this blog post amazing and other posts here too. I've bookmarked this blog so I can revisit.
ReplyDeleteThanks for sharing
This information come just in time for me. I was searching for a long time wondering how to customize a header.Thank you for the excellent installation guide, which is like magic, I think I learned a lot.
ReplyDeleteThis is a great post with reference to customizing a header. Its hugely come in handy!
ReplyDeleteThanks alot!
Thank you very this tip, after adding an image to my template header it looks more beautiful now, but i think i need to minimize the size of the image because it takes too much time to show up.
ReplyDeleteI have seen that some headers have that but I had no idea about how to ad it. Looks nice. Thanks for the explanation.
ReplyDeleteThanks for sharing this information . It is useful for me. I offers everybody go to visit at http://www.myeasypaymentbankamerica.com
ReplyDeletethanks for sharing..
ReplyDeleteThank you so much, I looked everywhere to learn how to do this.
ReplyDeleteThis is a fantastic web site. Good sparkling user interface and nice informative blogs. I will be coming back soon, thanks for the great blog.
ReplyDeleteCan someone help me out I have a beautiful banner and Have tried but Im no Tech savvy girl :p I want to add a picture to my blog. Please Please help me. Would be happy if someone just did it for me. I will follow you and comment on your page if you do. Please take a look http://bee-enlighten.blogspot.com/
ReplyDeleteThank's for the info. It helps. ^_^
ReplyDeleteThanks for giving coding. But I think it will not much beneficial for SEO.
ReplyDeleteI really like your tips, they are very helpful for new bloggers.
ReplyDeleteThanks for the great information, and especially thanks for giving the code, instead of just talking about it.
ReplyDeleteThanks for your help - very informative. I do have a question; how do alter the size?
ReplyDelete@benjaming, if you header is 450px, then in the code reflect that change from
ReplyDeletewidth:660px; to
width:450px;
Thanks for the info. You make me learn about HTML code..
ReplyDeleteHi Annie,
ReplyDeleteThx for your coding help to make website more attractive. I will try on my website.
When I hacked my header/header to have more than one widget in it I removed the borders that were there. But when I do that the text no longer seems to fit right. It ends up spreading to fill the whole area.
ReplyDeleteHuge thank you, just started my first blog and found this useful :)
ReplyDeleteI was trying on a different blog using Minima template where I was getting this message ("Invalid image url.") when I was trying to give the link for animated gif from Photobucket for the header.
ReplyDeletehi, thanks for the nice explanation. but i am having some problems. first of all i am using wordpress. when i upload the image to my host, i get an "ftp" url instead of http. (i use filezilla btw) anyway, i use that ftp link for editing the style.css file, but nothing changes. i would appreciate if you could tell me where i am screwing this up.
ReplyDelete@spoilsport, sorry, but I don't work with WP, so I don't really know their idiosyncrasies.
ReplyDeleteThis article is very helpful, long search for this article! Thank's!
ReplyDeleteAfter knowing how to add a header image in blogger, I would immediately replace the header image on my blogger. Thanks this article really helped me!
ReplyDeletehey dude.. it really helped me.. thanx a lott
ReplyDeletevery good informartions, thx's....
ReplyDeleteseen on post
ReplyDeleteChange URL and seen on post. For instance, to have a link to BlogU, the code would look like this:
BlogUvery good informations, thx's..
Hi, I have tried to use it here. But I can't why?M6.Net Windows Hosting
ReplyDeleteI have this classified website and whenever I open it on a small screen the adsense ads goes to a different unwanted place. Can anyone please help????
ReplyDeleteFree classifieds
I tried this code and it did worked for my blog. Actually almost all the codes that I used for my blog came from this blog. This is indeed my blogger university and the makers are my professors. I am thankful to this site for helping me with all my HTML concerns. :)
ReplyDeleteYes this code works fine, as seen in my blog torrentreview.com
ReplyDeleteThanks for this post working with images and banners has never been one of my strongpoints :-)
ReplyDeleteHave a nice day
even I like Minima......have tried the three column version.....its simple but easy for me......I am about to try wordpress and thesis theme now
ReplyDeletegood code. makes a muck more unique layout.
ReplyDeleteThanks! You make me realize I can do a lot better with my blog I keep for my work. I will come back here for tips :)
ReplyDeleteno-repeat top right
ReplyDeleteThanks for that, been trying to work out what I was doing wrong for ages, just couldn't get it positioned correctly!
Hi,
ReplyDeleteReally nice steps to customize headers.I enjoyed reading it completely.Thanks for sharing
Regards,
Vanessa
Have my header text. I add an image and it only allows me to put the text over the image on the left, or under the image. How do I get the image on the left and the text on the right? Do I need to create this in Photoshop only?
ReplyDelete@bamalynn, I generally do text headers in Photoshop because then I have more freedom of placement.
ReplyDeleteThank you for the html on customizing my blog header. I love yours btw! Simple yet artistic! billiards tables Yay! It worked! Thanks Annie!
ReplyDeleteVery usefull article. Thank you.
ReplyDeleteNice, this seems really helpful, i just made a small tutorial to delete the navbar that a lot of people hate:
ReplyDeletehttp://geektual.com/borrar-la-barra-de-navegacion-en-blogger/
You have to learn little bit of coding and then you can make all the small changes that makes your blog individual. As Always thanks for this tip.
ReplyDeleteThank you for this post - I've been experimenting with headers on my own blog, however with limited success. At the moment, I'm trying different programs that will generate the header at the appropriate size - not to just find one that will match everything else!
ReplyDeleteThanks!
My Home Business
this is a great tutorial, thanks a lot I'M gonna give this a shot right now.
ReplyDeleteThank you for this. I was able to differentiate my site. Liam
ReplyDeletewww.tentreviewsinfo.com
thank you for sharing that!
ReplyDeleteThanks for the tips, I am looking forward to see more HTML tutorials from you.
ReplyDeleteI agree, Minima is a great template, and its very versatile. With a little CSS know-how, you can tweak it to do whatever you need it to, while retaining the sleek simple design.
ReplyDeleteAnother great post yet again, this site has helped me alot!
ReplyDeleteCheers Annie, think that might resolve an issue we were having with the header for a while...
ReplyDeleteDoes that work in most themes, or specific to yours annie?
ReplyDeleteWe were actually thinking of using the Minima template, would you recommend it?
ReplyDeleteThanks Annie, This is helpful! :)
ReplyDeleteWith a little CSS know-how, you can tweak it to do whatever you need it to, while retaining the sleek simple design.
ReplyDeleteThis site is Really helpful for me.You have to learn little bit of coding and then you can make all the small changes that makes your blog individual.
ReplyDeleteI'm totally lost with IrfranView :(
ReplyDeleteBut I'll try this anyways :)
I was trying on a different blog using Minima template where I was getting("Invalid image url.") when I was trying to give the link for animated gif from Photobucket for the header.
ReplyDeletecan any one tell me the problem
use "img" for image "href" for link/url
ReplyDeletehope that helps
Hey Annie... Thanks for the heads up... I have never used Ifran View before... thats what I like about sites like Blog U...great info and free! Thanks...
ReplyDeleteHey Annie... Thanks for the heads up
ReplyDeletethanks for the info.
ReplyDeletei really love the colours of your blog theme.. it looks so nice n clean.. :)
its a link if anyone interested about forex
It's good information, especially for beginner HTML programmers. It can be difficult at first. :-)
ReplyDeleteSpeaking of images, feel free to grab some free ones at
StockFuel.
thanks...superb..work..
ReplyDeleteadding image in header is a new idea to me.... thanks for the code...m can i use it on a regular website...
ReplyDeleteThanks for the info. I'm newbi, this veri usefull for me thnaks....
ReplyDeleteNice. Helpful articles.It's Must be helpful articles for greenhorn blogger
ReplyDeletenothing changed after putting the code,plz help
ReplyDeleteI am really thankful this website and the proving the great information and the using the very great technology. These blocks provide the information very help to the customers. I am very impressed for this information.
ReplyDeleteVery good friend, very good information, thanks!
ReplyDeleteYou can also change the colors modifing the background or a line
I have been trying to figure out how to add a photo to my header for a while. I am so glad I stumbled across this site. I have copied the code so I can work on it when I have more time. Thanks for the valuable information here.
ReplyDeleteBlogU
Thanks for the info, i've finally can make can make changes in my header
ReplyDeleteThanks for the tips and tricks , everyone
ReplyDeleteI found the blog to be really informative. I think you are discussing about how to increase ranking in search result by using image.Keep blogging.
ReplyDeletehi
ReplyDeletewww.alazizonline.com This is my web site and I want to change its logo can any one let me know how can I change it ..........?
I find this blog to be informative and useful. I got to learn more about coding. Nice blog you have posted.
ReplyDeletecan i use non .jpg file? such as .gif or .png?
ReplyDeleteAnnie, do you know how to add the sign up box just above the content and below the header?
ReplyDelete@Projekty Domow try this:
ReplyDeletehttp://bloggeruniversity.blogspot.com/2006/09/sticky-message-board.html
hey, I have the same question, and I went to that page and sea lot of code. I think that I will try it on one of my pages, thank you
ReplyDeleteI really like your tips, they are very helpful
ReplyDeleteYour way of giving information is very nice. This article increase my knowledge.
ReplyDeletesame with me. I like minimalistic design so much. It is something so amusing and just so incredible to know that life is just like design. the simpler... the better. control your design as you control your thoughts and you should be just fine
ReplyDeleteyeah, it's cool. nice info ;)
ReplyDelete