En este
blog ya hemos hablado con anterioridad sobre la importancia del diseño para el
éxito de un blog. Hoy queremos facilitar un script que nos permitirá visualizar
una imagen como pantalla de entrada a nuestro blog.
El script ha
sido desarrollado en JQuery por Meerkat .
Tiene un funcionamiento bastante sencillo, ya que se encarga de visualizar la
imagen que deseemos durante un periodo de tiempo determinado la primera vez que
cualquier usuario acceda a nuestro blog.
Para
utilizar el script debemos seguir los siguientes pasos:
1.- Crear
una imagen para la intro de nuestro blog y alojarla en un servidor de imágenes,
tipo Picasa.
2.- Copiar
el script en dentro de la etiqueta <head> de la plantilla del blog. Algunos
parámetros del script que podemos adaptar a nuestras necesidades pueden ser:
2.1.-
Timer, indica el tiempo que permanecerá visible la imagen.
2.2.-
Background, indicaremos el color de fondo de toda la pantalla donde se muestra
la imagen de la intro.
2.3.-
dontShowAgainAuto, indica si mostraremos la imagen siempre (false) o si
deseamos que aparezca cada cierto tiempo pondremos el valor true.
2.4.-
cookieExpires, controla los días que deben transcurrir para que se vuelva a
mostrar la intro del blog.
3.-
Insertaremos el siguiente código antes de la etiqueta </body>
<div class='meerkat'>
<div id='splash-content'>
<img id='enter' src=’URL’/>
</div>
<div id='close'> Entrar al Blog </div>
</div>
Donde en el atributo src de
la etiqueta <img> indicaremos la url de la imagen que deseamos mostrar en
el intro del blog y en <div id=’close> pondremos el texto que deseamos
que aparecezca.
4.- Para
aplicar un diseño bonito al intro de la web, insertaremos el siguiente código
para definir los estilos antes de ]]></b:skin>
#enter{margin-top:150px;}
#close{
cursor:pointer;
font-size:17px;
color:#FFF;
}
Donde margin-top indica la
posición de la imagen respecto al borde superior, se expresa en pixeles,
font-size indica el tamaño y color indica en formato hexadecimal el color del
texto que hemos introducido en el <div
id='close'>
Con estos
sencillos pasos dotaremos a nuestro blog de una imagen más profesional y un
diseño más elegante.
Entradas
0 han comentado:
Publicar un comentario