Blogger Beta: Using Widgets for your Header
1977 left a comment on Customizing your Header: Add an Image with a little something he came up with. It is a way to add your header using widgets!
Here is what he did. Go to 'Template/Edit HTML'. Find the #header-wrapper <div> and change 'locked' value from true to false. (Note, it could be called #outer-wrapper. Each template varies. And in a template I tested, the value was already false.) Save any changes that you made.
Then open 'Template/Page Elements'. Here remove the header by clicking 'edit' on your header element, then 'Remove Page Element'.
In this same window, choose 'Add a New Page Element/ Picture'. In the box that pops up, you will either choose 'From your computer' or 'From the web' and browse your computer for the image or paste the web url in the box. Close that window by 'Saving Changes'.
If you want to change the header postion, go to 'Edit HTML' and in the #header-wrapper section of the Style Sheet, change the text-align value to left, center or right.
Thanks 1977 for a great tip!
UPDATE: 1/20/07 This comes from another reader, Shrish! One needs to set showaddelement="yes" in the 'header-wrapper' div, otherwise 'Add a New Page Element' option will not be visible on 'Page Elements' page.
10/24/07 I saw this tweak at Big Blog Directory: "The only problem was that the graphic wasn't clickable since it used the 'Picture' widget . I took my html code and put it in a 'HTML/Javascript' widget instead and it worked."
Labels:
Blogger Beta,
Design,
Graphics,
Header
21 Comments:
v. nice. Must remember to do this when I change my template.
@Beks, what a coincidence! I was at your blog today (making the rounds of the blogroll's updates) and read your pitiful little post. You are too funny!
http://delang-d.blogspot.com/2006/11/adding-second-header.html
i've made by my own one. mayber to put banner or little ads
This is a nice and simple solution. However when you delete the header widget from the "Page Elements" you lose the code from that widget which makes your header a link. Therefore, when you are on a post page you can not cursor over your header to get back to home. This may not be an issue for people with other links back to thier home page.
As I said I like this hack because it is so easy but because of that issue I think I persoanlly prefer Annie's method - with the added method for getting rid of the default header title text as provided by j. noronha of Hacks Inventory in this post (look for the addition in j. noronha's comment).
To be able to fully cusomise the header with images must surely be a hot contender for favourite. Maybe you can string to two separate pieces together in one post here Annie?
Cheers,
SJ xx
I just saw your post Annie about clickable headers. Maybe I should have tried that - where the heck are the style tags? I been looking for them for hours!
SJ xx
@skanky jane, I left an answer on another post where you talked about the style tags.
I try to link some similar posts together. Maybe it's time to go through and see what got left out. There is always the label cloud option. Clicking on the label 'header' will bring up all posts that I tagged header.
Happy hacking, Jane!
Your write up is fantastic..I have book marked the page.Can I have more number of page elements in the header
annie:
I did the same as yous aid. But the image is too big and on the right side ther are empty spaces. How shud I reduce the image and make it wide.
@priya, just a quick answer as I'm on my daughter's computer (due to ice storm...power outage...no internet). You must resize the image to fit the area you want. If you have problems with that, I can help after I get on my computer when the power returns. I have a little program with firefox that measures things on the screen. So, then I can tell you the exact size you need.
Annie: Sure no problem. Hope the power returns pretty soon for you. Its cold here too.
This is great! Thanks for posting!
This post helped me add a graphic header to one of my blogs and also lead to a blog post. Thanks.
@annie,
"I have a little program with firefox that measures things on the screen."
MeasureIt is a firefox extension for measuring screen pixels. Another program is JR Screen Ruler.
annie, I removed the original Header, and added a Header Image with this Code. You can see it on my Test blog.
Now how can I remove those ugly borders around the image ?
Also I measured the height and width of inner box (inner border)and set the image properties accordingly but still some space is left below the image in inner box.
@Shrish, To get rid of the borders, find this code in your CSS style sheet:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #cccccc;
}
#header {
margin: 5px;
border: 1px solid #cccccc;
text-align: center;
color:#666666;
}
and remove both border elements. Then with the borders gone, there will be no white space!
Thanks annie, I successfully removed the borders. :)
And us in the above workaround one needs to set showaddelement="yes" in the 'header-wrapper' div, otherwise 'Add a New Page Element' option will not be visible on 'Page Elements' page.
@shrish, thanks for the tip! The post has been updated to include your information.
can someone please help me put a header in my blog that is 660 px wide and 199 px tall?
I have gone through these tutorials and im convinced im retarted.
The image is www.hereliesboots.com/images/blogbanner1.jpg
my blog is
http://hereliesboots.com/bootsblog
thanks
Hi Annie! I was wondering how to hack my labels/tags.. When I click them, I only want the titles to be displayed and not the whole blog just like this site.
Thanks so much!
Roxanne
http://sweetfuzzyteddy.blogspot.com
@Sweetfuzzyteddy, Well, I'm sorry to say, but that was just a happy accident that happened ages ago...some sort of code conflict that turned out for the better. So, I don't think I can replicate it.
haha. Ok, thanks! I'll keep tweaking. My fingers are crossed for a lucky code conflict. :)