Cuando publiqué la entrada sobre crear un intro para el blog, una de las primeras inquietudes que se tenían era cómo hacer para que el Intro sólo se mostrara una vez pues podría resultar molesto regresar al inicio y ver siempre la pantalla de bienvenida.
En esta entrada vamos a ver cómo crear un intro para el blog con jQuery, el cual hará que cuando éste desaparezca tenga un efecto de desvanecimiento.
Podrá elegirse si se muestra siempre o cada ciertos días, ya que usa cookies, y tiene un temporizador, el cual permite que si en determinado tiempo el lector no hizo click en el botón de Entrar entonces el Intro podrá quitarse automáticamente.
El script es una creación de Meerkat y la instalación no es nada complicada.
Puedes ver un demo en este blog de pruebas, si no haces click en el botón entonces el Intro se quitará por sí solo en 15 segundos.
Para poner este Intro en tu blog, entra en la Edición HTML de la plantilla, y pega después de <head> el siguiente script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// Intro para el blog
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[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}('4.1Y.1k({8:5(1E){9 1r={v:\'g\',E:m,k:\'1n\',y:\'w%\',h:\'1u\',U:\'.U\',13:\'#1P-u\',1s:T,18:\'g\',R:m,P:\'Z\',x:\'Z\',K:\'1J\',Q:0,1a:\'.1a\',f:0,1I:5(){},l:m};9 3=4.1k(1r,1E);7(4.1U.1S){3.P=3.P;3.x=3.x}p{3.P=\'Z\';3.x=\'Z\'}7(3.R===m){3.R=3.18}3.f=3.f*1c;7(3.l!=m){3.l=3.l*1c}5 I(F,1D,1d){7(1d){9 12=1M 1N();12.1O(12.1Q()+(1d*24*1w*1w*1c));9 10="; 10="+12.1L()}p{9 10=""}q.1m=F+"="+1D+10+"; 1R=/"}5 1v(F){9 19=F+"=";9 1b=q.1m.1K(\';\');1X(9 i=0;i<1b.S;i++){9 c=1b[i];1W(c.1V(0)===\' \')c=c.1q(1,c.S);7(c.1T(19)===0)t c.1q(19.S,c.S)}t m}5 1o(F){I(F,"",-1)}4(3.1a).D(5(){1o(\'8\')});t e.23(5(){9 16=4(e);7(1v(\'8\')!="X"){3.1I.2l(e);5 O(11,H){9 j=4(\'#8-d\');7(H==="B"){7(3.h==="1e"||3.h==="1f"){9 14=\'y\'}p{9 14=\'k\'}}p{9 14="E"}9 A={};A[14]=11;7(11==="u"){7(H!=="g"){7(3.f>0){4(j).a().f(3.f).W(A,3.K,3.P)}p{4(j).a().W(A,3.K,3.P)}}p 7((H==="g")&&(3.f>0)){4(j).a().f(3.f).u(0)}p{4(j).u()}4(16).u(0)}7(11==="a"){7(H!=="g"){7(3.l!==m){4(j).f(3.l).W(A,3.K,3.x,5(){4(e).o();7(3.1s===2k){I(\'8\',\'X\',3.Q)}})}4(3.U).D(5(){4(j).1t().W(A,3.K,3.x,5(){4(e).o()});t T});4(3.13).D(5(){4(j).1t().W(A,3.K,3.x,5(){4(e).o()});I(\'8\',\'X\',3.Q);t T})}p 7((H==="g")&&(3.l!==m)){4(j).f(3.l).a(0).N(5(){4(e).o()})}p{4(3.U).D(5(){4(j).a().N(5(){4(e).o()});t T});4(3.13).D(5(){4(j).a().N(5(){4(e).o()});I(\'8\',\'X\',3.Q);t T})}}}4(\'1y, n\').b({\'2h\':\'0\',\'k\':\'w%\'});4(16).d(\'<s 15="8-d"><s 15="8-r"></s></s>\');4(\'#8-d\').b({\'h\':\'2i\',\'z-17\':\'2n\',\'y\':3.y,\'k\':3.k}).b(3.h,"0");4(\'#8-r\').b({\'v\':3.v,\'k\':3.k});7(3.h==="1e"||3.h==="1f"){4(\'#8-d\').b("1i",0)}7(3.E!=m){4("#8-d").2o(\'<s 2s="E-1j"></s>\');4(\'#8-r\').b({\'v\':\'2q\',\'z-17\':\'2\',\'h\':\'2t\'});4(".E-1j").b({\'h\':\'1g\',\'1i\':\'0\',\'k\':\'w%\',\'y\':\'w%\',\'v\':3.v,"E":3.E})}7(4.1l.2g&&4.1l.2f<=6){4(\'#8-d\').b({\'h\':\'1g\',\'1u\':\'-26\',\'z-17\':\'0\'});7(4(\'#V-Y-r\').S==0){4(\'n\').22().20(5(17){t 4(e).1Z(\'15\')!=\'8-d\'}).21(\'<s 15="V-Y-r"></s>\');4(\'1y, n\').b({\'k\':\'w%\',\'y\':\'w%\',\'1z\':\'28\'});4(\'#V-Y-r\').b({\'1z\':\'1n\',\'y\':\'w%\',\'k\':\'w%\',\'h\':\'1g\'});9 C=q.n.G.2d+" ";C+=q.n.G.2e+" ";C+=q.n.G.2c+" ";C+=q.n.G.2b+" ";C+=q.n.G.29+" ";C+=q.n.G.2a;4("n").b({\'v\':\'g\'});4("#V-Y-r").b({\'v\':C})}9 1h=q.2r(\'V-Y-r\');7((1h.27<1h.25)&&(3.h!=\'1e\')){4(\'#8-d\').b({\'1f\':\'2p\'})}}1H(3.18){M"B":O("u","B");J;M"L":O("u","L");J;M"g":O("u","g");J;1x:1B(\'1C 18 1p 1A 1G "B", "L", 1F "g"\')}1H(3.R){M"B":O("a","B");J;M"L":O("a","L");J;M"g":7(3.l!=m){4(\'#8-d\').f(3.l).a(0).N(5(){4(e).o()})}4(3.U).D(5(){4(\'#8-d\').a().N(5(){4(e).o()})});4(3.13).D(5(){4(\'#8-d\').a().N(5(){4(e).o()});I(\'8\',\'X\',3.Q)});J;1x:1B(\'1C R 1p 1A 1G "B", "L", 1F "g"\')}}p{4(16).a()}})},o:5(){4(\'#8-d\').2j(4(\'#8-r\').2m().a())}});',62,154,'|||settings|jQuery|function||if|meerkat|var|hide|css||wrap|this|delay|none|position||meerkatWrap|height|timer|null|body|destroyMeerkat|else|document|container|div|return|show|background|100|easingOut|width||animationProperty|slide|bgProperties|click|opacity|name|currentStyle|fadeOrSlide|createCookie|break|animationSpeed|fade|case|queue|animateMeerkat|easingIn|cookieExpires|animationOut|length|false|close|ie6|animate|dontshow|content|swing|expires|showOrHide|date|dontShowAgain|animationType|id|element|index|animationIn|nameEQ|removeCookie|ca|1000|days|left|right|absolute|ie6ContentContainer|top|layer|extend|browser|cookie|auto|eraseCookie|option|substring|defaults|dontShowAgainAuto|stop|bottom|readCookie|60|default|html|overflow|only|alert|The|value|options|or|accepts|switch|onMeerkatShow|normal|split|toGMTString|new|Date|setTime|dont|getTime|path|def|indexOf|easing|charAt|while|for|fn|attr|filter|wrapAll|children|each||scrollHeight|1px|clientHeight|hidden|backgroundPositionX|backgroundPositionY|backgroundAttachment|backgroundRepeat|backgroundColor|backgroundImage|version|msie|margin|fixed|replaceWith|true|call|contents|10000|prepend|17px|transparent|getElementById|class|relative'.split('|'),0,{})) //]]>
</script>
<script type='text/javascript'>
//<![CDATA[
jQuery.noConflict();
jQuery(function(){
jQuery('.meerkat').meerkat({
height: '100%',
width: '100%',
position: 'left',
dontShowAgain: '#enter',
close: '#close',
animationIn: 'none',
animationOut: 'fade',
animationSpeed: 500,
background: '#000 ',
timer: 15,
dontShowAgainAuto: false,
cookieExpires: 2,
removeCookie: '.reset'
});
});
//]]>
</script>
Luego antes de </body> pega este código:
<center>
<div class='meerkat'>
<div id='splash-content'>
<!-- Inicio del contenido que se mostrará en el intro -->
<img id='enter' src='URL de la imagen de bienvenida'/>
<!-- Fin del contenido que se mostrará en el intro -->
</div>
<div id='close'> Entrar </div>
</div>
</center>
Este último código es el Intro en sí, ahí es donde podremos agregar una imagen de bienvenida, algún texto, etc. Todo lo que quieras que se vea en el intro deberá ir en el área marcada en color rojo.
Si quieres que en lugar de un texto el botón de entrar sea una imagen sólo cambia ese texto (el de Entrar) por el código de una imagen:
<img src="URL de la imagen" />
Por último agrega antes de ]]></b:skin> estos estilos:
#enter{margin-top:150px;} /* Distancia de los elementos del Intro desde arriba */Esos son estilos muy básicos, pero pueden agregarse muchos más, ya dependerá de qué tipo de diseño quieras para tu pantalla de presentación.
#close{
cursor:pointer;
font-size:17px; /* Tamaño del texto ENTRAR */
color:#FFF; /* Color del texto ENTRAR */
}
En el primer código que hemos añadido veremos estos comandos:
background: '#000 ',background es el color de fondo del Intro, es decir, de toda la pantalla, y también puedes añadir una imagen de fondo, si así fuera quedaría así:
timer: 15,
dontShowAgainAuto: false,
cookieExpires: 2,
background: '#000 url(URL de la imagen)',
timer es el tiempo en segundos que durará el intro en caso de que el usuario no dé click para entrar.
dontShowAgainAuto indica si el intro se mostrará siempre o no, false indica que siempre se mostrará, cámbialo a true si quieres sólo se muestre una vez cada cierto tiempo.
cookieExpires indican los días que tardará el intro en volver a mostrarse en caso de que lo hayas cambiado por true.
Como puedes ver el script tiene muchas opciones y me parece que es mucho más completo y atractivo que el que habíamos visto primeramente.
El intro se mostrará en cualquier página del blog, pero si quisieras que sólo se muestre en la portada entonces deberás encerrar el código que va antes de </body> en una condicional para que sólo se muestre en la portada del blog.
Consideraciones finales:
- El script ya está modificado para que sea compatible con Scriptaculous.
- Si activas la opción de que no se vea en cierto tiempo entonces tampoco tú lo verás hasta que haya transcurrido el tiempo que configuraste. Para verlo antes de ese tiempo deberás borrar las cookies de tu navegador.
- No se recomienda poner videos o música en el Intro, pues éstos se ejecutarían aun después de quitarse el Intro.
- Si tuvieras en el blog un video o un archivo en flash deberás aplicarle una transparencia para que no se sobreponga en el Intro.
- Si ya usas jQuery asegúrate de tener sólo la última versión y eliminar las versiones repetidas o antiguas.
- Recuerda que se verá en todas las páginas del blog, así que si quieres que sea visible sólo en la portada deberás encerrar el código en una condicional como se ha señalado.
No hay comentarios:
Publicar un comentario