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 comments:
Post a Comment