[Tutorial] Cabeceras Aleatorias

Hola gente, a petición de un lector del blog, voy a dejar un pequeño tutorial de como realizar cabeceras aleatorias en el blog.  A lo mejor no es la forma más eficaz de hacerla, pero es la que a mi me funciona, espero que os guste y lo apliquéis.

Primero hay que ir a la ventana de diseño de Blogger, y en el script de la cabecera propiamente dicha (Foto 1), y yo lo que hago es poner un png del mismo tamaño que las cabeceras que se quieran poner (Foto 2).

Foto 1

Foto 2

El segundo paso es Añadir un gadget, en la pestaña de lo básico tenemos que darle a HTML/Javascript (Foto 3). 

Foto 3

Nos aparece una nueva ventana, y en el apartado Contenido tenéis que escribir el siguiente código de HTML:

<b:widget id='Header1' locked='true' title='cabecera' type='Header'>
  <b:includable id='main'>
    <a expr:href='data:blog.homepageUrl'>
      <div id='header-inner' style="height: 70;"></div>
    </a>
    <script type='text/javascript'>
    //<![CDATA[
      img = ['http://urldeimageninventada1.png','http://urldeimageninventada2.png' ];
      document.getElementById('header-inner').style.background = 'url('+img[Math.floor(Math.random() * img.length)]+') no-repeat';
    //]]>
    </script>
  </b:includable>
</b:widget>

Solo tenéis que copiar tal cual el código y sustituir las url de las imágenes que queráis que salgan en vuestro blog, podéis añadir todas las que queráis  solo tenéis que separarlas entre comas, y que la url vaya entre comas altas.

Por último, solo tenéis que situar la caja del gadget-html, justo debajo de la caja del gadget-cabecera. (Foto 4).

Foto 4

Y ya está, cada vez que alguien se meta en vuestro blog, verá una imagen totalmente aleatoria. Por último agradecer a Daniel Fernández (www.danielfernandez.co) quien ha elaborado este script.