Imprimir...
Compartir
A+
A-
Ventana emergente

Ventana emergente en el pie de página (derecha), con opción de cerrar, configurable para que aparezca y desaparezca con efecto desvanecimiento al llegar a una altura que hemos configurado anteriormente. También he añadido para que, con menos de 995px.(Responsive Web Design) no salga la ventana.

Comencemos:

Entra en la plantilla, busca ]]></b:skin> (Control+F), y arriba de ello copia y pega estos estilos (CSS):

#v_emergente {
position: fixed;
font: 14px Arial; /* Tamaño del texto de los artículos*/
display: none;
padding: 3px 52px 18px 5px;
text-align: left;
z-index: 999;
text-shadow: 0 1px 1px #eee;
border: #9dceff solid 1px; /* Color del contorno de la ventana*/
max-width: 300px; /* Ancho máximo de la ventana */
background: #fafafa; /* Color del fondo de la ventana */
bottom: 0;
right: 0;
}
#v_emergente :hover {
color: #333 !important; /* Color del texto al pasar el mouse sobre el */
}
#separador_reco {
margin-top: -10px;
margin-bottom: -12px;
}
#cerrar_estilo {
position: fixed;
border: #e6e6e6 solid 1px; /* Color del contorno del botón de cerrar */
padding: 0 2px 0 2px;
border-radius: 3px;
display: none;
font: 12px Arial; /* Tamaño del texto del botón de cerrar */
right: 5px;
bottom: 5px;
cursor: pointer;
z-index: 9999;
}
#cerrar_estilo:hover {
color: #333 !important; /* Color del texto de el botón de cerrar al pasar el mouse sobre el */
border: #333 solid 1px; /* Color del contorno del botón de cerrar al pasar el mouse sobre el */
}
@media screen and (max-width:995px) {
#v_emergente, #cerrar_estilo {
display: none !important;
}
}

Ahora busca </head>, encima de ello copia y pega este script:

<script type='text/javaScript'>
//<![CDATA[
(function(a){a(window).scroll(function(){if(a(this).scrollTop()>500){a("#v_emergente, #cerrar_estilo").removeAttr("href");a("#v_emergente, #cerrar_estilo").fadeIn(1500)}else{a("#v_emergente, #cerrar_estilo").fadeOut(1500)}});a(function(){a("#v_emergente, #cerrar_estilo")})})(jQuery);
//]]>
</script>

Y por último encima de: </body>, copia y pega estos últimos scripts:

<div id='cerrar'>
<div id='recomendado'>
<span style='color: #333; font: bold 15px Times; text-shadow: 0 1px 1px #ccc;'>Recomendados para ti:</span>
<div id='separador_reco'><img alt='tis' src='//lh3.googleusercontent.com/-2fYnepCTHis/VFpp_4p9bhI/AAAAAAAAHC0/ZP6txJsbD6E/s320/separador.jpg'/></div>
<script type='text/javaScript'>
//<![CDATA[
var numposts=2;
var current=[];var total_posts=0;var current=new Array(numposts);function totalposts(json){total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<numposts;i++){var found=false;var rndValue=random();for(var j=0;j<current.length;j++){if(current[j]==rndValue){found=true;break}};if(found){i--}else{current[i]=rndValue}}};function random(){var ranNum=1+Math.round(Math.random()*(total_posts-1));return ranNum};
//]]></script>
<!-- http://www.teinteresasaber.com -->
<script type='text/javaScript'>
//<![CDATA[
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;if('content'in entry){var snippet=entry.content.$t}else{if('summary'in entry){var snippet=entry.summary.$t}};snippet.replace(/<[^>]*>/g,"");{snippet}for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var posturl=entry.link[j].href;if(y!=-1){posturl=posturl+'?m=0'}var postdate=entry.published.$t;if('media$thumbnail'in entry){var thumb=entry.media$thumbnail.url}}};document.write('');document.write('<br><a href="'+posturl+'"rel="nofollow">• '+posttitle+'</a><br>');document.write('<div style="clear:both"></div>')}};getvalue();for(var i=0;i<numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+current[i]+'&max-results=1&callback=random_posts\"><\/script>')};eval(function(p,a,c,k,e,r){e=String;if(!''.replace(/^/,String)){while(c--)r[c]=k[c]||c;k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 0(){1=3.4("0");1.5.6="7"}(0);',8,8,'cerrar|div|function|document|getElementById|style|display|none'.split('|'),0,{}))
//]]></script></div><a href='javascript:cerrar()'><div id='cerrar_estilo'>Cerrar</div></a></div>

Si quieres modificar a tu gusto y cambiar los colores puedes hacerlo modificando los códigos marcados en azul (tabla de colores).


Fuente: Pedro PC

0 comentarios TiS 0 Facebook

Puedes leer las normas sobre los comentarios en nuestra política de privacidad.

Tu comentario...


 
2013 - 2017 Te interesa saber



Pedro Luis Cenzano Diez & Yolanda Torres Cerezo
(Administradores)

Jesús Mª Busto Riaño
(Asesor)


Política de privacidad





TiS, con tecnología Responsive Web Design y Blogger