17 abril 2010

Mostrar un Slide con tus entradas Favoritas con jQuery

  22 comentarios
Lo que mas me gusta de los Scripts es el gran tipo de interacción que pueden ofrecer a los blogs, algo que con tan solo usar HTML y CSS, no es imposible hacerlo, pero tal vez un poco dificil, hoy traigo para ti, un slide, uno donde tu podras mostrar resumenes de tu entradas favoritas, quizas, tu entradas populares, o las mas comentadas, o las recientes, puedes añadirles las que quieras y cuantas quieras.

Esto es un efecto que sin duda, deberias colocar el tu blog, si quieres atraer la leccion de tus lectores, lo mas importante es que coloques entradas que consideres de mucho valor, que sea lo que realmente tu lector busca, redactar de forma que el usuario quiera mas, tal vez con una pregunta al final del parrafo que deje en incognita al lector, y quiera entrar a ver cual es la respuesta, todo depende de tu creatividad.

Antes de comenzar, puedes ver una demostracion de este efecto en este blog de pruebas. De igual manera, alli en la imagen te dejo una previsualizacion de su apariencia.



[1] Ahora, para hacer funcionar el efecto, debes añadir el proximo codigo justo antes de </head>, este codigo corresponde a el script, jQuery es el que da la interaccion, si ya tienes el script en tu blog, no es necesario seguir este paso.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

[2] Ahora, lo siguiente sera añadir algunos codigos Javascript a tu blog, yo ya los subir a mi propio servidor, puedes Descargarte el Archivo desde aqui, descomprime el Zip, luego, sube todos los 4 archivos .Js y el .CSS a tu servidor. Si no lo quieres subir, pues no importa, yo aqui pondre la direccion de los mios, es tu decision. Los siguientes codigo van justo antes de </head>

<script src='http://sites.google.com/site/archivosfrikibloggeo/slide/jQuery1-FrikiBloggeo.js' type='text/javascript'/>

<script src='http://sites.google.com/site/archivosfrikibloggeo/slide/jQuery2-FrikiBloggeo.js' type='text/javascript'/>

<script src='http://sites.google.com/site/archivosfrikibloggeo/slide/jQuery3-FrikiBloggeo.js' type='text/javascript'/>

<script src='http://sites.google.com/site/archivosfrikibloggeo/slide/jQuery4-FrikiBloggeo.js' type='text/javascript'/>

<link href='http://sites.google.com/site/archivosfrikibloggeo/slide/Estiloslidecss-FrikiBloggeo.css' rel='stylesheet' type='text/css'/>


Es importante subirlos a tu propio servidor, es por el propio bien de tu blog, si no quieres hacerlo, es tu decision

Otra opcion es, ni subirlo a tu servidor, ni usar el mio, colocarlos directamente en tu blog, aqui tu eres el que decide de que forma colocarla, pero no recomiendo esta opcion, ya que el codigo es demasiado largo, y podrias confundirte. Este codigo, como los demas, tambien va justo antes de </head>.


Mostrar el codigo

<script type='text/javascript'>
//<![CDATA[

