How To: Display a random quote on your website that changes over time

The following block of code can be inserted wherever you want it, and produces a random quote/bit of text that changes over time.

Code:
<SCRIPT type="text/javascript">
var phrases = new Array()
phrases[0]= "[Quote A]"
phrases[1]= "[Quote B]"
phrases[2]= "[Quote C]" 
phrases[3]= "[Quote D]" 
phrases[4]= "[Quote E]" 
function display()
{
a=Math.floor(Math.random()*phrases.length)
document.getElementById('phrase').innerHTML=phrases[a]
setTimeout("display()",5000)
}
</SCRIPT>

<div id="phrase">
<SCRIPT type="text/javascript">display()</SCRIPT>
</div>
</div>

Where "phrases[#]" is the number of the quote you want to insert, and you can add as many as you like.

Example:

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>

How To: Dropdown Menu Bars in Blogger

I've had this topic come up several times now, so I figured an explanation was in order.

See this? This is what we're gonna make, in CU colors.

The bar is composed of two parts, one that tells it how to look, and one that tells it how to act.

---

Let's tell do the looks first.

1. Log into blogger, click on your blog, then go to "Template"
2. Click "Edit HTML" beneath the photo of your blog (Under "Live on Blog")
3. Control + F to search, or simply scan visually, for a bit that says "]]></b:skin>"
4. Paste the following code directly in front of "]]></b:skin>". Then click "Save template", once it saves, click "Close". Do not make any other changes.

/*----- Drop Down Menu ----*/
    #mbtnavbar {
        background: #ffffff;
        width: 100%;
        color: #ccc;
            margin-left: -30px;
            padding: 0;
            position:  relative;
            border-top:0px solid #ffffff;
            height:35px;
    }
    #mbtnav {
        margin: 0;
        padding: 0;
    }
    #mbtnav ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #mbtnav li {
        list-style: none;
        margin: 0;
        padding: 0;
            border-left: 0px solid #fff;
            border-right: 0px solid #fff;
            height:35px;
    }
    #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
        color: #000;
        display: block;
       font:normal 12px Helvetica, sans-serif;
  margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
    }
    #mbtnav li a:hover, #mbtnav li a:active {
        background: #CFB87C;
        color: #FFF;
       display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
    }

    #mbtnav li {
        float: left;
        padding: 0;
    }
    #mbtnav li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 80px;
        margin: 0;
        padding: 0;
    }
    #mbtnav li ul a {
        width: 80px;
    }
    #mbtnav li ul ul {
        margin: -25px 0 0 80px;
    }
    #mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
        left: -999em;
    }
    #mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
        left: auto;
    }
    #mbtnav li:hover, #mbtnav li.sfhover {
        position: static;
    }

    #mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
        background: #CFB87C;
        width: 80px;
        color: #FFF;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #A2A4A3;
border-left:1px solid #fff;
border-right:1px solid #fff;   
    }
    #mbtnav li li a:hover, #mbtnavli li a:active {
        background: #cccccc;
        width: 80px;
        color: #FFF;
           display: block;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
    }

(You'll notice this all says "mbt" in front of this, that's because the original code is from "My Blogger Tricks" and one should always cite her sources. However, it has been modified to meet certain branding standards. Please see their site for more styles and the original code.)

---

Now we can make the bar itself.

The first step is to insert a new space in the template for the menu.

1. Click on "Layout" in the sidebar to get to the layout designer.
2. Click "Add a gadget" beneath your header (It will say "Header" or the title of your blog) to bring up the Add a Gadget menu.
3. Scroll through available gadgets until you find "HTML/JavaScript", then click the blue square with the white + on it to add it to your blog. This gives us a new space in which to put the code for our menu. The box itself should automatically switch to the "Configure HTML/JavaScript" window.

Now we can add in the links themselves.

1. Under "Title", put "Menu Bar"
2. For content, add the code below, to get started. You'll notice it's a list of items:

 <div id='mbtnavbar'>
    <ul id='mbtnav'>
            <li><a href="[V]">[LINK 1]</a></li>
            <li><a href="[W]">[LINK 2]</a></li>
            <li><a href="[X]">[LINK 3]</a></li>
            <li><a href="[Y]">[LINK 4]</a></li>
            <li><a href="[Z]">[LINK 5]</a></li>
   </ul>
</div>

Where the letters are the actual address of the page you want to link to, and [LINK #] is replaced by the title of the link itself. The result looks like this:

But since you want a drop down menu, we need to put a list inside our list. For example:

<div id='mbtnavbar'>
    <ul id='mbtnav'>
            <li><a href="[V]">[LINK 1]</a>
                <ul>
                    <li><a href="[a]">[SUB 1]</a></li>
                    <li><a href="[b]">[SUB 2]</a></li>
                    <li><a href="[c]">[SUB 3]</a></li>
                </ul>
            </li>
            <li><a href="[W]">[LINK 2]</a></li>
            <li><a href="[X]">[LINK 3]</a></li>
            <li><a href="[Y]">[LINK 4]</a></li>
            <li><a href="[Z]">[LINK 5]</a></li>
   </ul>
</div>

(Notice how the </li> after [LINK 1] has moved to AFTER the new list. That's because the [LINK 1] item now includes the sub-menu itself.)

Result:

That's all there is to it. Don't forget to save and back up.