Tutorial:Caja flotante hover ♥


Hola¡¡¡ como estan todos ¡ ,por fin tengo tiempo estos tres dias,vienes,sabado y domingo  wii ,me estañaron ? Yo si  ¡Aun voy a estar ausente,pero segire publicando en cuanto pueda, ya di mis exámenes ,me fue muy pero muy bien , bueno chicas les traigo el tutorial el mas pedido por todas  
 Kawaii graphics

El Tutorial de como hacer ese efecto que tengo en el ask , al aser clic se abre una cajita ,donde pongo texto o varias cositas que se puede poner .
Pues por fin aqui tienen el tutorial :
Ir a Diseño/Añadir un gadget /HTML javascript  y colocan el siguiente codigo:
Si lo quieren en una entrada,van a su entradita y colocan HTML y colocan el siguiente codigo:
<a href="#?w=500" rel="box1" class="boxnot"><img src="Url de la Imagen del boton"/></a>
<div id="box1"class="boxfon">
<div style="position: absolute; margin-top: -150px; right: 14px;"><img src="Url de la Imagen que quieres que este encima de la caja" /></div>
<a href="/"><div style="overflow:auto; width: 500px;background: #fff; text-align: justify;">
<p>
Aqui su contenido que quieres que este dentro de la caja,puedes colocar el codigo de tu cbox ,ask,de un video ,etc </p></div></a></div>
<style>
#fade {
display:none;
background: #eee;
position:fixed; left:0;
top:0;
width:100%;
height:100%;
opacity:0.5;
z-index: 9999;
 }
