Customizing your header: another way to add an image
I found another way to add an image to your header at Blogger Forum written by thrbr.
Look in your Minima template for:
- - - - - - - - - - - - - - - - - - - - - - - - - -
<div id="header">
<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
<p id="description"><$BlogDescription$></p>
</div>
- - - - - - - - - - - - - - - - - - - - - - - - - -
and replace <$BlogTitle$> with <img src="http://your_address/your_image.jpg" border="0"/>
- - - - - - - - - - - - - - - - - - - - - - - - - -
<div id="header">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<img src="http://your_address/your_image.jpg" border="0"/>
<ItemPage></a></ItemPage>
<p id="description"><$BlogDescription$></p>
</div>
- - - - - - - - - - - - - - - - - - - - - - - - - -
1) Be sure to use an absolute path for the image!
2) No need for that <h1></h1> anymore;
3) If you only want that image you can delete that <p id="description"><$BlogDescription$></p> too!
Labels:
Classic Blogger,
Design,
Graphics,
Hacks,
Header
8 Comments:
i have really tried this now, the same thing over and over.. 3 times.
and i can't still get it to work.
i have a image-header (649x105)
GiF format. implemented the code
and changed the url adress to where
i uploaded the image onto blogger.
but still nothing.. what might i be doing wrong??? :\
please contact me at STONESAW
mabe something to do with the size of
the header.img ?
or mabe that the Blogger.com have done some changes internaly in the standard code? seems like there's some widget stuff in the script now.
had to change to classic code. :\
@stonesaw, the size should be fine. Where did you put it exactly, and what does it do?
Try putting your image here:
#header {
width:660px;
height:161px;
margin:0 auto 10px;
background: #fff url(YOUR IMAGE URL) no-repeat;
}
Hi! thank you so much for these articles. They are clear.
I have tried to re-do my header image:
http://meeyauw.blogspot.com
as you can see, something is wrong but i don't know what!
Can you help? You must be awful busy but if you could, I certainly would appreciate it!
Thank you!
@meeyauw, A couple of possible fixes. First backup your template. Then find this in you template:
#header { background:url("http://farm1.static.flickr.com/152/351227608_c1fa10261e_o.jpg") no-repeat left bottom;
padding:0 15px 8px;
}
I think adding this to that will correct the problem:
width:740px;
height:150px;
Second option if the above doesn't work...it may have something to do with your header wrapper image. Remove this from the #header-wrapper:
background: #476 url("http://www.blogblog.com/rounders4/corners_cap_top.gif") no-repeat left top;
I think one or the other will fix it! If not, let me know, and we'll try again.
If I want to use two different of images for my header background, but I want to randomize it, can it be possible? If yes, how can I achieve it?
Great worked for me,Now all I Have to Do is Make a Good Logo.
Nice code! I appreciate the color coding in the code; makes it easier to read.