Customizing your header: add an image
I just love the Minima template. It is so versatile. New discoveries keep turning up. My last great discovery was how to tweak the heading to my liking. It involves:
- 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
Labels:
Classic Blogger,
Design,
Graphics,
Hacks,
Header
146 Comments:
How do you keep the blog title from showing up across the front of the new header?
smokes, 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.
Thanks 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.
ali, 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.
I 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:
http://bloggeruniversity.blogspot.com/2006/05/gimp-new-custom-header.html
anniebluesky, do you know how to make the image in the header clickable?
I mean to add hyperlink to the image in the header.
@anton, add this to where you have your 'image.jpg' in you blog template:
<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.
@anton, I'm working on a post for this...should have it out in a day or so!
Annie, thanks a lot for your efforts. I will be expecting your post :)
Here'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.
@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!
@1977, I did the post! Thanks for the hack. You can see it here:
Blogger Beta: Using Widgets for Your Header.
No problemo :)
Phew! 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.
#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:
<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!
SJ xx
Annie, have you already find a way to add a hyperlink to the image in the header?
@anton, as matter of fact I have.
Classic Blogger - Clickable Header
Beta Blogger - Clickable Header
@annie
google 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!
Got it; thanks for the info anyways.
Thank-you, I was wondering how to do that.
Annie,
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.
How did you keep your text spacing looking neat?
mrbrownthumb, My header is an image, complete with the text on it.
Hi Annie,
Help 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):
<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,
Thanks 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!
@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!
Hi Annie,
Me 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?
Hi Annie,
I 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.
Otherwise, send me the link to your image and let me test it.
Hi Annie,
I 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.
Here 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?
There 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.
But, 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.
@Anonymous, how strange that you can't post a photo. Do you click on the little image icon in the post editor?
Here 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.
Hey!
I 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.
@tony
as 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.
I love the minima template for it's simplicity. You can customize so much with just tweaking the code.
Thanks 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:
Blogger 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.
Abhishek Parab I found it. Just use crtl+f to search. My browser fount these lines immediately.
P.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
is 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)?
here 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
Hi Thanks for the info, i just wandering if i can use this banner to worpress? if not might use other blogging sites. thanks alot!
hi anne thats for the infos ---scout
Hi I downloaded this blog template from blog crowds
http://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
Your information was very important for me because it could change the image of the title of my blog
the 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..
i just wandering if i can use this banner to worpress?
anyone 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
This 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.
Thanks 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.
This is a great post with reference to customizing a header. Its hugely come in handy!
Thanks 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.
I have seen that some headers have that but I had no idea about how to ad it. Looks nice. Thanks for the explanation.
Thanks for sharing this information . It is useful for me. I offers everybody go to visit at http://www.myeasypaymentbankamerica.com
thanks for sharing..
Thank you so much, I looked everywhere to learn how to do this.
This is a fantastic web site. Good sparkling user interface and nice informative blogs. I will be coming back soon, thanks for the great blog.
Can 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/
Thank's for the info. It helps. ^_^
Thanks for giving coding. But I think it will not much beneficial for SEO.
I really like your tips, they are very helpful for new bloggers.
Thanks for the great information, and especially thanks for giving the code, instead of just talking about it.
Thanks for your help - very informative. I do have a question; how do alter the size?
@benjaming, if you header is 450px, then in the code reflect that change from
width:660px; to
width:450px;
Thanks for the info. You make me learn about HTML code..
Hi Annie,
Thx 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.
Huge thank you, just started my first blog and found this useful :)
I 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.
hi, 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.
@spoilsport, sorry, but I don't work with WP, so I don't really know their idiosyncrasies.
This article is very helpful, long search for this article! Thank's!
After 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!
hey dude.. it really helped me.. thanx a lott
very good informartions, thx's....
seen on post
Change 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
I 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????
Free 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. :)
Yes this code works fine, as seen in my blog torrentreview.com
Thanks for this post working with images and banners has never been one of my strongpoints :-)
Have 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
good code. makes a muck more unique layout.
Thanks! 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 :)
no-repeat top right
Thanks for that, been trying to work out what I was doing wrong for ages, just couldn't get it positioned correctly!
Hi,
Really 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?
@bamalynn, I generally do text headers in Photoshop because then I have more freedom of placement.
Thank you for the html on customizing my blog header. I love yours btw! Simple yet artistic! billiards tables Yay! It worked! Thanks Annie!
Very usefull article. Thank you.
Nice, this seems really helpful, i just made a small tutorial to delete the navbar that a lot of people hate:
http://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.
Thank 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!
Thanks!
My Home Business
this is a great tutorial, thanks a lot I'M gonna give this a shot right now.
Thank you for this. I was able to differentiate my site. Liam
www.tentreviewsinfo.com
thank you for sharing that!
Thanks for the tips, I am looking forward to see more HTML tutorials from you.
I 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.
Another great post yet again, this site has helped me alot!
Cheers Annie, think that might resolve an issue we were having with the header for a while...
Does that work in most themes, or specific to yours annie?
We were actually thinking of using the Minima template, would you recommend it?
Thanks Annie, This is helpful! :)
With a little CSS know-how, you can tweak it to do whatever you need it to, while retaining the sleek simple design.
This 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.
I'm totally lost with IrfranView :(
But 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.
can any one tell me the problem
use "img" for image "href" for link/url
hope 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...
Hey Annie... Thanks for the heads up
thanks for the info.
i 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. :-)
Speaking of images, feel free to grab some free ones at
StockFuel.
thanks...superb..work..
adding image in header is a new idea to me.... thanks for the code...m can i use it on a regular website...
Thanks for the info. I'm newbi, this veri usefull for me thnaks....
Nice. Helpful articles.It's Must be helpful articles for greenhorn blogger
nothing changed after putting the code,plz help
I 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.
Very good friend, very good information, thanks!
You 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.
BlogU
Thanks for the info, i've finally can make can make changes in my header
Thanks for the tips and tricks , everyone
I 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.
hi
www.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.
can i use non .jpg file? such as .gif or .png?
Annie, do you know how to add the sign up box just above the content and below the header?
@Projekty Domow try this:
http://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
I really like your tips, they are very helpful
Your way of giving information is very nice. This article increase my knowledge.
same 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
yeah, it's cool. nice info ;)