.boxfon{
display: none;
background:Url('Url del fondo de los bordes');
padding: 20px;
float: left;
font-size: 1.2em;
position: fixed;
top: 60%; left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 10px #FFFFFF;
-moz-box-shadow: 0px 0px 0px #FFFFFF;
box-shadow: 0px 0px 10px #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
*html #fade {
position: absolute;
}
*html .boxfon {
position: absolute;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script><script>
$(document).ready(function() {
$('a.boxnot[href^=#]').click(function() {
    var popID = $(this).attr('rel');
    var popURL = $(this).attr('href');

 
    var query= popURL.split('?');
    var dim= query[1].split('&');
    var popWidth = dim[0].split('=')[1];

 
    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="Url de tu boton" class="btn_close" title="Close Caja" alt="Close" border="0" /></a>');

 
    var popMargTop = ($('#' + popID).height() + 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;

 
    $('#' + popID).css({
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });

 
    $('body').append('<div id="fade"></div>');
    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();

    return false;
});

$('a.close, #fade').live('click', function() {
    $('#fade , .boxfon').fadeOut(function() {
        $('#fade, a.close').remove();
    });
    return false;
});
});
</script>

Aquí les dejo para que se guíen que es lo que van a remplazar ,una idea de lo que es 

Url de la Imagen del boton:
2: Url de la Imagen que quieres que este encima de la caja
3:Url del fondo de los bordes



El botón no esta en flotante para que este en la cabecera ,si lo quieren que el botón este en la cabecera tienen que aumentar donde esta el codigo :
<a href="#?w=500" rel="box1" class="boxnot"><img src="Url de la Imagen del boton"/></a>
aumentas algo asi, asi queda :
<div style="position: absolute; margin-top: -300px; left: 250px;"><a href="#?w=500" rel="box1" class="boxnot"><img src="Url de la Imagen del boton"/></a></div>

300: si aumentas de numero se ira mas aribita el boton,si lo disminuyes el numero se ira mas abajo 
250:Si aumentas se ira mas al lado derecho , y si disminuyes se ira mas al lado izquierdo el botón 
Bueno eso es todo ,cualquier duda me preguntan .Puedes hacer varias cosas con este efecto,hasta un menu ,pero mas rato añado mas a esta entrada o ago otra entrada ,de lo que pueden aser con este efecto
Notita: La plantilla de la ganadora del concurso BunnyStyle,estoy ya terminandola  ,perdon por la demora 
RESPONDIENDO DUDAS:
Para Midori Yukiko: buscas en el codigo que di :
<img src="Url de la Imagen del boton"/>
y lo remplazas por :
Nombre de lo quiera
En caso que tu texto quieres que tenga un efecto que tienes en menu o otro efecto:
<div class="Nombre de efecto">Nombre de lo quiera</div>
Para Larita : te vas a tu gadget de menu ,te aparece el codigo de tu menu , y bueno por ejemplo te saldra algo asi , bueno este es el menu que tengo yo masomenos asi :
<a href="http://lunany-kawaii.blogspot.com/"><div class="menu9">home</div></a>
<a href="http://www.lunany-kawaii.com/p/personaliza-tu-pc.html"><div class="menu9">Personaliza tu pc</div></a>
<a href="/"><div class="menu9">ASK</div></a>

Entonces el tuyo aparecera algo asi pero en class el mio es menu9 , y el tuyo saldra otro nombre :3
Para agregarlo en ask hice esto al codigo :
<a href="/"><div class="menu9">ASK</div></a>
a cambiarlo asi :
<a href="#?w=500" rel="box1" class="boxnot"><div class="menu9">ASK</div></a>
y listo n.n 

21 comentarios :

  1. esta genial gracias por el tutorial :)

    ResponderEliminar
  2. Buenísimo el tutorial *^* ♥
    Tengo una duda :c, ¿podrías decirme quien canta la 4ta canción de tu reproductor? está linda u 3 u ♥
    Espero puedas decirme :C o me la envías por correo chocorettoo@gmail.com <3
    Muchas gracias desde ya u u ♥

    ResponderEliminar
    Respuestas
    1. Hola :3 , La song4 que tengo se llama :本兮-love flower
      Aqui te digo los nombres de las canciones que tengo en el blog,pero ya cambie las dos primeras :3
      http://lunany-kawaii.blogspot.com/2013/07/nombres-de-las-musicas-del-blog.html

      Eliminar
  3. sugoiii kakoiii *oo* muchas gracias !!!
    se ve tan lindo y profesional gracias en serio
    muchos saludos !!
    sayonara

    ResponderEliminar
  4. ¡Alégrate! Que una nueva semana comienza en unas horas y es momento de dejar atrás la pereza. Viva cada día al máximo y has que todos los días haya fiesta. ¡Ten un lindo lunes!

    El equipo de acompáñame

    ResponderEliminar
  5. Wow es muy lindo -w- Podrías decirme el nombre de la primera canción de tu reproductor? Por q la segunda es Hello! How Are You? ¿verdad? >3< Kisses

    ResponderEliminar
    Respuestas
    1. la primera song se llama :Hanazawa Kana - Sweets parade
      *m*

      Eliminar
  6. Que lindo!!!, sabes tenia esa duda de como lo hacias!!, muchas gracias!! :3 por ahora estoy pensando en un nuevo diseño! <3

    ResponderEliminar
    Respuestas
    1. Si, la mayoria me pidieron este efecto :3 , aora si lo tienen *m*

      Eliminar
  7. Estuve buscando esto hace siglos ;O; millones y millones de gracias ♥

    ResponderEliminar
  8. Linda podrias hacerne el favor de decirme como cambiar el boton cerrar xfavor no veo el codigo de antemano gracias y a la orden <3

    ResponderEliminar
    Respuestas
    1. U.U lo siento ,ese problema tengo , es un script y quería sacarlo afuera pero no me deja T.T , tengo problemas con esto ,pero lo voy a intentar areglar ahorita ,te aviso >.o

      Eliminar
  9. Gracias x el tutorial y tu apoyo linda compañera fue un placer conocerte kisses

    ResponderEliminar
  10. ¡Hola! Genial tutorial, me sirvió perfecto :3 Aunque te iba a preguntar, ¿Cómo podría arreglarlo para que en lugar de salir haciendo click en una foto lo hiciese al hacer click en un link? Quiero poner los créditos con este efecto en los links de mi menú y que salga la caja flotante al clickear en el link, sin foto...¿Sabrías cómo puedo hacerlo? ¡Gracias de ante mano!

    ResponderEliminar
    Respuestas
    1. Bueno creo que entendi bien ,en vez de hacer clic en una imagen ,quieres que salga asiendo clic en texto no?
      Te respondi al final de la entrada ,pues aqui no me deja en los comentarios poner codigos :3

      Eliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