How To: Set Up Different Header Images on Blogger Pages

(These instructions were originally developed to go with the Anderson Language & Technology Center Language Refresher Courses templates. The Refresher Course template is available upon request.)

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='&quot;_headerimg&quot;' 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 == &quot;http://germanrefresher.blogspot.com/p/about.html&quot;'>

    <img expr:alt='data:title' expr:height='data:height' expr:id='&quot;_headerimg&quot;' 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 + &quot;_headerimg&quot;' 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 + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

</b:if>