Beta Blogger - Clickable Header
Due to a huge demand for clickable headers, I'm writing a post to explain how to make your header clickable in Beta Blogger.
Since you want a clickable header, I'm guessing that you already have a header image and it is hosted on a web hosting account. You will need the URL of this image later.
First you will make a 'division' to hold the image and position it in your blog in the CSS style sheet between the <head> </head> tags:
#imageholder {float:right;}To make it clickable add this code after the <body> tag:
<div id="imageholder">I have tested this in a practice blog and it works! With that being said, if you have a problem, let me know.
<p><a title="Your blog title" href="yourblog.url">
<img border="0" src="image.url" alt="title of image" />
</a></p>
</div>
Labels:
Blogger Beta,
Header,
Navigation
20 Comments:
works gr8! Now I have a clickable header (and not a plain image). Thanks! Had to add this line in the style to prevent alignment problems as I included the image div in the outerwrapper.
text-align: center;
If I add the image div just after body tag i.e. outside outerwrapper, strange marks appear all over the blog page and layout goes haywire.
@vivek, glad you figured it out! I guess there are a million variations.
hi annie, thanks for this. I actually managed to do it myself over at http://tesco-complaint.blogspot.com - what i did was:
1) changed false to true to make widgets addable to header
2) changed bloggers header to display:none
3) added a widget to display my graphic picture as my header in order to get blogger to host the image
4) added a html widget using this code in it:
[a href="http://tesco-complaint.blogspot.com/"]
[img id="logo" border="0" alt="Tesco-Complaint Home" src="http://photos1.blogger.com/blogger2/7192/4339/1600/gse_multipart2117.gif"/]
[/a]
(replace [ with < etc)
5) remove the picture widget
everything is working now :)
thanks to BlogU for the ideas!
recent comments test :-)
Here's a fix that brings "home" clickability close to the header image.
First, I added a banner header image according to the instructions here. Then, I added back the header and using the layout "Add and Arrange Page Elements", dragged it below the image. Then I altered .h1 text to make it the size I wanted (smaller) and to align it in the center.
Now I have a banner that looks good and just below it, a short line of blog title text that looks like a "subhead", and that is clickable back "home". Not perfect, but getting there.
Check it out at:
The Oregonion
http://nottheoregonian.blogspot.com
Just what I was looking for! Thanks!
This is fantabulous Annie - thank you so much!
SJ xx
@jane, fantabulous is what I shoot for!
I know I've said it before - but, having just used this hack on yet another blog, I'm excited all over - it's fan-fantabulous Annie!!
SJ xx
Dang. It didn't work for me.
I am using Blogger Beta, but my template is from the old Blogger. Could that be the problem??
@andie, I would say yes. See this post instead:
Classic Blogger - Clickable Header
annie,
love the site, thanks!
any idea why any image linked from my blog won't show as my header? i have used photos directly from my blogspot posts for me header before. other websites' photos do show. thank you!
http://geoffreymiller.blogspot.com
@geoffry, I have never attempted to use a post image as a header. I would just make life easy and upload the images you want to use to a webhost and go from there :-)
a-
hah yeah i decided on that too. it was the weirdest thing because it worked initially from linking to images in the blog, but then it just decided not to. moral of the story? outside hosts are marvelous.
thanks for everything.
tesco-complaint's code worked like a charm for me, thanks to all for creating a great workaround.
Thank you so very much for such a fabulous help! It worked !!! I'm so thrilled.
The only little thing that didn't work for me is it looks great when seen with IE but the image isn't wright when seen with Firefox. I don't know how to fix it.
You can see it if you wish at
http://dimanchesoirachateauguay.blogspot.com/
I love your blog!!! I just can't stop reading you. It's like a book you begin and you just can't bring yourself to put it down, the kind which keeps you awake well into the wee hours of the night.
Thank you again !
@zoubida, I sent you an email with the code to fix the header!
Annie, it worked beautifully! I have now a fantastic clickable header on both IE and Firefox. Plus a bonus, it's centered correctly. I just need to make my mind on its picture/design now. Laugh!!!
I linked to you and will spread the word about your blog around me.
Thanks!
@zoubida, I'm so happy it worked! Thanks for the favicon update. I'm looking at the coding now to see what the difference is. Sometimes I just never figure it out...coding is so precise, and a little code conflict can arise from nowhere. Thanks!
Thank you so much!
It worked perfectly.