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:
Iconos Redes Sociales de Halloween
Separadores de Halloween para el Blog Clip arts de Halloween para tus diseños Tipografías originales de Halloween |
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://lh5.googleusercontent.com/-GscqsctHoNk/UmhbFx17znI/AAAAAAAAJ00/7SRcVn4og8o/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!
¡Ohhhhhh! tu página sale en scroll en la pestaña de Safari; me has dejado boquiabierta y ojiplática. Besos
ResponderEliminarSiiii jajaja ¡Ya os contaré! Es muy sencillo :)
Eliminar¡¡Besos, preciosa!!
Ya tengo mi entradita! y con tus diseños en ella! si quieres pasarte a verla, pincha en mi enlace.
ResponderEliminarhttp://nekanenfabrics.blogspot.com.es/2013/10/5-imprimibles-gratuitos-y-coleccion-de.html.
Besitos, guapa!
¡Me encanta, Carmen! :D
EliminarGracias por el truco, me ha ha gustado mucho como queda la imagen:
ResponderEliminarhttp://englishnoudoctubre3i4.blogspot.com.es/
¡¡Que chulo!! La araña mola un montón jajaja
Eliminar¡¡Feliz viernes!! :D
Este comentario ha sido eliminado por el autor.
ResponderEliminarPues 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¿en borradores? ¿a qué te refieres exactamente con borradores?
EliminarTienes que subirla a un banco de imágenes online tipo picasa, dropbox...
Ya me cuentas ;)