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  

 

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