"Crear un intro para el blog con jQuery y cookies"Cuando publique la entrada sobre crear un intro para el blog, una de las primeras inquietudes que se tenian era como hacer para que el Intro solo se mostrara una vez pues podria resultar molesto regresar al inicio y ver siempre la pantalla de bienvenida.En esta entrada vamos a ver como crear un intro para el blog con jQuery, el cual hara que cuando este desaparezca tenga un efecto de desvanecimiento.Podra elegirse si se muestra siempre o cada ciertos dias, ya que usa cookies, y tiene un temporizador, el cual permite que si en determinado tiempo el lector no hizo click en el boton de Entrar entonces el Intro podra quitarse automaticamente.El script es una creacion de Meerkat y la instalacion no es nada complicada.Puedes ver un demo en este blog de pruebas, si no haces click en el boton entonces el Intro se quitara por si solo en 15 segundos.Para poner este Intro en tu blog, entra en la Edicion HTML de la plantilla, y pega despues 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 blogeval(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">

\');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">
\');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">
\');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 codigo:<div class='meerkat'><div id='splash-content'><!-- Inicio del contenido que se mostrara en el intro --><img id='enter' src='URL de la imagen de bienvenida'/><!-- Fin del contenido que se mostrara en el intro --></div><div id='close'> Entrar </div></div>Este ultimo codigo es el Intro en si, ahi es donde podremos agregar una imagen de bienvenida, algun texto, etc. Todo lo que quieras que se vea en el intro debera ir en el area marcada en color rojo.Si quieres que en lugar de un texto el boton de entrar sea una imagen solo cambia ese texto (el de Entrar) por el codigo de una imagen:<img src="URL de la imagen" />Por ultimo agrega antes de ]]></b:skin> estos estilos:#enter{margin-top:150px;} /* Distancia de los elementos del Intro desde arriba */#close{cursor:pointer;font-size:17px; /* Tamano del texto ENTRAR */color:#FFF; /* Color del texto ENTRAR */}Esos son estilos muy basicos, pero pueden agregarse muchos mas, ya dependera de que tipo de diseno quieras para tu pantalla de presentacion.En el primer codigo que hemos anadido veremos estos comandos:background: '#000 ',timer: 15,dontShowAgainAuto: false,cookieExpires: 2,background es el color de fondo del Intro, es decir, de toda la pantalla, y tambien puedes anadir una imagen de fondo, si asi fuera quedaria asi:background: '#000 url(URL de la imagen)',timer es el tiempo en segundos que durara el intro en caso de que el usuario no de click para entrar.dontShowAgainAuto indica si el intro se mostrara siempre o no, false indica que siempre se mostrara, cambialo a true si