Otra pantalla de presentación fácil – Shipping ~ CosasParaMiBlogs

Siempre, o casi siempre, hay diversas maneras de conseguir hacer lo que queremos, siguiendo distintos caminos. Unos comentarios cruzados con Cocodrolo, me dieron la idea de una nueva chapucilla para simular una pantalla de presentación como la que habeis visto al entrar al blog o al hacerlo en esta misma entrada (depende de la fecha en la que leais esto).

Antes vimos otros sistemas enBlog con pantalla de presentación yPortada en página Inicio. Esta sería la versíónlight y se consigue combinando pequeños trucos ya vistos.

Este enlace es por si no han pasado todavía96 192 horas (lo que hemos programado aquí) desde la primera vez que viste esto, pero quieresvolver a hacer visible la entradilla.

Básicamente, vamos a usar el código deMostrar un DIV sólo una vez al día, pero haciendo elDIV del tamaño completo de la ventana del visitante y quitando la -ahora- innecesaria capa semitransparente. Me ahorraré la explicación que ya figura en el anterior enlace.

Antes del/head, insertamos...

style type='text/css'
.visible {display:block;}
.invisible {display:none;}
/style
script type='text/javascript'
function plegardesplegar(identificacion){
var menu = document.getElementById(identificacion);
if(menu.className == 'visible'){
menu.className = 'invisible';
}else{
menu.className = 'visible';
}
}
/script

...y trasbody, esto otro...

div class='visible' id='id_bloque' style='z-index:100;position:fixed; overflow:visible; width:100%; height:100%;color:#000000; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9wOcqRn9SMuSZ6g7SR6AT8dJVZkDNhGwiCX9EYv-kRVK-SuNvjuhUHO5JWM6k5lbEIPgmCUnm3f0J_lX-9HkGhIDIpgdUNtHQgWekBRP6XORgaZqqpNmLJtrb7mmNQPHBHdkp7Kba-0k/s0/fondo.jpg) no-repeat 50% 50%#F4F8F9;padding:20px; text-align:center;'

div style='width:600px;height:400px;position:absolute;top:50%;left:50%;margin-top:-220px;margin-left:-300px;font-family:courier new;font-size:20px;line-height:20px;'
Aquí ponemos poner una imagen, enlaces, texto, un menú, un vídeo, una lista, un flash... en fin, lo que sea. Pero lo que no puede faltar es un enlace que nos lleve a alguna página o al menos, que cierre el DIV solapado por encima del contenido.
a href='javascript:plegardesplegar("id_bloque");'ENLACE PARA CERRAR EL DIV/a
a href='http://oloblogger.blogspot.com'ENLACE A UNA PAGINA/a
br/
span style='font-size:10px;'Imagen de fondo: a href='http://www.flickr.com/photos/wheatfields/'net_efekt/a/span
/div

/div

Personalizamos el contenido delDIV, el fondo y los enlaces, y con esto ya tenemos nuestra pantalla inicial, que se mostrarácada vez que se acceda a una página del blog.

Y lo marcado en negrita es el origen de un problema. Imaginaos navegando por una web en la que cada vez que cambiamos de página, nos sale la presentación de las narices. Si por las características de nuestro sitio, esto es justo lo que queremos, pues ya hemos acabado, pero si no es eso, tendremos que añadir algo más de código.

1. Supongamos que sólo lo queremos mostrar cuando se accede a la página principal y no cuando se hace a través de otras páginas. En ese caso, el segundo trozo de código habrá que meterlo dentro de uncondicional, que para Blogger sería:

b:if cond='data:blog.homepageUrl == data:blog.url'
CODIGO QUE FORMA LOS DIV's
/b:if

2. Sin embargo, puede que lo que queramos es que salga esa entradilla independientemente del tipo de página desde la que el visitante empieza a visitar el blog, pero sin ser tan cansinos. En ese caso, sólo se me ocurre volver a lascookies.

Comoya se explicó en una entrada anterior, para esto tendríamos que montar las funciones paragrabar y leer cookies y a continuación, añadir detrás del código que forma losDIV's una comprobación sobre si es la primera vez que se visita el blog en cierto intervalo de tiempo.

script type='text/javascript'
var comprobar = getCookie("primeravez");
if (comprobar != null) {}
else {
var expiration = new Date();
expiration.setTime(expiration.getTime() +86400000);
setCookie("primeravez","1",expiration);
plegardesplegar("id_bloque");
}
/script

Elnúmero en verde marca el tiempo hasta el cual no se volverá a mostrar la "presentación". En el ejemplo, 24 horas en milisegundos.

Si se aplica esto de las cookies, hay que hacer un cambio más en el ejemplo que hemos puesto. ElDIV cuyaID hemos marcado en azul conVISIBLE, debería cambiarse aINVISIBLE.

En Blogger, también podeis poner todo este código (primer script, creación de capas y script de cookies en su caso) dentro de un gadgetHTML/JavaScript, con lo que se podría eliminar muy fácilmente el día que decidamos cambiar el sistema. Si lo hacemos así, tendríamos que colocarlo lo más arriba posible. Encima delHEADER si es posible. De lo contrario, se cargarían otras cosas primero y luego saldría la presentación, lo cual quedaría un poco raro.

Aunque se haga de esta última manera, en mi opinión, al menos las funciones de las cookies sí se deberían dejar en la plantilla. De esta manera las tendremos siempre disponibles para cualquier uso futuro.

Este es un ejemplo de cómo simular una portada para un blog, sin alterar la estructura principal de la plantilla y sin necesidad de cambiar la apariencia de nuestra página Inicio.

Ir a contenidoIr a Home

CosasParaMiBlogs

miércoles, 17 de febrero de 2010

Otra pantalla de presentación fácil – Shipping

Popular Posts

Blogger news

Labels

Blog Archive