Sep 13, 2006
13.9.06 | Posted by
Avatar X
This is not only a how to add a image to your header as the title says, this is the easiest and the slacker way to do it.
If you are a regular reader you must be surprised seeing me to tackle such a simple chore, but i got this asked 15 times already, and as everyone that is with Blogger from the start knows, this is #1 question in any blogger forum/group since Blogger v1.0!!!
Now, people not only want to know how to do this, they want the easiest,faster and most straight forward way to do it, and i will resume it with some quotes from the people who asked me to do a post about it:
"i want to be able to do it in less than five minutes"
"i don´t want to mess with code, i just want to copy and paste where i must without having to write anything myself"
"i don´t even want to make a custom header, i just want to get a image into the frame of the header, you know what i mean?"
*yes, those are ACTUAL quotes*
So, i was like, oook then, and after ruling out my own regular solution from inside the code editor, i decided to take Gaby De Wilde word on it
(hey,i am a slacker too)
So, this the 6 step and in one minute way to add a header image to your blog once you are in your dashboard and have a image link you can use:
1.-Go to your layout settings
2.-Click in the Add Page Element of your layout footer
3.-Choose HTML/JavaScript from The list of page elements
4.-Type this code into it as shown in the picture:
(The height in the top parameter is the one that can be used for the minima based templates)
5.-Modify it with your links.
6.-Click Save Changes
----YOU ARE DONE----
Check the test blog that i set for it, and i did add it just like i wanted in less than a minute.
Testblog
(i put the same image this blog has so it resizes nicely along with the blog)
Now you only have to check your blog, and there will be a image in your header, of course this one minute deal don´t include further editing so you get it right as you want it.
The 3 Things you need know to edit the image in your further editing are:
1.The height it has inside the header is controlled with the top:57px parameter, the higher the number is, the lower in the page the image will appear and viceverza.
2.-If you want the frame of your header to be bigger, just edit the description in the blog so it gets bigger, or remove it so it gets smaller.
3.-If you want the image to blend with the background (if it has color) of yor blog, then you must edit the image first so it does blend.
--There--
That is everything you need to know, as a Slacker myself, i know how important is the "I want it now" sentiment really is, so there you go, you wanted it fast, easy and working as less as possible for it and i give you just that.
And remember that if you need anything, the ony thing you need to get it is ask me for it (but i don´t borrow money ok?), just send me a e-mail, leave a comment in any post you want or catch me when i am online in the Bloggeratto Chat and tell me about it.
Subscribe
Posts
Comments
11 comments:
Thanks for helping us. Some of us just don't have the knowledge to deal with the more complicated fixes.
My only complaint about this fix is that it displays differently in Firefox and IE.
Otherwise, it looks great. You can check out my blog to see how it turned out.
Also, something weird in the comments: I tried to log in as my blogger ID, but it said that this was a regular-blogger account, and that since I was on blogger-beta, I couldn't leave a comment on your page. Weird.
Thanks again!
@Hal(9000? :P)
yeah, that is IE´s fault. it will show correctly in opera and in any mozilla based engine.
but it will look right in IE7 once it gets out.
That is a Blogger bug with the comments.. the reason why they hide behind the beta thing.
this is good ^^ helps many people out there ;)
way to go, slacky :)
Bless you my blogging son.
You shine light from above on our issues so that we may see.
I've hacked my beta blog using an original template and some tricks I got around here. I used a different method to the header thing. I picked up a template with images and discovered myself wher to change the width/height. I think I did a goog job, take a look please, it's in portuguese but the english version is coming soon. Congratulations to your blog, I discovered it in blogger forum and can't help keep coming back.
@efendi:
thanks efendi, yeah, it should help a lot of people, that is what is all about.
@Taoski:
Hahahahahaha, i will not even try to answer to a comment like that, thanks taoski.
@J.Noronha:
I saw, you did a very good job, and i don´t mind the portuguese, i can read portuguese along with other 4 languauges, (even if i can´t talk or write it right yet)
And you will always be welcome.
@SW:
Well, red head, you seem to have some serious troubles then, i must ask what browser you are using, and what version of windows you are in. (weird questions i know, but bear with me)
Now, there is not a problem, if you want to go to full v3.0 i can pass you to it if the problems persist, and yeah v3.0 is still quite...Unstable at the moment, so have a little more patiene.
and if you need anything you know just write me.
;)
Once in a while I face these issues. The paste thing I solve using ctrl+v, the order in links I think is a bug in blogger beta. If you log out and log back in, you are able to rearrange and save it. Curious, if you make another change and try to save it, it's the same, you have to log out...all the same. By the way, I use firefox (the latest update).
@J.Noronha:
umm, an my guess is that you are using a home edition xp?
because for some strange reason, there always problems when copy and pasting in firefox and home edition.. because when this happens in I.E is because your virtual memory has run out and you also have a cache bug.
but yeah, must be a combination of things..
I have even simpler solution. Just go to template layout and click on edit button of the header and in the "blog description" part just add the link to image.
Check live example here
I hope this helps
Sid
Ok, thanks sid,, yeah i know about that, this hack is not to put images inside the header frame if not wanted, that was just my example, it can be use to replace whatever space you set the image to, but i will make that clarification, and i will add a clarification with the inside header frame bit, i will link you in too.
Thanks for stopping by sid.
Post a Comment
Welcome To Bloggeratto. In here you can post any kind of comment you want. Seriously, Go ahead.