Frases al azar en tu blog - Random Quotes

A pesar de que creo haber visto ya varios widgets los cuales nos permiten hacer múltiples cosas como "Anime del Dia", o "Quote del Día", semana, etc.

Pues hace poco implemente mediante un pequeño código en mi blog, para que mostrara diferentes frases cada vez que se recargaba la pagina.

Les dejo el código en su forma limpia, y en la "variante" que es ya un poco mas arreglado para mostrar las cosas de una mejor forma xD.

Código Sencillo
<script language="JavaScript">
frases = new Array(4)

frases[0] = 'Linux'
frases[1] = 'Anime'
frases[2] = 'RoxCore'
frases[3] = 'Manzha'


aleatorio = Math.random() * (frases.length)
aleatorio = Math.floor(aleatorio)
document.write(frases[aleatorio])

</script>

En el código anterior, solo es de modificar lo que esta dentro de comillas simples, en este caso Linux, Anime, RoxCore, Manzha, etc.
En la parte de arriba dice:

frases = new Array(4)

El numero es cuestion de cambiarlo segun cuantas frases pongamos. En esta caso hay 4 (0,1,2,3).

Para agregar más, pues solo se copia la linea, y se cambia el numero.

frases[4] = 'Algo aqui'
frases[5] = 'are are'

Bueno, esa es mi breve explicación.

Les dejo este otro código, que ya fue el que manipule un poquito mas, en base a CSS. (Si has modificado el template de tu blog, quiza ya estes un poco familiarizado.

Código con CSS. Mas vistoso 
<style type="text/css">
.frase {
  font-weight:bold;
}
.autor {
  font-style:italic;
  margin-left:30%;
  font-variant:small-caps;
}
</style>
<script language="JavaScript">
frases = new Array(4)

frases[0] = '<div class="frase">"Are are"</div><div class="autor">Manzha desconcertado</div>'
frases[1] = '<div class="frase">"School Days"</div><div class="autor">School Days</div>'
frases[2] = '<div class="frase">"Haruhi-Sama"</div><div class="autor">Lelouch, dandose cuenta que Haruhi es superior</div>'
frases[3] = '<div class="frase">"Lelouch-Sama"</div><div class="autor">Kira, dandose cuenta ue Lelouch era superior</div>'


aleatorio = Math.random() * (frases.length)
aleatorio = Math.floor(aleatorio)
document.write(frases[aleatorio])

</script>

Aquí, agregue una parte con CSS. Que es para que quede como yo lo tengo.
Veamos por partes.

.frase {
  font-weight:bold;
}

Eso se refiere a el estilo de fuente que tendra la Frase, si quisieramos podriamos incluir colores, o que fuera italica en lugar de negrita. O quiza un fondo (que seria mas bien como un subrayado xD).

.autor {
  font-style:italic;
  margin-left:30%;
  font-variant:small-caps;
}

Aqui, son las caracteristicas de la parte de Autor de la frase. Esta en italicas, con un margen al lado izquierdo y una caracteristica para que las mayusculas se vean como pequeñas.

frases[0] = '<div class="frase">"ROXCORE"</div><div class="autor">Kira, Death Note</div>'

Es casi lo mismo que en el anterior, solo que esta vez indicamos cual parte es la frase y cual el autor (para que funcionen las caracteristicas antes mencionadas).

<div class="frase">AQUI VA LA FRASE</div>

<div class="autor">AQUI VA LA FRASE</div>

Bueno, esa es mi pequeña explicación. Con este codigo pueden tambien poner imagenes que cambien cada vez que actualizas, etc, etc.

Ah, se me olvidaba. El codigo lo insertas en un simple widget de HTML/Java, que vienen en blogger. O si es otro tipo de blog, o para otro fin, pues en el lugar respectivo xD.

Mas informacion del codigo, siendo usado esta vez para imagenes: Hackase