Explicación del código del script

Se repite aquí el código ya visto del script, aunque se separa en sus diversas partes para explicar lo que hace cada una.
Todas estas explicaciones son exclusivamente para quien quiera conocer algo más detalladamente la composición del script, pero en ningún caso son necesarias para utilizarlo.
Las 3 partes en que se divide a continuación (CSS, HTML y JAVASCRIPT) irán todas juntas si se copia y pega el código tal y como se he indicado, pero no hay ninguna objeción a que se pongan por separado en el caso de que en la web o blog de destino existan ya unas ubicaciones predefinidas para cada uno de estos tipos de código. La única restricción es que la parte HTML quede ubicada en la zona de la página donde se quiera que aparezca la frase, y que las ubicaciones de las partes CSS y JAVASCRIPT aseguren que se ejecuten siempre que se cargue la página.

1.- la parte CSS. Es la que figura arriba del todo entre etiquetas style

<style type="text/css">
#fraseMus {} /* comunes */
.frase {font-size: 150%; font-weight: bold; font-style: italic;}
.autor {font-size: 120%}
</style>

Consta de 3 líneas:
- la 1ª con #fraseMus es para poner parámetros comunes a todo el conjunto (frase + autor). Por defecto viene vacío ({})
- la 2ª con .frase es para configurar el aspecto de la frase. Por defecto viene para que se saque algo más grande (al 150% de tamaño normal) y en negrita y cursiva.
- la 3ª con .autor es para configurar el aspecto del autor. Por defecto viene para que se saque un poco más grande (al 120% de tamaño normal).


2.- la parte HTML. Es la que figura a continuación, entre etiquetas div

<div id="fraseMus" onclick="mostrarFrase()"></div>

Consta de una simple línea para dar de alta el nombre de la zona donde ubicar la frase.
Además se indica la función que debe ejecutar cuando se pique sobre esa zona.


3.- la parte JAVASCRIPT. Es la parte final y la más larga.
Está formada a su vez por 3 secciones, cada una de ellas entre etiquetas script

<script type="text/javascript">
fraseInicial = 0; // 0 frase del dia, 1 frase aleatoria (cada minuto)
tipoAutor = 0.5; // <0: sin autor; 0: 2 apellidos; 1: lugar/año
// entre 0 y 1 (con punto decimal): % aleatorio entre 2 apellidos y lugar/año
frases = new Array();
totalFrases = 0;

La parte inicial del primer script es la que inicializa las variables comunes (globales) utilizadas.

La parte final del primer script es la que contiene el código de las 3 funciones necesarias:

function leerFrases(json) {
totalFrases = json.feed.entry.length;
for(i=0; i<totalFrases; i++) {
frases[i] = [];
frases[i][0] = json.feed.entry[i].gsx$frase.$t;
frases[i][1] = json.feed.entry[i].gsx$autor.$t;
frases[i][2] = json.feed.entry[i].gsx$lugar.$t;
}
if (fraseInicial!=0) fraseInicial=1;
}
function mostrarFrase() {
var salida = "<span class='frase'>" + frases[fraseInicial][0] + " </span>";
if (isNaN(tipoAutor)) tipoAutor=-1;
if (tipoAutor>=0) { // cambia formato según tipoAutor
numAutor = (tipoAutor<Math.random())? 1:2;
salida += "<span class='autor'>" + frases[fraseInicial][numAutor] + "</span>";
}
var divFrase = document.getElementById('fraseMus');
divFrase.innerHTML = salida;
fraseInicial++;
if (fraseInicial>=totalFrases) divFrase.onclick=paginaFrases;
}
function paginaFrases() {window.location.href="http://frasesdemus.blogspot.com";}
</script>

- leerFrases sirve para cargar en memoria los datos de frases aleatorias leidas desde la hoja web que los contiene. Los datos vienen con estructura de objeto JSON y lo que hace esta función es leerlos y guardarlos en una matriz en memoria (frases) para que luego la lean las otras funciones.
- mostrarFrase sirve para escoger la frase a presentar (según los valores de las variables fraseInicial y tipoAutor) y mostrarla en su sitio.
- paginaFrases sirve para saltar a este blog tras picar más de 3 veces en la frase.

<script src="https://spreadsheets.google.com/feeds/list/1cCkR7nCB2unqN58r6MyQ1X3J0w8S42iFWRoF9A6iBG8/od6/public/values?alt=json-in-script&callback=leerFrases" type="text/javascript">
</script>

El 2º script lanza al cargar la página la lectura de la hoja web donde están contenidas las opciones aleatorias necesarias para formar las frases.
Utiliza la tecnología json-in-script (o JSONP) para llamar a la función leerFrases, que es una de las contenidas en el script anterior y cogerá los datos de esa hoja y los cargará en memoria.

<script type="text/javascript">mostrarFrase();</script>

El último de los 3 scripts lanza al cargar la página la función que saca la frase: mostrarFrase, que es otra de las contenidas en el primer script.