martes, 19 de febrero de 2013

CustomPopup v1.0 con efecto desplazable en JQuery para blogger

Damian 2/19/2013

Varias veces eh visitado webs con contenido de popup emergentes que muchos de ellos son con publicidad y siempre tienen un mismo sentido lo cual se vuelve aburrida la pagina, si se desea colocar en un sitio web cualquier tipo de anuncio o contenido que llame un poco mas laatenciónlo ideal son esta clase de popup que les presento uno simple y sencillo a la hora de añadirlos a cualquier sitio web.puedes ver un ejemploAQUI

Instalaciónpara Blogger.
Paso 1)
dirigase a laopciónPlantilla-clic en Edicion HTML- y realice la siguientecombinaciónde teclas CTRL-F y coloque en el buscador la etiqueta/head , una vez ya encontrada la etiqueta pegue el siguiente codigo arriba o antes de la/head.

script type="text/javascript"
 //![CDATA[
  function openPopup() {
   $('#overlay').fadeIn('fast', function() {
    $('#custompopup').css('display','block');
    $('#custompopup').animate({'left':'30%'},500);
   });
  }
  function closePopup(elemento) {
   $(function($) {
    $(document).ready(function() {
     $('#' + elemento).css('position','absolute');
     $('#' + elemento).animate({'left':'-100%'}, 500, function() {
      $('#' + elemento).css('position','fixed');
      $('#' + elemento).css('left','100%');
      $('#overlay').fadeOut('fast');
     });
    });
   });
  }
 //
    /script


Tenga en cuenta que deberá de tener instalado la librería JQuery si no no le funcionara.
Paso 2)
ahora realice lacombinaciónde teclas CTRL-F y busque elcódigo/b:skin , una vez encontrado arriba de este pegue el siguientecódigocss.

#wrapper{
 color:#000000;
 font-family:tahoma;
 font-size:14px;
 text-align:center;
 margin:0 auto;
 margin-top:50px;
}

#wrapper a{
 cursor:pointer;
 font-size:15px;
 font-weight:bold;
 text-decoration:underline;
}

.popup {
   width: 480px;
   height: 265px;
   left: 100%;
   padding:20px;
   position: fixed;
   right: 30%;
   top: 25%;
   z-index: 101;
   /*fondo*/
   background-color: rgba(25,119, 235, 0.8);
   background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
   background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
   background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
   background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
   background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
   -moz-border-radius: 4px;
   border-radius: 4px; 
  -moz-border-radius:0 0 120px 120px / 0 0 12px 12px; 
  border-radius:0 0 120px 120px / 0 0 12px 12px;
  -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 5px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
  -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 5px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
  -o-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 5px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
   box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 5px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
}
.popup p{
   font: italic 22px Georgia;
   color: #000000;
   text-align:center;
   margin-top:-12px;
   margin-left: auto;
   margin-right: auto;
   text-shadow: 0px 3px 3px rgba(255,255,255,0.5),0px -1px 1px rgba(0,0,0,.3);
}
.popup img {
 margin-top:-33px;
}
a.popupclose {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO92TmF49ygT2Vc1ExIJ9GpX4hAHe1Am0Spqs1_Z-qipiso0Lc-x0orCtbCE1gzhpr9K6pwvFSfcPIHuqmbtMQehJoNuaUAodGzO0iO7AUNQcbjDcIstt8qAxWm9x5cloKNu4YWv1PZTA/s64/cancel.png") repeat scroll left top transparent;
    cursor: pointer;
    float: right;
    left:42px;
    position: relative;
    top: -52px;
    width:64px;
 height:64px;
}


elcódigocss puede ser modificado a su gusto. ahora realice la mismacombinaciónde teclas(CTRL-F) para buscar la etiquetabody , una vez que la aya encontradoreemplace lapor la siguiente linea decódigo.

body onload="openPopup();"

esto sirve para llamar a ala función openPopup() y asu vez llamar al Popup en si al cargar el blog.

Paso 3)
ya hecho los pasos 1 y 2 Guarde y dirigase a Diseño-Añadir un Gadget y escoja la opcion HTML/Javascript y pegue el siguiente codigo.

div id="wrapper"
div id="overlay" class="overlay"
/div
div id="custompopup" class="popup"
 a onclick="closePopup('custompopup');" class="popupclose"/a
 div id="content"
    pUnete a I.R.P-legion Grupo de FACEBOOK/p
 !--INICIO FACEBOOK--
     a href="https://www.facebook.com/groups/336719756408806/"
     img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZxEVerLZBZS_Ej9OFzbh-aK6Yow1YqUfIhajBmE-FoKnXStuUSNFDuV17zA82QNAy15VquW-PRk9WV2M8cjzjreOkFaWOt9T3-r3ab-mghWL_bYGb-LcZ54NZZRd2ZDuMPtUwJOj7qY/s500/IRP_PNG.png" /
     a/
    !--FIN--
 /div
/div
/div

Dentro del contenedordiv id="content" podrácolocarcualquiercontenido que usted deses mostrar.
ahora si llegase a tener la necesidad de mostrar otra vez el popup por medio de un vinculo loúnicoque tiene que hacer es lo siguiente.

a onclick="openPopup();"MOSTRAR POPUP/a


,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)