Blogger Beta: Random Quote Generator

I've had a request on getting a random quote generator to work in Blogger Beta directly under the heading. Well, Eastendist, this is your lucky day! Hans from Beautiful Beta had done a post on a sticky message board and I used that hack with minor tweaks to get the random quote generator to work in Blogger Beta.

Look at this post, Sticky Message Board, and follow the instructions. Remember after you get it up and running, you can change the appearance in the code that you put in "/* Variable definitions" and in the CSS section to fit the your blog. Make sure you place this:

<div id='content-wrapper'>
<div id='message-board'>
<b:section class='msgbrd' id='msgbrd' maxwidgets='1' showaddelement='yes'/>
</div>

directly below:

<div id='header-wrapper'>

because this is the part of the code that puts the quote generator below your header. When you have all the code in your template and saved it, open the Layout Editor and under the header will be a new element. Click 'Add a Page Element' , and select 'Configure HTML/JavaScript'. Click on 'Edit HTML' and add this to the window:

<i><center>

<center><script language="JavaScript">
//store the quotations in arrays
quotes = new Array(6);
quotes[0] = "So many cats, so few recipes.";
quotes[1] = "Use the best: Linux for servers, Mac for graphics, Windows for Solitaire.";
quotes[2] = "That's not a haircut. That's a cry for help.";
quotes[3] = "The last thing I want to do is hurt you. But it's still on the list.";
quotes[4] = "Some days it's just not worth gnawing through the leather straps.";
quotes[5] = "Doing for blogging what Ghengis Khan did for social work.";
//calculate a random index
index = Math.floor(Math.random() * quotes.length);
//display the quotation
document.write("\n");
document.write(quotes[index]);
//done
</script>

</center></i>

You can change the quotes whenever the whim strikes you. You can even add more quotes...just follow the layout and increase the 'Array(6)' for each quote. Note that even though it says 'quote 5', the 'array' says 6. That is because it starts with 0.

Have fun putting in your favorite quotes!

Update 11/11/06: I've had some requests on how to put in more quotes, so here are more explicit instructions on doing just that. This is like the 'formula'. I know, Algebra is scary, but this is only a tiny formula with hardly any numbers and a couple of 'x's!

quotes = new Array(X + 1);

and you add another line for each new quote:

quotes[X] = "Your new quote";

Let's say you want 10 quotes. In 'Array you will put 11 (which is the x +1 or 10 + 1 from the formula). That will make your code look like this:

first part of code.....
quotes = new Array(11);
quotes[0] = "So many cats, so few recipes.";
quotes[1] = "Use the best: Linux for servers, Mac for graphics, Windows for Solitaire.";
.....blah, more quotes, blah....
quotes[10] = "Doing for blogging what Ghengis Khan did for social work.";
.....last part of code

If that doesn't clear it up, let me know!

Update 11/13/06: See Blogger Beta: Random Quote Generator - Part 2