●•Phaniie Blog•●: Imagen estática , con mensajito al pasar el cursor!

Hola mis bellas lectoras que a pesar de mi ausencia aun siguen leyendo mis post, de verdad Muchas Gracias, y es por eso que hoy regreso con unos regalos y este pequeño tutorial para personalizar su blog!.

Una Imagen, que al pasar el cursor aparezca un lindo mensaje o lo que ustedes quiera poner, simplemente sigue estos pasos.

VISTA PREVIA AQUI solo pasa tu cursor ensima de la muñeca de la esquina y te aparece el mensaje

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

----------------------------------

En este código anterior dice donde poner el link de tu imagen, al igual que donde dice (BIENVENIDO) tu puedes borrar eso y poner lo que quieras justo donde esta la palabra bienvenido ahi es el texto que aparecerá.

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; 
}

Si no sabes como, cuando entres a HTML de la plantilla presiona CTRL+F y de aparecerá un cuadro de búsqueda dentro de cuadro donde esta el HTML de la plantilla (NO FUERA DE ELLA) y pones el código que te dije que tienes que buscar y enseguida te lo buscara.

Para personalizarlo poniéndole bordes y color del texto en el código viene en letra MAYÚSCULA lo que tienes que cambiarlo para que quede del modo que a ti te guste :)! ( si no sabes como personalizarlos o como cambiar esos detalles comenta!)

Se me pasaba anexar..si gustas cambiar el fondo de la burbuja..para explicarte mejor en el código viene así:

background:#ffffff; Aqui es para cambiar el color del fondo del cuadro que aparece con el mensaje, pero si no quieres fondo de color y le quieres agregar una imagen.
borras:

background:#ffffff;

y pones este:

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

esto se encuentra en el codigo que pusimos en el HTML de la plantilla.

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 cuestión de buscar uno para que quede con el diseño que tienen del blog.

Aqui les dejo unos gif por si quieren ponerlos como la imagen estatica solo ponen el link de la imagen

http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cinamonroll.gif

http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cute%206.gif

http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cute%2035.gif

http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cute%2013.gif

http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cute%2017_2.gif

http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cute%2011.gif

http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cute%2015.gif

http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cute%2018.gif

http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cute%2020.gif

http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cute%2021.gif

http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cute%2023.gif

http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cute%2024.gif

http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cute%2031_1.gif

http://i1221.photobucket.com/albums/dd461/kawaii_annyz/tumblr_nolc2qfz0r1tkx2tno1_250h.gif

CREDITOS A ANNYZ K. yo solo comparto chicas ella es la creadora

3 comentarios:

Unknown17 de enero de 2016, 13:57
Phanie!!! Eres genial amo toodos tus posts :33 te quiero linda me has ayudado muchisimo con tus tutoriales♥ Si quieres puedes pasarte por mi blog :33
http://elblogdemartii.blogspot.com.ar/ y darme algun consejito para mejorar jiji♥
ResponderEliminar
Respuestas
Unknown17 de enero de 2016, 17:57
:3
ResponderEliminar
Respuestas
Milena19 de enero de 2016, 18:39
Hola Phanie!!! Sos una grosa. Gracias por este post, me ha quedado muy bonito en mi blog en gif. Y a propósito, ya estoy siguiendo tu blog. Podrías ayudarme y seguir el mio también http://mimundodelectores.blogspot.com.ar/ te lo agradezco muchísimo. Y también quería preguntarte que en tu blog de pruebas (del que dejaste en este post para ver como quedaba en gif) tienes en tu cursor un destello muy bonito de unos corazones que se quedan al paso y si los tocas con el mismo cursor se decesacen en estrellas. Bueno... Pues quería saber si ya habías hecho un tutorial al respecto o si podrías hacer una, porque me enamoré de ese destello. Ojala me puedas decir de donde lo sacaste o como lo colocaste al blog. De ahi en más te mando mis saludos! :D
♥Milena♥
ResponderEliminar
Respuestas

Añadir comentario

Hola! Gracias por comentar! Recuerda no decir palabras inadecuadas o tu comentario no sera visible :)

sábado, 16 de enero de 2016

Imagen estática , con mensajito al pasar el cursor!

3 comentarios: