Annyz-BlOg : Imagen Esquina Con Mensaje Al Pasar Cursor

Bueno mi blogueras como ven ya estoy de vuelta nuevamente =D

super contenta, mas alivianada que nunca xD

y con las ganas al 100 % de traerles un monton de recursos

y alguno que otro tutorial ^^!!

Esta vez traigo un tuto muy mono y que creo que te va a gustar :)!!

Aviso ~~~ El blog lo estare actualizando cada Mi mi mi miercoles jajajaj xD gracias a todos por su visita !!

cute no? jajaj

Bueno empezemos :)!! aqui imagen previa:

Al pasar el cursor por la imagen esta desplegara la burbuja con el mensaje :)!

- Clic AQUI para la Vista previa -

Si te gusto la munequita sigue los siguienes pasos:

Copia este codigo y pegalo en un gadget html/javascript. -- Aqui se pondra el gif/imagen que mas te guste.

Ahora ve a Plantilla

Editar Html y justo antes de ]]></b:skin> pegas el este codigo:

#lovely { 
bottom:10px; 
right:10px; 
         
position:fixed;
 z-index:0;
 }
#lovely img {
 width:140px; 
}

#lovely #bubble {
background:#ffffff;  /* COLOR DE FONDO DE LA BURBUJA TE TEXTO */
margin-left:-105px; 
margin-top:-190px; 
font-family: Verdana; 
font-size:9px; 
text-align:center; 
color:#000000;        /* CAMBIA EL COLOR DE LETRA */
position:absolute;
overflow:auto; 
width:0px;
height:0px;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out; 
-webkit-border-radius:5px;
-moz-border-radius:5px; 
border-radius:5px;
}

#lovely:hover #bubble { 
width:110px; 
height:130px; 
border:1px solid #ffffff; /* CAMBIA COLOR Y BORDE DE LA BURBUJA DE TEXTO */
padding:4px;
}

#lovely:hover #triangle {
border-left:18px solid #ffffff; /* COLOR DE LA FLECHITA */
border-top: 15px solid transparent;
border-bottom: 10px solid transparent;
}

#lovely #triangle { 
margin-left: 15px; 
margin-top:-120px; 
border-right:0px; 
width:0;
height:0;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent; 
position:absolute; z-index:1; 
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out; 
}

Para personalizarlo poniendole bordes y color del texto en el codigo viene en letra MAYUSCULA lo que tienes que cambiarlo para que quede del modo que a ti te guste :)!

Se me pasaba anexar..si gustas cambiar el fondo de la burbuja..para explicarte mejor en el codigo viene asi:

background:#ffffff; Aqui es para cambiar el color del fondo de la burbuja, pero si no quieres fondo de color y le quieres agregar una imagen como la vista previa de la captura de arriba -sailor moon-
borras:

background:#ffffff;

y pones este:

background-image: url("Fondo de imagen");

Ahi solo le agregas fondito de imagen que mas te guste ^^ espero haberme hecho entender sino fue asi..no dudes en dejarme un comentario y con gusto te ayudo :)!

ustedes pueden poner otro gif o imagen que mas les agrade es cuestion de buscar uno para que quede con el diseño que tienen del blog.

Algunos gifs/imagen: