Cabecera aleatoria

Mostrando entradas con la etiqueta html. Mostrar todas las entradas
Mostrando entradas con la etiqueta html. Mostrar todas las entradas

jueves, 10 de julio de 2014

[75 Aniversario de Batman] Adivina que personaje es - Edición Batman

Documento sin título
Hoy os traigo algo nuevo, algo que llevo preparando algún tiempo. Hace poco comencé a aprender a programar en HTML y decidí hacer un pequeño juego, basado en un concurso que se realizaba en La Órbita de Endor, llamado Adivina que personaje soy. El concurso trataba de adivinar cierto personaje mediante pistas. Así que decidí probar si podía hacer un pequeño jueguecillo con esas bases. Y aquí lo tenéis. Es una versión muy básica, una versión alfa, que seguro que tendrá errores, pero así lo vais testeando y me decís que falla. Las imágenes de los botones tardan un poco en cargar (tengo que solucionar eso) pero por lo demás es completamente funcional. Idme diciendo las puntuaciones que vais sacando y las rondas. Por ahora solo tiene 24 personajes, pero iré subiendo de vez en cuando más. Además aprenderéis cosas curiosas de muchos personajes relacionados con el mundo de Batman. Más adelante lo ampliaré para hacer personajes del mundo friki en general, pero con calma, que es un trabajazo

domingo, 30 de septiembre de 2012

[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.