eval(function(p,a,c,k,e,r){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--)r[e(c)]=k[c]||e(c);k=[function(e){return r[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}('(6($){$.1g.1w=6(o){o=$.1f({r:n,x:n,N:n,17:q,J:n,L:1a,16:n,y:q,u:12,H:3,B:0,k:1,K:n,I:n},o||{});8 G.R(6(){p b=q,A=o.y?"15":"w",P=o.y?"t":"s";p c=$(G),9=$("9",c),E=$("10",9),W=E.Y(),v=o.H;7(o.u){9.1h(E.D(W-v-1+1).V()).1d(E.D(0,v).V());o.B+=v}p f=$("10",9),l=f.Y(),4=o.B;c.5("1c","H");f.5({U:"T",1b:o.y?"S":"w"});9.5({19:"0",18:"0",Q:"13","1v-1s-1r":"S","z-14":"1"});c.5({U:"T",Q:"13","z-14":"2",w:"1q"});p g=o.y?t(f):s(f);p h=g*l;p j=g*v;f.5({s:f.s(),t:f.t()});9.5(P,h+"C").5(A,-(4*g));c.5(P,j+"C");7(o.r)$(o.r).O(6(){8 m(4-o.k)});7(o.x)$(o.x).O(6(){8 m(4+o.k)});7(o.N)$.R(o.N,6(i,a){$(a).O(6(){8 m(o.u?o.H+i:i)})});7(o.17&&c.11)c.11(6(e,d){8 d>0?m(4-o.k):m(4+o.k)});7(o.J)1p(6(){m(4+o.k)},o.J+o.L);6 M(){8 f.D(4).D(0,v)};6 m(a){7(!b){7(o.K)o.K.Z(G,M());7(o.u){7(a<=o.B-v-1){9.5(A,-((l-(v*2))*g)+"C");4=a==o.B-v-1?l-(v*2)-1:l-(v*2)-o.k}F 7(a>=l-v+1){9.5(A,-((v)*g)+"C");4=a==l-v+1?v+1:v+o.k}F 4=a}F{7(a<0||a>l-v)8;F 4=a}b=12;9.1o(A=="w"?{w:-(4*g)}:{15:-(4*g)},o.L,o.16,6(){7(o.I)o.I.Z(G,M());b=q});7(!o.u){$(o.r+","+o.x).1n("X");$((4-o.k<0&&o.r)||(4+o.k>l-v&&o.x)||[]).1m("X")}}8 q}})};6 5(a,b){8 1l($.5(a[0],b))||0};6 s(a){8 a[0].1k+5(a,\'1j\')+5(a,\'1i\')};6 t(a){8 a[0].1t+5(a,\'1u\')+5(a,\'1e\')}})(1x);',62,96,'||||curr|css|function|if|return|ul|||||||||||scroll|itemLength|go|null||var|false|btnPrev|width|height|circular||left|btnNext|vertical||animCss|start|px|slice|tLi|else|this|visible|afterEnd|auto|beforeStart|speed|vis|btnGo|click|sizeCss|position|each|none|hidden|overflow|clone|tl|disabled|size|call|li|mousewheel|true|relative|index|top|easing|mouseWheel|padding|margin|200|float|visibility|append|marginBottom|extend|fn|prepend|marginRight|marginLeft|offsetWidth|parseInt|addClass|removeClass|animate|setInterval|0px|type|style|offsetHeight|marginTop|list|jCarouselLite|jQuery'.split('|'),0,{}))

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

/*
* Copyright (c) 2009 Simo Kinnunen.
* Licensed under the MIT license.
*
* @version 1.02
*/
var Cufon=(function(){var m=function(){return m.replace.apply(null,arguments)};var x=m.DOM={ready:(function(){var C=false,E={loaded:1,complete:1};var B=[],D=function(){if(C){return}C=true;for(var F;F=B.shift();F()){}};if(document.addEventListener){document.addEventListener("DOMContentLoaded",D,false);window.addEventListener("pageshow",D,false)}if(!window.opera&&document.readyState){(function(){E[document.readyState]?D():setTimeout(arguments.callee,10)})()}if(document.readyState&&document.createStyleSheet){(function(){try{document.body.doScroll("left");D()}catch(F){setTimeout(arguments.callee,1)}})()}q(window,"load",D);return function(F){if(!arguments.length){D()}else{C?F():B.push(F)}}})(),root:function(){return document.documentElement||document.body}};var n=m.CSS={Size:function(C,B){this.value=parseFloat(C);this.unit=String(C).match(/[a-z%]*$/)[0]||"px";this.convert=function(D){return D/B*this.value};this.convertFrom=function(D){return D/this.value*B};this.toString=function(){return this.value+this.unit}},addClass:function(C,B){var D=C.className;C.className=D+(D&&" ")+B;return C},color:j(function(C){var B={};B.color=C.replace(/^rgba\((.*?),\s*([\d.]+)\)/,function(E,D,F){B.opacity=parseFloat(F);return"rgb("+D+")"});return B}),fontStretch:j(function(B){if(typeof B=="number"){return B}if(/%$/.test(B)){return parseFloat(B)/100}return{"ultra-condensed":0.5,"extra-condensed":0.625,condensed:0.75,"semi-condensed":0.875,"semi-expanded":1.125,expanded:1.25,"extra-expanded":1.5,"ultra-expanded":2}[B]||1}),getStyle:function(C){var B=document.defaultView;if(B&&B.getComputedStyle){return new a(B.getComputedStyle(C,null))}if(C.currentStyle){return new a(C.currentStyle)}return new a(C.style)},gradient:j(function(F){var G={id:F,type:F.match(/^-([a-z]+)-gradient\(/)[1],stops:[]},C=F.substr(F.indexOf("(")).match(/([\d.]+=)?(#[a-f0-9]+|[a-z]+\(.*?\)|[a-z]+)/ig);for(var E=0,B=C.length,D;E<B;++E){D=C[E].split("=",2).reverse();G.stops.push([D[1]||E/(B-1),D[0]])}return G}),hasClass:function(C,B){return RegExp("(?:^|\\s)"+B+"(?=\\s|$)").test(C.className)},quotedList:j(function(E){var D=[],C=/\s*((["'])([\s\S]*?[^\\])\2|[^,]+)\s*/g,B;while(B=C.exec(E)){D.push(B[3]||B[1])}return D}),recognizesMedia:j(function(G){var E=document.createElement("style"),D,C,B;E.type="text/css";E.media=G;try{E.appendChild(document.createTextNode("/**/"))}catch(F){}C=g("head")[0];C.insertBefore(E,C.firstChild);D=(E.sheet||E.styleSheet);B=D&&!D.disabled;C.removeChild(E);return B}),removeClass:function(D,C){var B=RegExp("(?:^|\\s+)"+C+"(?=\\s|$)","g");D.className=D.className.replace(B,"");return D},supports:function(D,C){var B=document.createElement("span").style;if(B[D]===undefined){return false}B[D]=C;return B[D]===C},textAlign:function(E,D,B,C){if(D.get("textAlign")=="right"){if(B>0){E=" "+E}}else{if(B<C-1){E+=" "}}return E},textDecoration:function(G,F){if(!F){F=this.getStyle(G)}var C={underline:null,overline:null,"line-through":null};for(var B=G;B.parentNode&&B.parentNode.nodeType==1;){var E=true;for(var D in C){if(!k(C,D)||C[D]){continue}if(F.get("textDecoration").indexOf(D)!=-1){C[D]=F.get("color")}E=false}if(E){break}F=this.getStyle(B=B.parentNode)}return C},textShadow:j(function(F){if(F=="none"){return null}var E=[],G={},B,C=0;var D=/(#[a-f0-9]+|[a-z]+\(.*?\)|[a-z]+)|(-?[\d.]+[a-z%]*)|,/ig;while(B=D.exec(F)){if(B[0]==","){E.push(G);G={};C=0}else{if(B[1]){G.color=B[1]}else{G[["offX","offY","blur"][C++]]=B[2]}}}E.push(G);return E}),textTransform:(function(){var B={uppercase:function(C){return C.toUpperCase()},lowercase:function(C){return C.toLowerCase()},capitalize:function(C){return C.replace(/\b./g,function(D){return D.toUpperCase()})}};return function(E,D){var C=B[D.get("textTransform")];return C?C(E):E}})(),whiteSpace:(function(){var B={inline:1,"inline-block":1,"run-in":1};return function(E,C,D){if(B[C.get("display")]){return E}if(!D.previousSibling){E=E.replace(/^\s+/,"")}if(!D.nextSibling){E=E.replace(/\s+$/,"")}return E}})()};n.ready=(function(){var B=!n.recognizesMedia("all"),E=false;var D=[],H=function(){B=true;for(var K;K=D.shift();K()){}};var I=g("link"),J=g("style");function C(K){return K.disabled||G(K.sheet,K.media||"screen")}function G(M,P){if(!n.recognizesMedia(P||"all")){return true}if(!M||M.disabled){return false}try{var Q=M.cssRules,O;if(Q){search:for(var L=0,K=Q.length;O=Q[L],L<K;++L){switch(O.type){case 2:break;case 3:if(!G(O.styleSheet,O.media.mediaText)){return false}break;default:break search}}}}catch(N){}return true}function F(){if(document.createStyleSheet){return true}var L,K;for(K=0;L=I[K];++K){if(L.rel.toLowerCase()=="stylesheet"&&!C(L)){return false}}for(K=0;L=J[K];++K){if(!C(L)){return false}}return true}x.ready(function(){if(!E){E=n.getStyle(document.body).isUsable()}if(B||(E&&F())){H()}else{setTimeout(arguments.callee,10)}});return function(K){if(B){K()}else{D.push(K)}}})();function s(C){var B=this.face=C.face;this.glyphs=C.glyphs;this.w=C.w;this.baseSize=parseInt(B["units-per-em"],10);this.family=B["font-family"].toLowerCase();this.weight=B["font-weight"];this.style=B["font-style"]||"normal";this.viewBox=(function(){var E=B.bbox.split(/\s+/);var D={minX:parseInt(E[0],10),minY:parseInt(E[1],10),maxX:parseInt(E[2],10),maxY:parseInt(E[3],10)};D.width=D.maxX-D.minX;D.height=D.maxY-D.minY;D.toString=function(){return[this.minX,this.minY,this.width,this.height].join(" ")};return D})();this.ascent=-parseInt(B.ascent,10);this.descent=-parseInt(B.descent,10);this.height=-this.ascent+this.descent}function f(){var C={},B={oblique:"italic",italic:"oblique"};this.add=function(D){(C[D.style]||(C[D.style]={}))[D.weight]=D};this.get=function(H,I){var G=C[H]||C[B[H]]||C.normal||C.italic||C.oblique;if(!G){return null}I={normal:400,bold:700}[I]||parseInt(I,10);if(G[I]){return G[I]}var E={1:1,99:0}[I%100],K=[],F,D;if(E===undefined){E=I>400}if(I==500){I=400}for(var J in G){if(!k(G,J)){continue}J=parseInt(J,10);if(!F||J<F){F=J}if(!D||J>D){D=J}K.push(J)}if(I<F){I=F}if(I>D){I=D}K.sort(function(M,L){return(E?(M>I&&L>I)?M<L:M>L:(M<I&&L<I)?M>L:M<L)?-1:1});return G[K[0]]}}function r(){function D(F,G){if(F.contains){return F.contains(G)}return F.compareDocumentPosition(G)&16}function B(G){var F=G.relatedTarget;if(!F||D(this,F)){return}C(this)}function E(F){C(this)}function C(F){setTimeout(function(){m.replace(F,d.get(F).options,true)},10)}this.attach=function(F){if(F.onmouseenter===undefined){q(F,"mouseover",B);q(F,"mouseout",B)}else{q(F,"mouseenter",E);q(F,"mouseleave",E)}}}function u(){var C=[],D={};function B(H){var E=[],G;for(var F=0;G=H[F];++F){E[F]=C[D[G]]}return E}this.add=function(F,E){D[F]=C.push(E)-1};this.repeat=function(){var E=arguments.length?B(arguments):C,F;for(var G=0;F=E[G++];){m.replace(F[0],F[1],true)}}}function A(){var D={},B=0;function C(E){return E.cufid||(E.cufid=++B)}this.get=function(E){var F=C(E);return D[F]||(D[F]={})}}function a(B){var D={},C={};this.extend=function(E){for(var F in E){if(k(E,F)){D[F]=E[F]}}return this};this.get=function(E){return D[E]!=undefined?D[E]:B[E]};this.getSize=function(F,E){return C[F]||(C[F]=new n.Size(this.get(F),E))};this.isUsable=function(){return !!B}}function q(C,B,D){if(C.addEventListener){C.addEventListener(B,D,false)}else{if(C.attachEvent){C.attachEvent("on"+B,function(){return D.call(C,window.event)})}}}function v(C,B){var D=d.get(C);if(D.options){return C}if(B.hover&&B.hoverables[C.nodeName.toLowerCase()]){b.attach(C)}D.options=B;return C}function j(B){var C={};return function(D){if(!k(C,D)){C[D]=B.apply(null,arguments)}return C[D]}}function c(F,E){var B=n.quotedList(E.get("fontFamily").toLowerCase()),D;for(var C=0;D=B[C];++C){if(i[D]){return i[D].get(E.get("fontStyle"),E.get("fontWeight"))}}return null}function g(B){return document.getElementsByTagName(B)}function k(C,B){return C.hasOwnProperty(B)}function h(){var B={},D,F;for(var E=0,C=arguments.length;D=arguments[E],E<C;++E){for(F in D){if(k(D,F)){B[F]=D[F]}}}return B}function o(E,M,C,N,F,D){var K=document.createDocumentFragment(),H;if(M===""){return K}var L=N.separate;var I=M.split(p[L]),B=(L=="words");if(B&&t){if(/^\s/.test(M)){I.unshift("")}if(/\s$/.test(M)){I.push("")}}for(var J=0,G=I.length;J<G;++J){H=z[N.engine](E,B?n.textAlign(I[J],C,J,G):I[J],C,N,F,D,J<G-1);if(H){K.appendChild(H)}}return K}function l(C,J){var B=n.getStyle(v(C,J)).extend(J);var D=c(C,B),E,H,G,F,I;for(E=C.firstChild;E;E=G){H=E.nodeType;G=E.nextSibling;if(H==3){if(F){F.appendData(E.data);C.removeChild(E)}else{F=E}if(G){continue}}if(F){C.replaceChild(o(D,n.whiteSpace(F.data,B,F),B,J,E,C),F);F=null}if(H==1&&E.firstChild){if(n.hasClass(E,"cufon")){z[J.engine](D,null,B,J,E,C)}else{arguments.callee(E,J)}}}}var t=" ".split(/\s+/).length==0;var d=new A();var b=new r();var y=new u();var e=false;var z={},i={},w={enableTextDecoration:false,engine:null,forceHitArea:false,hover:false,hoverables:{a:true},printable:true,selector:(window.Sizzle||(window.jQuery&&function(B){return jQuery(B)})||(window.dojo&&dojo.query)||(window.Ext&&Ext.query)||(window.$$&&function(B){return $$(B)})||(window.$&&function(B){return $(B)})||(document.querySelectorAll&&function(B){return document.querySelectorAll(B)})||g),separate:"words",textShadow:"none"};var p={words:/[^\S\u00a0]+/,characters:"",none:/^/};m.now=function(){x.ready();return m};m.refresh=function(){y.repeat.apply(y,arguments);return m};m.registerEngine=function(C,B){if(!B){return m}z[C]=B;return m.set("engine",C)};m.registerFont=function(D){var B=new s(D),C=B.family;if(!i[C]){i[C]=new f()}i[C].add(B);return m.set("fontFamily",'"'+C+'"')};m.replace=function(D,C,B){C=h(w,C);if(!C.engine){return m}if(!e){n.addClass(x.root(),"cufon-active cufon-loading");n.ready(function(){n.addClass(n.removeClass(x.root(),"cufon-loading"),"cufon-ready")});e=true}if(C.hover){C.forceHitArea=true}if(typeof C.textShadow=="string"){C.textShadow=n.textShadow(C.textShadow)}if(typeof C.color=="string"&&/^-/.test(C.color)){C.textGradient=n.gradient(C.color)}if(!B){y.add(D,arguments)}if(D.nodeType||typeof D=="string"){D=[D]}n.ready(function(){for(var F=0,E=D.length;F<E;++F){var G=D[F];if(typeof G=="string"){m.replace(C.selector(G),C,true)}else{l(G,C)}}});return m};m.set=function(B,C){w[B]=C;return m};return m})();Cufon.registerEngine("canvas",(function(){var b=document.createElement("canvas");if(!b||!b.getContext||!b.getContext.apply){return}b=null;var a=Cufon.CSS.supports("display","inline-block");var e=!a&&(document.compatMode=="BackCompat"||/frameset|transitional/i.test(document.doctype.publicId));var f=document.createElement("style");f.type="text/css";f.appendChild(document.createTextNode((".cufon-canvas{text-indent:0;}@media screen,projection{.cufon-canvas{display:inline;display:inline-block;position:relative;vertical-align:middle;"+(e?"":"font-size:1px;line-height:1px;")+"}.cufon-canvas .cufon-alt{display:-moz-inline-box;display:inline-block;width:0;height:0;overflow:hidden;text-indent:-10000in;}"+(a?".cufon-canvas canvas{position:relative;}":".cufon-canvas canvas{position:absolute;}")+"}@media print{.cufon-canvas{padding:0;}.cufon-canvas canvas{display:none;}.cufon-canvas .cufon-alt{display:inline;}}").replace(/;/g,"!important;")));document.getElementsByTagName("head")[0].appendChild(f);function d(p,h){var n=0,m=0;var g=[],o=/([mrvxe])([^a-z]*)/g,k;generate:for(var j=0;k=o.exec(p);++j){var l=k[2].split(",");switch(k[1]){case"v":g[j]={m:"bezierCurveTo",a:[n+~~l[0],m+~~l[1],n+~~l[2],m+~~l[3],n+=~~l[4],m+=~~l[5]]};break;case"r":g[j]={m:"lineTo",a:[n+=~~l[0],m+=~~l[1]]};break;case"m":g[j]={m:"moveTo",a:[n=~~l[0],m=~~l[1]]};break;case"x":g[j]={m:"closePath"};break;case"e":break generate}h[g[j].m].apply(h,g[j].a)}return g}function c(m,k){for(var j=0,h=m.length;j<h;++j){var g=m[j];k[g.m].apply(k,g.a)}}return function(ah,H,Z,D,L,ai){var n=(H===null);if(n){H=L.alt}var J=ah.viewBox;var p=Z.getSize("fontSize",ah.baseSize);var X=Z.get("letterSpacing");X=(X=="normal")?0:p.convertFrom(parseInt(X,10));var K=0,Y=0,W=0,F=0;var I=D.textShadow,U=[];if(I){for(var ag=I.length;ag--;){var O=I[ag];var T=p.convertFrom(parseFloat(O.offX));var R=p.convertFrom(parseFloat(O.offY));U[ag]=[T,R];if(R<K){K=R}if(T>Y){Y=T}if(R>W){W=R}if(T<F){F=T}}}var al=Cufon.CSS.textTransform(H,Z).split(""),B;var o=ah.glyphs,E,r,ac;var h=0,v,N=[];for(var ag=0,ae=0,ab=al.length;ag<ab;++ag){E=o[B=al[ag]]||ah.missingGlyph;if(!E){continue}if(r){h-=ac=r[B]||0;N[ae-1]-=ac}h+=v=N[ae++]=~~(E.w||ah.w)+X;r=E.k}if(v===undefined){return null}Y+=J.width-v;F+=J.minX;var C,q;if(n){C=L;q=L.firstChild}else{C=document.createElement("span");C.className="cufon cufon-canvas";C.alt=H;q=document.createElement("canvas");C.appendChild(q);if(D.printable){var ad=document.createElement("span");ad.className="cufon-alt";ad.appendChild(document.createTextNode(H));C.appendChild(ad)}}var am=C.style;var Q=q.style;var m=p.convert(J.height);var ak=Math.ceil(m);var V=ak/m;var P=V*Cufon.CSS.fontStretch(Z.get("fontStretch"));var S=h*P;var aa=Math.ceil(p.convert(S+Y-F));var t=Math.ceil(p.convert(J.height-K+W));q.width=aa;q.height=t;Q.width=aa+"px";Q.height=t+"px";K+=J.minY;Q.top=Math.round(p.convert(K-ah.ascent))+"px";Q.left=Math.round(p.convert(F))+"px";var A=Math.ceil(p.convert(S))+"px";if(a){am.width=A;am.height=p.convert(ah.height)+"px"}else{am.paddingLeft=A;am.paddingBottom=(p.convert(ah.height)-1)+"px"}var aj=q.getContext("2d"),M=m/J.height;aj.scale(M,M*V);aj.translate(-F,-K);aj.lineWidth=ah.face["underline-thickness"];aj.save();function s(i,g){aj.strokeStyle=g;aj.beginPath();aj.moveTo(0,i);aj.lineTo(h,i);aj.stroke()}var u=D.enableTextDecoration?Cufon.CSS.textDecoration(ai,Z):{};if(u.underline){s(-ah.face["underline-position"],u.underline)}if(u.overline){s(ah.ascent,u.overline)}function af(){aj.scale(P,1);for(var x=0,k=0,g=al.length;x<g;++x){var y=o[al[x]]||ah.missingGlyph;if(!y){continue}if(y.d){aj.beginPath();if(y.code){c(y.code,aj)}else{y.code=d("m"+y.d,aj)}aj.fill()}aj.translate(N[k++],0)}aj.restore()}if(I){for(var ag=I.length;ag--;){var O=I[ag];aj.save();aj.fillStyle=O.color;aj.translate.apply(aj,U[ag]);af()}}var z=D.textGradient;if(z){var G=z.stops,w=aj.createLinearGradient(0,J.minY,0,J.maxY);for(var ag=0,ab=G.length;ag<ab;++ag){w.addColorStop.apply(w,G[ag])}aj.fillStyle=w}else{aj.fillStyle=Z.get("color")}af();if(u["line-through"]){s(-ah.descent,u["line-through"])}return C}})());Cufon.registerEngine("vml",(function(){var e=document.namespaces;if(!e){return}e.add("cvml","urn:schemas-microsoft-com:vml");e=null;var b=document.createElement("cvml:shape");b.style.behavior="url(#default#VML)";if(!b.coordsize){return}b=null;var g=(document.documentMode||0)<8;document.write(('<style type="text/css">.cufon-vml-canvas{text-indent:0;}@media screen{cvml\\:shape,cvml\\:rect,cvml\\:fill,cvml\\:shadow{behavior:url(#default#VML);display:block;antialias:true;position:absolute;}.cufon-vml-canvas{position:absolute;text-align:left;}.cufon-vml{display:inline-block;position:relative;vertical-align:'+(g?"middle":"text-bottom")+";}.cufon-vml .cufon-alt{position:absolute;left:-10000in;font-size:1px;}a .cufon-vml{cursor:pointer}}@media print{.cufon-vml *{display:none;}.cufon-vml .cufon-alt{display:inline;}}</style>").replace(/;/g,"!important;"));function c(h,i){return a(h,/(?:em|ex|%)$|^[a-z-]+$/i.test(i)?"1em":i)}function a(k,l){if(/px$/i.test(l)){return parseFloat(l)}var j=k.style.left,i=k.runtimeStyle.left;k.runtimeStyle.left=k.currentStyle.left;k.style.left=l.replace("%","em");var h=k.style.pixelLeft;k.style.left=j;k.runtimeStyle.left=i;return h}var f={};function d(o){var p=o.id;if(!f[p]){var m=o.stops,n=document.createElement("cvml:fill"),h=[];n.type="gradient";n.angle=180;n.focus="0";n.method="sigma";n.color=m[0][1];for(var l=1,i=m.length-1;l<i;++l){h.push(m[l][0]*100+"% "+m[l][1])}n.colors=h.join(",");n.color2=m[i][1];f[p]=n}return f[p]}return function(aj,K,ad,G,O,ak,ab){var o=(K===null);if(o){K=O.alt}var M=aj.viewBox;var q=ad.computedFontSize||(ad.computedFontSize=new Cufon.CSS.Size(c(ak,ad.get("fontSize"))+"px",aj.baseSize));var aa=ad.computedLSpacing;if(aa==undefined){aa=ad.get("letterSpacing");ad.computedLSpacing=aa=(aa=="normal")?0:~~q.convertFrom(a(ak,aa))}var C,r;if(o){C=O;r=O.firstChild}else{C=document.createElement("span");C.className="cufon cufon-vml";C.alt=K;r=document.createElement("span");r.className="cufon-vml-canvas";C.appendChild(r);if(G.printable){var ag=document.createElement("span");ag.className="cufon-alt";ag.appendChild(document.createTextNode(K));C.appendChild(ag)}if(!ab){C.appendChild(document.createElement("cvml:shape"))}}var ap=C.style;var V=r.style;var m=q.convert(M.height),am=Math.ceil(m);var Z=am/m;var T=Z*Cufon.CSS.fontStretch(ad.get("fontStretch"));var Y=M.minX,X=M.minY;V.height=am;V.top=Math.round(q.convert(X-aj.ascent));V.left=Math.round(q.convert(Y));ap.height=q.convert(aj.height)+"px";var v=G.enableTextDecoration?Cufon.CSS.textDecoration(ak,ad):{};var J=ad.get("color");var ao=Cufon.CSS.textTransform(K,ad).split(""),B;var p=aj.glyphs,H,s,af;var h=0,P=[],W=0,x;var z,L=G.textShadow;for(var ai=0,ah=0,ae=ao.length;ai<ae;++ai){H=p[B=ao[ai]]||aj.missingGlyph;if(!H){continue}if(s){h-=af=s[B]||0;P[ah-1]-=af}h+=x=P[ah++]=~~(H.w||aj.w)+aa;s=H.k}if(x===undefined){return null}var A=-Y+h+(M.width-x);var an=q.convert(A*T),ac=Math.round(an);var S=A+","+M.height,n;var N="r"+S+"ns";var y=G.textGradient&&d(G.textGradient);for(ai=0,ah=0;ai<ae;++ai){H=p[ao[ai]]||aj.missingGlyph;if(!H){continue}if(o){z=r.childNodes[ah];while(z.firstChild){z.removeChild(z.firstChild)}}else{z=document.createElement("cvml:shape");r.appendChild(z)}z.stroked="f";z.coordsize=S;z.coordorigin=n=(Y-W)+","+X;z.path=(H.d?"m"+H.d+"xe":"")+"m"+n+N;z.fillcolor=J;if(y){z.appendChild(y.cloneNode(false))}var al=z.style;al.width=ac;al.height=am;if(L){var u=L[0],t=L[1];var F=Cufon.CSS.color(u.color),D;var R=document.createElement("cvml:shadow");R.on="t";R.color=F.color;R.offset=u.offX+","+u.offY;if(t){D=Cufon.CSS.color(t.color);R.type="double";R.color2=D.color;R.offset2=t.offX+","+t.offY}R.opacity=F.opacity||(D&&D.opacity)||1;z.appendChild(R)}W+=P[ah++]}var Q=z.nextSibling,w,E;if(G.forceHitArea){if(!Q){Q=document.createElement("cvml:rect");Q.stroked="f";Q.className="cufon-vml-cover";w=document.createElement("cvml:fill");w.opacity=0;Q.appendChild(w);r.appendChild(Q)}E=Q.style;E.width=ac;E.height=am}else{if(Q){r.removeChild(Q)}}ap.width=Math.max(Math.ceil(q.convert(h*T)),0);if(g){var U=ad.computedYAdjust;if(U===undefined){var I=ad.get("lineHeight");if(I=="normal"){I="1em"}else{if(!isNaN(I)){I+="em"}}ad.computedYAdjust=U=0.5*(a(ak,I)-parseFloat(ap.height))}if(U){ap.marginTop=Math.ceil(U)+"px";ap.marginBottom=U+"px"}}return C}})());

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

/*
* jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php
*
* Uses the built in easing capabilities added in jQuery 1.1
* to offer multiple easing options
*
* Copyright (c) 2007 George Smith
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/

jQuery.easing = {
easein: function(x, t, b, c, d) {
return c*(t/=d)*t + b; // in
},
easeinout: function(x, t, b, c, d) {
if (t < d/2) return 2*c*t*t/(d*d) + b;
var ts = t - d/2;
return -2*c*ts*ts/(d*d) + 2*c*ts/d + c/2 + b;
},
easeout: function(x, t, b, c, d) {
return -c*t*t/(d*d) + 2*c*t/d + b;
},
expoin: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
flip *= -1;
c *= -1;
}
return flip * (Math.exp(Math.log(c)/d * t)) + b;
},
expoout: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
flip *= -1;
c *= -1;
}
return flip * (-Math.exp(-Math.log(c)/d * (t-d)) + c + 1) + b;
},
expoinout: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
flip *= -1;
c *= -1;
}
if (t < d/2) return flip * (Math.exp(Math.log(c/2)/(d/2) * t)) + b;
return flip * (-Math.exp(-2*Math.log(c/2)/d * (t-d)) + c + 1) + b;
},
bouncein: function(x, t, b, c, d) {
return c - jQuery.easing['bounceout'](x, d-t, 0, c, d) + b;
},
bounceout: function(x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
bounceinout: function(x, t, b, c, d) {
if (t < d/2) return jQuery.easing['bouncein'] (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing['bounceout'] (x, t*2-d,0, c, d) * .5 + c*.5 + b;
},
elasin: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
elasout: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
elasinout: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
backin: function(x, t, b, c, d) {
var s=1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backout: function(x, t, b, c, d) {
var s=1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
backinout: function(x, t, b, c, d) {
var s=1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
linear: function(x, t, b, c, d) {
return c*t/d + b; //linear
}
};

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function() {
Cufon.replace('.blogname h2', { fontFamily: 'MankSans-Medium' });
Cufon.replace('.sidetitl,.blogname h1', { fontFamily: 'ChunkFive' });

});

//]]>
</script>


<style type='text/css'>
#slidearea{
height: 230px;
overflow: hidden;
position: relative;
width:680px;
background:#242424;
}
#gallerycover{
overflow: hidden;
margin:0px 0px;
}

.mygallery{
overflow: hidden;
position:relative;
}

.mytext img{
position:absolute;
left:10px;
top:10px;
padding:5px;
background:#515252;
border:1px solid #5e5e5e;
}

.mytext{
position:relative;
margin:0px 0px;
height:200px;
width:680px;
float:left;
display:inline;
line-height:20px;
color:#c4c4c4;
font-family: Tahoma,Georgia,century gothic,Verdana, sans-serif;
}

.mytext ul li{
height:200px;

}

.mytext a:link, .mytext a:visited {
color:#fff;
}

.mytext h2 {
font: 18px Georgia,century gothic,Verdana, sans-serif;
margin:15px 0px 5px 310px;
font-weight:normal;
width:350px;
height:24px;
overflow:hidden;
}

.mytext p {
width:350px;
margin:0px 0px 5px 310px;
color:#6f6f6f;
}

.mytext h2 a:link, .mytext h2 a:visited {
color:#fff;
}
.slnav{
padding:3px 0px;
background:#000;

}
.prev{
float:left;
width:24px;
height:24px;
z-index:200;
margin-left:5px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1JV6elm2QCLqZcMweC1B6ijoT1cNVvswYA7uRjthKA60fH1lV5GLJpfeqvbBBIk2rGtzFyJnplR8aL94fm0uJnOS71cwoJWfq02kVVfoVW8YTUnNGC6f-Ojcbtgtke3nZvK_bzeEU8a14/);
}

.next{
float:right;
width:24px;
height:24px;
z-index:200;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnxUYhH21TR5cy6XBF0T-SaX5yqB6OdG8XK83WdAKvC1QcWKUmiStsO56Ixelw3sszhkrsGVxIqCuahKhIs1-U5pmM1mFHj9Ex0bwWT5GkOnQ6V12POMaX_QfIPgn54tanCEBiqZkAVhb5/);
display:block;
}

</style>




Sube las imagenes de navegacion a tu propio servidor

[3] Ultimo paso, agregar el Slide. Por lo general, sugiero agregar este Slide es el crosscol de tu blog, a debajo de la cabecera, ya que es mas ancho que largo.

♦ Ve a Diseño > Agregar un gadget > HTML/Javascript
♦ Pega el siguiente codigo
♦ Guarda los cambios
He aqui el codigo.

<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 1,
easing: "backout",
speed: 1000
});

});
</script>

<div id="slidearea">

<div id="gallerycover">
<div class="mygallery">
<ul>

<li>
<div class="mytext">
<h2><a href="URL-of-Post-1" title="#">Title-of-Post-1</a></h2>
<p>Slide 1 Description [...]</p>

<img src="Slide-1-Image-Address" alt="" />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="URL-of-Post-2" title="#">Title-of-Post-2</a></h2>
<p>Slide 2 Description [...]</p>

<img src="Slide-2-Image-Address" alt="" />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="URL-of-Post-3" title="#">Title-of-Post-3</a></h2>
<p>Slide 3 Description [...]</p>

<img src="Slide-3-Image-Address" alt="" />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="URL-of-Post-4" title="#">Title-of-Post-4</a></h2>
<p>Slide 4 Description [...]</p>

<img src="Slide-4-Image-Address" alt="" />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="URL-of-Post-5" title="#">Title-of-Post-5</a></h2>
<p>Slide 5 Description [...]</p>

<img src="Slide-5-Image-Address" alt="" />
</div>
</li>

</ul>

<div class="clear"></div>

</div>
</div>

<div class="slnav">
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
<div class="clear"></div>
</div>

</div>


Para entender el codigo


En Azul: Direccion de enlace a la entrada (URL)
En Naranja: Titulo de la entrada
En Violeta: Descripcion de la entrada
En Verde: Direccion de la imagen de la entrada



[5] Mira tu blog, y ve lo lindo que quedo.

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo


22 comentarios :

  1. Buenas.. queria consultar como hacer para redireccionar mi pagina de facebook a mi blog sport gracas

    ResponderEliminar
  2. un gusto cyberleonet, no hermano! como vas a hacer eso, es imposible ya que cuando tu creas una pagina de facebook no tienes el mismo control que las de blogger, es como facebook te la ofrece y ya! no lo creo.. tendrias que hackear facebook para hacer esto, y eso es casi imposible jajaja... pero quizas estoy equivocado... no lo se, pero en mi opinion eso es imposible

    ResponderEliminar
  3. hola man no se el cambio para ver cada entrada que colcocas es manual...??
    osea siempre tego que apretar la flechita para que cambie, como lo hago que sea automatico...

    ResponderEliminar
  4. Hola Anthony, es la primera vez que visito tu blog y este post me gusta mucho, mucho, pero sogo los pasos que das y no me funciona, no se si falta algun codigo, tienes un enlace en el post que dice mostrar codigo y no muestra nada, si me puedes ayudar te lo agradezco.
    Un saludo y gracias
    Ar

    ResponderEliminar
  5. Hola de nuevo Anthony, soy idiota, no habia puesto el script del jquery.
    Muchas gracias

    ResponderEliminar
  6. hola carlos javier...

    hermano, m llama la atencion tu comentario, y es que justo despues de ese post iba a publicar uno que fuera automatico, lo que pasa es que me falto tiempo.. perdon por ausentarme tnto, pero te aseguro que ya para mañana estara publicado. esta atento

    gracias

    ResponderEliminar
  7. que tal acostados, un gusto men..

    jejeje... que bien que te hayas dado cuenta del error.. y sobre el enlace de mostrar codigo, lo que paso es que yo use el efecto de expandir y contraer ya que era muy largo el codigo, pero ya mismo lo arreglo. gracias por avisarme amigo

    chao y muchas gracias

    ResponderEliminar
  8. hola carlos javier...

    hermano, m llama la atencion tu comentario, y es que justo despues de ese post iba a publicar uno que fuera automatico, lo que pasa es que me falto tiempo.. perdon por ausentarme tnto, pero te aseguro que ya para mañana estara publicado. esta atento

    gracias

    ResponderEliminar
  9. que tal acostados, un gusto men..

    jejeje... que bien que te hayas dado cuenta del error.. y sobre el enlace de mostrar codigo, lo que paso es que yo use el efecto de expandir y contraer ya que era muy largo el codigo, pero ya mismo lo arreglo. gracias por avisarme amigo

    chao y muchas gracias

    ResponderEliminar
  10. una pregunta.. se le puede cambiar el tamaño .. es que me parece un poco grande para mi blog.. gracias.. (diegorv1984@hotmail.es)

    ResponderEliminar
  11. Hola man es la primera vez que visito tu web y hay cosas muy interesantes y profesionales.Te hago una consulta se puede modificar el background del slider? si es asi lo subo al server y lo uso respondeme cuando puedas gracias!

    ResponderEliminar
  12. Ignaciochavezmdq : Si hermano si se le puede cambiar el color! de hecho puede combinar todo lo que vea con el estilo de su blog! vea descargese este archivo

    http://sites.google.com/site/archivosfrikibloggeo/slide/Estiloslidecss-FrikiBloggeo.css

    el archivo son los estilos CSS del slide! vea . abralo y fijese en este codigo.

    #slidearea{
    height: 230px;
    overflow: hidden;
    position: relative;
    width:680px;
    background:#242424;
    }

    el #242424 es el color gris de fondo que usted le ve al slide.. para cambiarlo tiene que buscar el codigo del color que desee... para hacerle la vida mas facil aqui le dejo los codigos de colores en esta pagina.. busque el que quiera y sustituya el numero que se encuentra despues del signo numeral (#) por cualquiera de los que le muestra en la pagina..

    http://www.sitiosargentina.com.ar/webmaster/CODIGOS%20DE%20COLORES.htm

    cualquier otra dudilla dejeme el comentario

    ResponderEliminar
  13. Muchisimas gracias!!! Me funciona muy bien pero como puedo hacer para centrarlo????????? porque a mi me ha quedado sobre un lado y quisiera verlo centrado!

    muchas gracias

    ResponderEliminar
  14. Enzo tan solo colocale un < center > < / center > justo desde donde empieza el codigo HTML del Slide! Es decir obviaras el javascript. Si no lo haces asi. busca la id del widget es decir, puede que sea HTML2, o HTML3, o HTML(Numerodelgadget), y añades el siguiente codigo justo antes de < / b:skin >

    #HTML(Numero) {
    align:center;
    }

    si no te sirve avisame

    ResponderEliminar
  15. Muy buen post Anthony, he intentado implantar dicho código en mi blog y la verdad es que funciona, lo que ocurre es que tengo una serie de problemas estéticos (tamaño del gadget y formato) y me gustaria solucionarlos. Por favor como se puede ajustar el tamaño del gadget para qe no se me recorten las imágenes ni el texto? Pásate por mi blog (http://aerotecnologia.blogspot.com/) y échale un vistazo al slideshow, ah por cierto en el slideshow tampoco me aparecen los titulos del post ni tampoco redirecciona al post si clicas en la imágen o descripción.
    Soy novato en todo lo relacionado con scripts y necesito tu ayuda Anthony por favor échame una mano.
    Un saludo
    Cebri

    ResponderEliminar
  16. Hola Cebri: Pasame el codigo completo que usaste del slide para analizarlo

    Saludos

    ResponderEliminar
  17. Anthony te he enviado el código a través del formulario de contacto.
    Un cordial saludo.

    ResponderEliminar
  18. Hola de nuevo Cebri.

    En cuanto a lo que tu dices que el no te redirige al post clicando en la imagen o descripcion no es ningun problema, pues asi es el slide, se diseñó para redirigir al clicar en el titulo.

    He provado el codigo que me has mandado en esta pagina

    http://laviudajovenvv.blogspot.com/

    y como puedes ver funciona muy bien, solo no se ven las imagenes que caducaron en el servidor donde las subes, te recomiendo subirlas al mismo servidor de blogger para que no te las eliminen. Como puedes ver, no alteré en nada tu codigo, y me funciona perfectamente, me aparece los titulos, descripcion y la redireccion a cada entrada... Fijate que hayas copiado bien los scripts que requiere el slide dentro la plantilla HTML de tu blog.

    En cuanto al tamaño del gadget puedes editarlo descargando este archivo

    http://sites.google.com/site/archivosfrikibloggeo/slide/Estiloslidecss-FrikiBloggeo.css

    Te explico, luego de descargarlo abrelo con el bloc de notas


    El primer código que puedes ver será este:


    #slidearea{
    height: 230px;
    overflow: hidden;
    position: relative;
    width:680px;
    background:#242424;
    }

    #Slidearea : Abarca todo el contorno del slide

    Height : es la altura del slide, como ves esta a 230 pixeles, si le pones un numero menor reducira su altura, y si le colocas uno mayor aumentara su altura

    width: Es el ancho de slide, al igual que la altura debes editarlo para aumentar o reducir su anchura.

    Background: Es el color de fondo del slide

    Por overflow, y position no te preocupes, no influyen en el aspecto visual del gadget en absoluto

    luego de que edites ese codigo, copialo todo y pegalo encima de ]]></b:skin>


    Guarda los cambios...

    Ahora, busca el siguiente codigo dentro de tu plantilla

    <link href='http://sites.google.com/site/archivosfrikibloggeo/slide/Estiloslidecss-FrikiBloggeo.css' rel='stylesheet' type='text/css'/>


    y eliminalo

    Guarda los cambios y verifica si el tamaño del gadget cambió

    eso es todo, espero haberte ayudado...

    ResponderEliminar
  19. Muchísimas gracias Anthony!!! Ya he podido cambiar las características del slide para que quede perfectamente implementado en el blog. Mira el resultado http://www.aerotecnologia.blogspot.com/
    No obstante me gustaria subir un poco la barra de desplazamiento negra situada debajo, para que no se vea tanto espacio. Hay alguna forma de hacerlo? También me he planteado hacer el slide automático ya que es más atractivo, es un poco más complicado pero lo intentaré.

    Un saludo y mil gracias por tu ayuda.
    Cebri

    PD: Por cierto me hice seguidor de tu blog! =)

    ResponderEliminar
  20. Hola de nuevo Cebri,

    la automatizacion de los slide tiene que ver con los javascripts que use, yo publique aqui mismo un slide automatico que puede gustarte, solo tendrias que aplicar cambiarle el tamaño como este para que encaje en tu blog.

    te dejo el post http://www.frikibloggeo.com.ar/2010/05/agregar-un-slideshow-automatico-en-tu.html

    Espero haberte ayudado

    ResponderEliminar
  21. muchisimas gracias :D

    ResponderEliminar
  22. No muestra el código de las flechitaaas AYUDAAAAAA POR FAVOOOOOOOOR T_____________T

    ResponderEliminar