Ventanas emergentes (pop-up) en tu blog

Hola a todos mis queridos angelitos hoy les traigo un pequeño tutorial de como colocar ventanas emergentes en tu blog aquí la vista previa (ver en el sidebar)

Paso 1

Para tenerlo en su blog deben ir a plantilla/ edición HTLM y pegar arriba de ]]></b:skin> el siguiente código:

#fade {
display: none;
background: #000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .20;
z-index: 9999;
}
.popup_block{
display: none;
background: #fff url(url de tu fondo)repeat;
padding: 20px;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
border: 2px solid #fafafa;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
img.btn_close {
float: right;
margin: -28px -28px 0 0;
background: transparent;
border: none;
}
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}

Paso 2:

Ahora debes editar lo que esta resaltado, abajo explico que cambia que:

top: 50%;  entre mayor sea el porcentaje la ventara aparecerá mas abajo
left: 50%; entre mayor sea porcentaje  la ventara aparecerá más a la derecha.

Si no modificas esos valores la ventana aparecerá en el centro de tu pantalla

background: #fff url(url de tu fondo)repeat;  este código es para modificar el fondo de la ventana emergente, solo remplaza con la url de tu imagen o el color que deseas que tenga el fondo.

-webkit-border-radius: 14px; -moz-border-radius: 14px;border-radius: 14px;

este código es para redondear los bordes de la ventana emergente, entre mayor sea el número mas redondeada será.

Paso 3

Una vez que lo editas a gusto ve a diseño y en un gadget coloca lo siguiente:

<a href="#?w=500" rel="ventana1" class="poplight"><img border="0" src="url de tu gif" /></a><br/>

<div id="ventana1" class="popup_block">

<center><img border="0" src="urldetu imagen" />
Contenido de tu ventana!
</center>
</div>


<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    //Code goes here
});
//When you click on a link with class of poplight and the href starts with a # 
$('a.poplight[href^=#]').click(function() {
    var popID = $(this).attr('rel'); //Get Popup Name
    var popURL = $(this).attr('href'); //Get Popup href to define size
    //Pull Query & Variables from href URL
    var query= popURL.split('?');
    var dim= query[1].split('&');
    var popWidth = dim[0].split('=')[1]; //Gets the first query string value
    //Fade in the Popup and add close button
    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://media.tumblr.com/tumblr_m441nk6nGt1qb1380.gif" class="btn_close" title="Cerrar ventana" alt="Close" /></a>');
    //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
    var popMargTop = ($('#' + popID).height() + 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;
    //Apply Margin to Popup
    $('#' + popID).css({
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });
    //Fade in Background
    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 
    return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
    $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  //fade them both out
    });
    return false;
});
</script>

Lo que está en purpura es lo que se verá en el gadget, lo que al hacerle clip te abrirá la ventana emergente, puedes poner una imagen o un texto con un link.

Si quieres poner un link en lugar de una imagen remplaza todo lo que está en purpura con este código:

<center><a href="#?w=500" rel="ventana1" class="poplight"> Tu Texto aquí </a></center>

Lo que está en rojo es lo que aparecerá en la ventana emergente, remplaza solamente donde dice Aquí va el contenido de tu ventana puedes colocar lo que quieras (imágenes, texto un cbox, etc.).

Lo que está en azul no debes borrarlo nunca o no funcionará.

¿Como agregar más ventanas?

Pega en cualquier parte de tu blog los códigos purpurá y rojo, no hace falta que los pongas en el mismo gadget mientras no borres el gadget donde se encuentre lo de color azul (que no hace falta que lo pegues mas de una vez) podrás colocar ventanas emergentes por todo tu blog modificando y pegando lo siguiente donde quieras:

<center><a href="#?w=500" rel="ventana1" class="poplight"><img src="url de tu imagen" /></a></center>

<div id="ventana1" class="popup_block">
<center> Aquí va el contenido de tu ventana </center><br/>
</div>

Debes remplazar lo que esta en rosado por ventana2 o ventana3 etc, no importa que nombre le pongas en cuanto respete lo siguiente: cada código rojo y purpura de la misma ventana emergente deben tener el mismo nombre si no no funcionará, los nombres de los códigos purpura y rojo no deben repetirse con los de las otras ventanas emergentes que pongas en el blog.

Código creado por HoneyPixel

Espero que se entienda lo ultimo u.u cualquier duda pueden escribirme a sol.pourcel@gmail.com o dejarme un comentario.