About the header images
The header images used for the
refresher pages are a combination of the default header image (That is, the
image you upload through the Layout editor in the blog settings) and static
images which are brought in only on specific pages.
To set up the header images,
first locate the section of the template which begins with the following lines
of code:
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl'
style='display: block'>
The format for customizing which image displays is as follows. Change
this code, and then paste it into the aforementioned section of the template
xml.
To swap out the header images on specific pages:
Include the following in your blogger template:
<b:if
cond='data:blog.url == "[SPECIFIC PAGE URL]"'>
<img expr:alt='data:title'
expr:height='data:height' expr:id='"_headerimg"' src='[IMAGE
URL]' style='display: block'/>
</b:if>
Where [SPECIFIC PAGE URL] is the
FULL url of the page in question, and [IMAGE URL] is the location of the new
header image you wish to use. Custom
image on the “About” page:
<b:if
cond='data:blog.url ==
"http://germanrefresher.blogspot.com/p/about.html"'>
<img expr:alt='data:title' expr:height='data:height'
expr:id='"_headerimg"'
src='http://altec.colorado.edu/refresher_items/banners/gweek1.jpg'
style='display: block'/>
</b:if>
To use the default image on a page, use the following format instead:
<b:if
cond='data:blog.url == "[SPECIFIC PAGE URL]"'>
<img expr:alt='data:title'
expr:height='data:height' expr:id='data:widget.instanceId +
"_headerimg"' expr:src='data:sourceUrl'
expr:width='data:width' style='display: block'/>
</b:if>
This will pull in whichever image
you uploaded through the blogger Layout editor. For a default image on the homepage:
<b:if
cond='data:blog.url == data:blog.homepageUrl'>
<img expr:alt='data:title'
expr:height='data:height' expr:id='data:widget.instanceId +
"_headerimg"' expr:src='data:sourceUrl'
expr:width='data:width' style='display: block'/>
</b:if>
