Sunday, December 11, 2005

Using an image as your title *on a modified* blogger template


Due to bandwidth issues, I have to change from typepad to blogger for one of my sites.

As far as I can tell, I cannot just copy and paste the template into blogger. So I found a suitable
modified template from an online source to use.

My problem is the fact that previous food blog
school posts about how to use an image for your title/header are no longer applicable to this modified
template (at least that is what I think, forgive me if I am mistaken)

Can anyone tell me what to change in my template (that follows) so that the image i want to use (found here: http://static.flickr.com/34/72546532_fe0d06bbeb_o.jpg )
shows up as my title/header for my blogger site?

Modified Template


This post was written by Ali from Something So Clever


3 comments:

Anonymous said...

The problem is that the template you picked has no background image style for the header. And the banner size is different than the header in the template size.

In other words, this might be to involved to explain here.

If you're familiar with CSS, I'll give a simple answer - recreate your banner so it's 700 pixels wide, and drop in:
background-image: url( );
in your #banner style. You'll need to apply no-repeat and top center position attributes and adjust top and bottom margins.

Otherwise feel free to view (or steal) the method I use to place an image in the background of my header in my regular kiplog.com site.

Ziz said...

Hey Paul -

I am not familiar with CSS. I went ahead and resized my banner to 700 pixels wide. I am lost from then on. :)

If someone would be willing, and it isn't a lengthy thing to do, I could make someone an admin on my blog so he/she could place the code where it needed to go w/the necessary changes.

Sorry that is so pathetic, I just can't seem to figure this out! :)

My email is: somethingsoclever@hotmail.com

Thanks to anyone who is generous enough to help my sorry ass out!

Gerald San Jose said...

This should help you get started:

Find everything between [h1] and [/h2] in the header section of your code and replace it with the following

[a href="<$BlogURL$>" accesskey="1"]
[img width=700px src="http://static.flickr.com/34/72546532_fe0d06bbeb_o.jpg "]
[/a]

Make sure you substitute all the square brackets with the HTML tag signs.

You may want to play around with the width parameter inside the img tag until the banner looks correct.