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 ejemplo
AQUI 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"/divdiv 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