Como poner una imagen flotante de Halloween en Blogger

Como poner una imagen flotante de Halloween en Blogger

Terminamos la semana temática de gráficos de Halloween para decorar tu blog y tus diseños. Te dejo un pequeño recopilatorio de todo lo que he compartido con vosotros esta semana por si se te ha pasado algo:



Hoy voy a contaros como poner una imagen flotante de Happy Halloween en la cabecera del blog, justo a la izquierda, para no tapar el título.

Código para añadir imagen flotante en el cabecero del blog


Es éste:

<a style="display:scroll;position:fixed;top:5px;left:5px;"  href="#" alt="Halloween" title="Happy Halloween"><img style="border:0;" src="URL DE TU IMAGEN"/></a>


top:5px -> indicamos que queremos la imagen arriba (top) dejando un margen de 5px respecto al límite superior del blog.
left;5px -> programamos que nuestra imagen aparezca a la izquierda (left) dejando un margen de 5px respecto al límite izquierdo del blog.
♥ # -> La imagen no enlaza a ninguna página, si quieres enlazarla a alguna página especial de tu blog, solo tienes que sustituir el símbolo # por la URL de tu página. Si no quieres añadir enlaces, deja la almohadilla (#).
♥ Halloween -> etiqueta alt, le indicamos a Google la descripción de nuestra imagen.
♥ Happy Halloween -> etiqueta title, este texto aparecerá cuando pasemos el cursor sobre nuestra imagen.

Cambiando estos parámetros puedes modificar la posición y margenes de tu imagen flotante para adaptarla perfectamente al diseño de tu blog. También puedes cambiar la descripción y el título.

URL DE TU IMAGEN -> En esta etiqueta va el enlace de la imagen que queremos que aparezca en el cabecero de nuestro blog.

Se

Puedes ver el resultado en este blog de pruebas de diseño gráfico para blogger.




Elegir la imagen flotante para el blog




















































Instalar imagen flotante en la cabecera del blog

Muy sencillo.

Añadimos la URL de la imagen que hayamos escogido al código, por ejemplo:

<a style="display:scroll;position:fixed;top:5px;left:5px;"  href="#" alt="Halloween" title="Happy Halloween"><img style="border:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2vLfAOKmPmmZ18-u7bZ4OqOEtma53rhzN9KEVHPNsEB33Lu84iXIZcljPfZFhlWG1PWD2ViqdOL0rBQ19HAXVCi2oAEkDNMNFWFlQk8D7JJ-ypvLUi4GOoGfZeQHIUo5fiyA0O6XJK1E/w288-h306-no/001.png"/></a>


  • Copiamos el código y vamos a Blogger --> Diseño
  • Añadir un gadget --> HTML/Javascript
  • Pegamos el código y aceptamos.

¡¡Listo!! Ya tenemos una imagen flotante de Happy Halloween en el margen izquierdo superior de nuestro blog. 

Para quitarla, solo tienes que eliminar el gadget y desaparecerá.

* IMPORTANTE * Si Blogger no te permite guardar tu gadget sin añadir un título pero quieres que aparezca en blanco para que no estropee la imagen, añade como título el siguiente código:

<h2></h2>

¡¡Ya me contarás si te animas a usarlo!! Y, si quieres, déjame el enlace para verlo, ¡que me hace ilusión!






Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥






Comentarios

  1. ¡Ohhhhhh! tu página sale en scroll en la pestaña de Safari; me has dejado boquiabierta y ojiplática. Besos

    ResponderEliminar
    Respuestas
    1. Siiii jajaja ¡Ya os contaré! Es muy sencillo :)

      ¡¡Besos, preciosa!!

      Eliminar
  2. Ya tengo mi entradita! y con tus diseños en ella! si quieres pasarte a verla, pincha en mi enlace.
    http://nekanenfabrics.blogspot.com.es/2013/10/5-imprimibles-gratuitos-y-coleccion-de.html.

    Besitos, guapa!

    ResponderEliminar
  3. Gracias por el truco, me ha ha gustado mucho como queda la imagen:

    http://englishnoudoctubre3i4.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. ¡¡Que chulo!! La araña mola un montón jajaja

      ¡¡Feliz viernes!! :D

      Eliminar
  4. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  5. Pues a mí no me ha dejado hacerlo con una imagen que tenía... La guardé en borradores, copié la url, pero me ha dado error :-(

    ResponderEliminar
    Respuestas
    1. ¿en borradores? ¿a qué te refieres exactamente con borradores?

      Tienes que subirla a un banco de imágenes online tipo picasa, dropbox...

      Ya me cuentas ;)

      Eliminar

Publicar un comentario



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