My blog template is based on the Denim theme, but since I didn't particularly like the header, I replaced it with my own graphic, along with a link back to my site. Want to know how? Read on!
First, you'll need to create your new blog header using your favorite image creation software (eg: Paint, CorelDraw, Gimp, Photoshop...). Take a look in your blog template HTML and make a note of the width of your blog header; you'll probably want your new blog header to be this width too! Don't worry about the height: it can be as tall or as short as you want.
Once you've made your new blog header, you'll need to tinker with the HTML of your template a little bit. Make sure you backup your existing template before doing anything more, just in case something goes wrong and you need to pout your current template back in place instead. Then look for the following section of code:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Header (Header)' type='Header'/>
</b:section>
</div>
The elements highlighted in bold need to be changed. So:
- Change maxwidgets='1' to at least 2 in order to be able to add another element in the header section.
- Alter showaddelement='no' to showaddelement='yes' to be able to add a different element to the header section (your new image)
- Replace locked='true' with locked='false' so that you can later remove the old header.
Now save your template, and go back to the layouts section in your dashboard. You'll notice that you can now add another element to your blog header!
If you only want to add your new blog header, and don't want to have this linked to your home page, you can easily do this by choosing to add a "Picture" element to your blog and uploading your new header.
However, if you prefer to link your header to your homepage (as in the default Blogger templates), you'll need to do a little more work first. Upload your image to a remote site (there are many free hosting accounts available, such as FreeImageHosting.net) and make a note of the full address of your file, including the extension (eg: www.yoursite.com/images/yourimage.jpg). Then, choose to add a "HTML/Javascript element and add the following:
<img src="http://www.yoursite.com/images/yourimage.jpg">
Replacing the image source with your own image address of course! This is the code needed to display your new blog header. Now to make this image become a link back to your blog's home page, you would need to add link tags as follows:
<a href="http://yourblogaddress.blogspot.com"><img src="http://www.yoursite.com/images/yourimage.jpg"></a>
Save this element and view your blog. You should see both the original blog header and your new blog header. Make sure your new blog header looks the way you want it to, then go back to edit the layout.
This time, click on the "header" element (the original blog header), and choose "remove page element". Once you do this, the original header will be completely removed, leaving only your customised one (a good reason to have saved a backup of your template, just in case!).
And there you go: your very own customised blog header! Enjoy!
Technorati Tags: custom+blog+header blogger blog+template html+code header imaging
10 comments:
Thank you, thank you!!! I have been trying to fix my header for ages!!!!
Jason, I'm no pro, but you would probably have to make the title part of the image to get that kind of effect.
Hi Amanda,
hope this post is not too old for you to answer my question.
I made a header with Photoshop, 660 pixels wide since my blog has the Minima Stretch template.
Problem is, when I saw my blog, I could see two empty spaces to each side of the header. So I widened up the image and uploaded it. I saw it fine, but other people say the image was too large and they could only see like 2/3 of it.
What is the problem? Is it a screen size issue, should I use the 660 pixel wide image?
Thanks a lot and congrats on such a great site.
http://www.flohabla.blogspot.com
I did what you said, and I have a lovely clickable header now, but I don't know how to put text on top of the image.
Is that possible?
Please help! Or direct me to a site that will help. I've been searching all over google and can't seem to find the advice I need.
Thank you so much.
(jessica.sapoznick@gmail.com)
Hi,
I think I left a comment earlier but I have a different question now. I am using your code but whenever I save it, the picture does not show up on my page. (it shows a small box with a question mark) When I go back in to look at the code, a / has been added after "my image url" and before >.
Is this what's making the image not show up?
Any help would be much appreciated.
jessica.sapoznick@gmail.com
THANK YOU SO MUCH!!!
Great help man, thanks! Cheers!
You have helped so many souls, lol.
Many people forget to not include the style tags.
Also Its easier to copy the css at the start of the template .
thanks!
hi! how does this method affect SEO? Will the crawlers still be able read any keywords since you removed the original header? Thanks
Post a Comment