Meny, un menú deslizante que voltea al blog en 3D

21 de enero de 2013 185 comentarios ,


Meny es un menú tridimencional bastante peculiar y llamativo, no sólo por la forma como muestra los enlaces, sino por la forma como "pone" al blog. Lo que hace este menú es que al pasar el cursor para mostrarlo, se desliza el contenido del menú mientras voltea al blog con un efecto 3D.
La mejor forma de entenderlo es viendo el demo en este blog de pruebas, sólo pasa el cursor por la flecha para ver este menú en funcionamiento.

El script es de Hakim El Hattab y para suerte de muchos no usa ni jQuery ni Scriptaculous, así que en la mayoría de los casos no debería haber problemas de compatibilidad.

Implementar este menú que voltea la página en 3D es bastante sencillo, sólo entra en Plantilla | Edición de HTML y antes de ]]></b:skin> pega los estilos:
/* Meny Menu
----------------------------------------------- */
.meny {
display: none;
padding: 20px;
overflow: auto;
background: #333;
color: #eee; /* Color de fondo del menú */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.meny h4 {
font-size: 24px; /* Tamaño del título del menú */
color:#fff; /* Color del título del menú */
text-align:center;
}
.meny ul {
margin-top: 10px;
}
.meny ul li {
display: inline-block;
width: 200px;
list-style: none;
font-size: 20px;
padding: 3px 10px;
}
.meny-arrow {
position: absolute;
z-index: 10;
border: 10px solid transparent;
-webkit-transition: opacity 0.4s ease 0.4s;
-moz-transition: opacity 0.4s ease 0.4s;
-ms-transition: opacity 0.4s ease 0.4s;
-o-transition: opacity 0.4s ease 0.4s;
transition: opacity 0.4s ease 0.4s;
}
.meny-left .meny-arrow {
left: 5px;
top: 350px;
margin-top: -16px;
border-left: 16px solid #333; /* Color de la flecha */
}
.meny-right .meny-arrow {
right: 14px;
top: 150px;
margin-top: -16px;
border-right: 16px solid #333; /* Color de la flecha */
}
.meny-top .meny-arrow {
left: 150px;
top: 14px;
margin-left: -16px;
border-top: 16px solid #333; /* Color de la flecha */
}
.meny-bottom .meny-arrow {
left: 150px;
bottom: 14px;
margin-left: -16px;
border-bottom: 16px solid #333; /* Color de la flecha */
}
.meny-active .meny-arrow {
opacity: 0;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.contents {
width: 100%;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Luego busca la etiqueta <body> o esta línea:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Debajo de cualquiera de las dos agrega lo siguiente:
<div class='meny'>
<h4>Menú</h4>
<ul>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
</ul>
</div>

<div class='meny-arrow'/>
<div class='contents'>
Por último añade antes de </body> este código:
</div>
<script>
//<![CDATA[
/*!
* meny 1.2
* http://lab.hakim.se/meny
* MIT licensed
* Created by Hakim El Hattab (http://hakim.se, @hakimel)
*/
var Meny={create:function(a){return(function(){if(!a||!a.menuElement||!a.contentsElement){throw"You need to specify which menu and contents elements to use.";
}if(a.menuElement.parentNode!==a.contentsElement.parentNode){throw"The menu and contents elements must have the same parent.";}var J="top",K="right",c="bottom",N="left";
var F="WebkitPerspective" in document.body.style||"MozPerspective" in document.body.style||"msPerspective" in document.body.style||"OPerspective" in document.body.style||"perspective" in document.body.style;
var D={width:300,height:300,position:N,threshold:40,overlap:6,transitionDuration:"0.5s",transitionEasing:"ease"};var e={menu:a.menuElement,contents:a.contentsElement,wrapper:a.menuElement.parentNode,cover:null};
var A=e.wrapper.offsetLeft,z=e.wrapper.offsetTop,t=null,r=null,q=null,o=null,f=false,m=false;var l,j,G,n,O,V,S,x,d,B;var w,y,E;Meny.extend(D,a);i();g();
v();C();Q();R();function i(){G="";S="";switch(D.position){case J:l="50% 0%";j="rotateX( 30deg ) translateY( -100% ) translateY( "+D.overlap+"px )";V="50% 0";
x="translateY( "+D.height+"px ) rotateX( -15deg )";n={top:"-"+(D.height-D.overlap)+"px"};O={top:"0px"};d={top:"0px"};B={top:D.height+"px"};break;case K:l="100% 50%";
j="rotateY( 30deg ) translateX( 100% ) translateX( -2px ) scale( 1.01 )";V="100% 50%";x="translateX( -"+D.width+"px ) rotateY( -15deg )";n={right:"-"+(D.width-D.overlap)+"px"};
O={right:"0px"};d={left:"0px"};B={left:"-"+D.width+"px"};break;case c:l="50% 100%";j="rotateX( -30deg ) translateY( 100% ) translateY( -"+D.overlap+"px )";
V="50% 100%";x="translateY( -"+D.height+"px ) rotateX( 15deg )";n={bottom:"-"+(D.height-D.overlap)+"px"};O={bottom:"0px"};d={top:"0px"};B={top:"-"+D.height+"px"};
break;default:l="100% 50%";j="translateX( -100% ) translateX( "+D.overlap+"px ) scale( 1.01 ) rotateY( -30deg )";V="0 50%";x="translateX( "+D.width+"px ) rotateY( 15deg )";
n={left:"-"+(D.width-D.overlap)+"px"};O={left:"0px"};d={left:"0px"};B={left:D.width+"px"};break;}}function g(){Meny.addClass(e.wrapper,"meny-"+D.position);
e.wrapper.style[Meny.prefix("perspective")]="800px";e.wrapper.style[Meny.prefix("perspectiveOrigin")]=V;}function v(){e.cover=document.createElement("div");
e.cover.style.position="absolute";e.cover.style.display="block";e.cover.style.width="100%";e.cover.style.height="100%";e.cover.style.left=0;e.cover.style.top=0;
e.cover.style.zIndex=1000;e.cover.style.visibility="hidden";e.cover.style.opacity=0;try{e.cover.style.background="rgba( 0, 0, 0, 0.4 )";e.cover.style.background="-ms-linear-gradient("+D.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)";
e.cover.style.background="-moz-linear-gradient("+D.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)";e.cover.style.background="-webkit-linear-gradient("+D.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)";
}catch(W){}if(F){e.cover.style[Meny.prefix("transition")]="all "+D.transitionDuration+" "+D.transitionEasing;}e.contents.appendChild(e.cover);}function C(){var W=e.menu.style;
switch(D.position){case J:W.width="100%";W.height=D.height+"px";break;case K:W.right="0";W.width=D.width+"px";W.height="100%";break;case c:W.bottom="0";
W.width="100%";W.height=D.height+"px";break;case N:W.width=D.width+"px";W.height="100%";break;}W.position="fixed";W.display="block";W.zIndex=1;if(F){W[Meny.prefix("transform")]=j;
W[Meny.prefix("transformOrigin")]=l;W[Meny.prefix("transition")]="all "+D.transitionDuration+" "+D.transitionEasing;}else{Meny.extend(W,n);}}function Q(){var W=e.contents.style;
if(F){W[Meny.prefix("transform")]=S;W[Meny.prefix("transformOrigin")]=V;W[Meny.prefix("transition")]="all "+D.transitionDuration+" "+D.transitionEasing;
}else{W.position=W.position.match(/relative|absolute|fixed/gi)?W.position:"relative";Meny.extend(W,d);}}function R(){if("ontouchstart" in window){Meny.bindEvent(document,"touchstart",L);
Meny.bindEvent(document,"touchend",H);}else{Meny.bindEvent(document,"mousedown",M);Meny.bindEvent(document,"mouseup",U);Meny.bindEvent(document,"mousemove",b);
}}function u(){if(!f){f=true;Meny.addClass(e.wrapper,"meny-active");e.cover.style.height=e.contents.scrollHeight+"px";e.cover.style.visibility="visible";
if(F){e.cover.style.opacity=1;e.contents.style[Meny.prefix("transform")]=x;e.menu.style[Meny.prefix("transform")]=G;}else{w&&w.stop();w=Meny.animate(e.menu,O,500);
y&&y.stop();y=Meny.animate(e.contents,B,500);E&&E.stop();E=Meny.animate(e.cover,{opacity:1},500);}Meny.dispatchEvent(e.menu,"open");}}function I(){if(f){f=false;
Meny.removeClass(e.wrapper,"meny-active");if(F){e.cover.style.visibility="hidden";e.cover.style.opacity=0;e.contents.style[Meny.prefix("transform")]=S;
e.menu.style[Meny.prefix("transform")]=j;}else{w&&w.stop();w=Meny.animate(e.menu,n,500);y&&y.stop();y=Meny.animate(e.contents,d,500);E&&E.stop();E=Meny.animate(e.cover,{opacity:0},500,function(){e.cover.style.visibility="hidden";
});}Meny.dispatchEvent(e.menu,"close");}}function M(W){m=true;}function b(Z){if(!m){var W=Z.clientX-A,aa=Z.clientY-z;switch(D.position){case J:if(aa>D.height){I();
}else{if(aa<D.threshold){u();}}break;case K:var X=e.wrapper.offsetWidth;if(W<X-D.width){I();}else{if(W>X-D.threshold){u();}}break;case c:var Y=e.wrapper.offsetHeight;
if(aa<Y-D.height){I();}else{if(aa>Y-D.threshold){u();}}break;case N:if(W>D.width){I();}else{if(W<D.threshold){u();}}break;}}}function U(W){m=false;}function L(W){t=W.touches[0].clientX-A;
r=W.touches[0].clientY-z;q=null;o=null;Meny.bindEvent(document,"touchmove",P);}function P(X){q=X.touches[0].clientX-A;o=X.touches[0].clientY-z;var W=null;
if(Math.abs(q-t)>Math.abs(o-r)){if(q<t-D.threshold){W=T;}else{if(q>t+D.threshold){W=p;}}}else{if(o<r-D.threshold){W=s;}else{if(o>r+D.threshold){W=h;}}}if(W&&W()){X.preventDefault();
}}function H(W){Meny.unbindEvent(document,"touchmove",P);if(q===null&&o===null){k();}}function k(){var W=(D.position===J&&r>D.height)||(D.position===K&&t<e.wrapper.offsetWidth-D.width)||(D.position===c&&r<e.wrapper.offsetHeight-D.height)||(D.position===N&&t<D.width);
if(W){I();}}function p(){if(D.position===K&&f){I();return true;}else{if(D.position===N&&!f){u();return true;}}}function T(){if(D.position===K&&!f){u();
return true;}else{if(D.position===N&&f){I();return true;}}}function h(){if(D.position===c&&f){I();return true;}else{if(D.position===J&&!f){u();return true;
}}}function s(){if(D.position===c&&!f){u();return true;}else{if(D.position===J&&f){I();return true;}}}return{open:u,close:I,isOpen:function(){return f;
},addEventListener:function(W,X){e.menu&&Meny.bindEvent(e.menu,W,X);},removeEventListener:function(W,X){e.menu&&Meny.unbindEvent(e.menu,W,X);}};})();},animate:function(b,a,c,d){return(function(){var g={};
for(var j in a){g[j]={start:parseFloat(b.style[j])||0,end:parseFloat(a[j]),unit:(typeof a[j]==="string"&&a[j].match(/px|em|%/gi))?a[j].match(/px|em|%/gi)[0]:""};
}var i=Date.now(),e;function h(){var k=1-Math.pow(1-((Date.now()-i)/c),5);for(var m in g){var l=g[m];b.style[m]=l.start+((l.end-l.start)*k)+l.unit;}if(k<1){e=setTimeout(h,1000/60);
}else{d&&d();f();}}function f(){clearTimeout(e);}h();return{stop:f};})();},extend:function(d,c){for(var e in c){d[e]=c[e];}},prefix:function(e,d){var b=e.slice(0,1).toUpperCase()+e.slice(1),g=["Webkit","Moz","O","ms"];
for(var c=0,a=g.length;c<a;c++){var f=g[c];if(typeof(d||document.body).style[f+b]!=="undefined"){return f+b;}}return e;},addClass:function(b,a){b.className=b.className.replace(/\s+$/gi,"")+" "+a;
},removeClass:function(b,a){b.className=b.className.replace(a,"");},bindEvent:function(a,c,b){if(a.addEventListener){a.addEventListener(c,b,false);}else{a.attachEvent("on"+c,b);
}},unbindEvent:function(a,c,b){if(a.removeEventListener){a.removeEventListener(c,b,false);}else{a.detachEvent("on"+c,b);}},dispatchEvent:function(b,c,a){if(b){var d=document.createEvent("HTMLEvents",1,2);
d.initEvent(c,true,true);Meny.extend(d,a);b.dispatchEvent(d);}},getQuery:function(){var a={};location.search.replace(/[A-Z0-9]+?=([\w|:|\/\.]*)/gi,function(b){a[b.split("=").shift()]=b.split("=").pop();
});return a;}};if(typeof Date.now!=="function"){Date.now=function(){return new Date().getTime();};}


var meny = Meny.create({
menuElement: document.querySelector( '.meny' ),
contentsElement: document.querySelector( '.contents' ),
position: Meny.getQuery().p || 'left',
height: 200,
width: 260,
threshold: 40
});
if( Meny.getQuery().u && Meny.getQuery().u.match( /^http/gi ) ) {
var contents = document.querySelector( '.contents' );
contents.style.padding = '0px';
contents.innerHTML = '<div class="cover"></div><iframe src="'+ Meny.getQuery().u +'" style="width: 100%; height: 100%; border: 0; position: absolute;"></iframe>';
}

//]]>
</script>
Cambia las URLs de los enlaces y los nombres de los mismos donde se indica en color rojo. Luego guarda los cambios y listo.

Si quisieras agregar más enlaces sólo pon antes de </ul> una línea como esta por cada enlace extra que desees:
<li><a href='URL del enlace'>Texto del enlace</a></li>

Adicionalmente puedes cambiar la orientación de la página cuando se voltea, puede ser a la izquierda como está por defecto, a la derecha, arriba o abajo. Eso se modifica donde dice left en el último código y podrás cambiarlo por right, top, o bottom

Si tuvieras mucho contenido a lo largo entonces se verá mejor si lo cambias por top o bottom, aunque también cambiará la orientación del menú.


185 comentarios en:

" Meny, un menú deslizante que voltea al blog en 3D "

  1. Muy bien explicado, aunque no lo pondré en mi blog ( www.pasionblogger.com.ar) me parece que ya esta demasiado cargado como para ponerle mas cosas, pero es bueno saber que se pueden hacer cosas así.

    ResponderEliminar
  2. Gracias Potro!... y perdón pero este... es un menú chingon...

    ResponderEliminar
  3. Naaaaa.... Excelente, ya me pongo a probarlo. Sos un genio maestro.

    ResponderEliminar
  4. Potro sos único!! Guau veré si lo aplico ^^
    Besitus!!

    ResponderEliminar
  5. Un menu muy bueno, pareciera que todo el efecto fuera completamente con css3.

    ResponderEliminar
    Respuestas
    1. Y seguro se puede hacer sólo con CSS3, a ver si algún valiente se anima a hacerlo :D

      Eliminar
  6. wow intentare aplicarlo, aunque no se me acaba de dar bien,jeje
    gracias potro como siempre por enseñarnos tantoo!
    Lindo martes , besines

    ResponderEliminar
  7. Excelente!

    POTRO: deverias de hacer un tuto sobre hospedaje de godaddy.com o cualquier empresa que sea compatible con blogger :)

    Saludos!

    ResponderEliminar
    Respuestas
    1. Ya tengo un tutorial sobre name.com que de hecho es una de las empresas más utilizadas por usuarios de Blogger :)

      Eliminar
  8. Hola, llevo un tiempo prolongado queriendo implantar estos menos , pero estoy convencida es imposible! Veo tanto codigo y letra que honestamente me doy por vencida!! no hay otras formas mas faciles , un camino mas corto ? Saludos,Se que realizas un magnifico trabajo , pero en mi caso y se que hay otras peronas mas que lo han intentado sin exitos! RM

    ResponderEliminar
    Respuestas
    1. Hola RoseMarie, desconozco si haya otro método más fácil para instalar este menú, pero mejor hagamos esto, intenta ponerlo, si algo sale mal deja un comentario aquí mismo con el nombre del blog donde lo has colocado para que veamos cómo podemos ayudarte ;)

      Eliminar
    2. Hola rose se ve complicado pero en realidad es algo muy sencillo igual la primera vez que vi todos esos codigos crei que era imposible pero practica tantito y vas a ver que lo logras claro antes de hacerle cualquier cambio a tu blog guarda un respaldo por si algo sale mal lo puedas recuperar saludos y si se puede ! :)

      Eliminar
  9. Respuestas
    1. Hola Potro una pregunta porque al colocar este menú en mi blog y ejecutarlo me aparece como en un inicio a beben koben, (dos barras de desplazamiento verticales) veo que beben koben ya lo resolvió, observo que tiene una linea horizontal en la parte inferior, ojalá me puedas dar un tip para que agregue dicho menú, saludos y muchas felicidades por tu trabajo.

      Eliminar
    2. No lo veo puesto en tu blog Sergio, no pude ver lo que mencionas.

      Eliminar
  10. Potro, voy a la pagina de prueba que has hecho, el menu sale pero no veo que la imagen gire en 3D como se ve en la imagen. Uso Chromium

    ResponderEliminar
    Respuestas
    1. No tengo ese navegador, pero supongo que al igual que casi todos los plugins y scripts sólo tienen soporte para los navegadores conocidos :/

      Eliminar
  11. Gracias por ponerlo Potro!! :D

    ResponderEliminar
  12. Estupendo! Luce bastante bien. Gracias por compartir.

    Un abrazo Potro.

    ResponderEliminar
  13. Hola Potro.
    Me gusta mucho el efecto pero no soy amigo de tanto código... aunque, quien sabe, el día menos pensado le encuentro utilidad en mi página.
    Gracias de nuevo ;)
    Un saludo.

    ResponderEliminar
    Respuestas
    1. No es tanto código como parece, son sólo 8Kb del script ;)

      Eliminar
  14. Hola, las letras y links que pongo se quedan arriba cuando bajo el scroll, es normal?

    ResponderEliminar
    Respuestas
    1. Habría que verlo puesto para entender bien a qué te refieres y si es que es normal o no.

      Eliminar
    2. A lo que me refiero es que, cuando tu abres el menu "Meny" y bajas con el scroll de la pagina el contenido que he escrito se queda arriba y, tambien pasa cuando no tienes el "Meny" abierto, la flecha se queda arriba

      Eliminar
    3. A y, aunque la verdad no me importa, a veces no se ve la flecha

      Eliminar
    4. Insisto que tengo que verlo puesto pues en los blogs de pruebas donde lo coloqué no encontré el problema que mencionas :/

      Eliminar
    5. pues miralo en f1dcenter.blogspot.com, prueba a irte a abajo de la pagina y abrir el menu Meny, no funciona

      Eliminar
    6. Es normal, recuerda que por eso se menciona que queda mejor cuando el contenido de la portada es muy reducido, cuando no entonces se aconseja ponerlo arriba o debajo.

      Eliminar
  15. Una pregunta ¿qué diseño de plantilla usaste en el blog de prueba para que quede EXACTAMENTE así?

    ResponderEliminar
    Respuestas
    1. Es la plantilla "Simple" de Blogger, la que es color blanco.

      Eliminar
    2. Perdón ¿y si quiero solo el menú sin el efecto 3D, como hago? ¿se puede eliminar parte del código para eso?

      Eliminar
    3. No sé decirte, no he probado realizar ninguna variante de este menú :/

      Eliminar
  16. excelente bachata urbana. net gracia a ciudad de blogger

    ResponderEliminar
  17. ¡Hey potro, Cómo estás! ¿Me prodrías hacer un favor?: ¿Me podrías pasar el xml de la plantilla que usaste en el blog de pruebas? Me lo puedes pasar por correo: as75534@gmail.com.

    Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. No es necesario Abraham, es la plantilla Simple de Blogger ;)

      Eliminar
  18. Hola potro y se puede poner en una entrada????

    ResponderEliminar
  19. Q hermoso queda! gracias Potro! saludos a la City!

    ResponderEliminar
  20. ufff...me empiezas ha hacerme arrepentirme de pasarme a wordpress potro :)

    ResponderEliminar
  21. excelente sera que puedo tener 2 menus este y el otro que aplique de menu deslizante arriba del blog (http://ciudadblogger.com/2011/01/menu-deslizante-arriba-del-blog.html) porfa dime si es posible

    ResponderEliminar
    Respuestas
    1. Supongo que sí, tendrías que intentarlo para saber la respuesta. Pero no olvides no duplicar el script de jQuery, si lo pones una vez ya no será necesario ponerlo de nuevo.

      Eliminar
  22. Hola potro, como te ha ido?

    Oye puedo agregar sub menus?

    Otra cosa que me intriga es la pestañita en la que tienes que dar click para deslizar el menú, es decir no hay nada que indique que tengas que darle click ahi para desplazar el menú; esto te lo comento porque a mi blog entra mucha gente que no esta tan familiarizada con este tipo de formatos o incluso con el uso de la computadora :s se puede hacer algo al respecto sin necesidad de meter una caja de aviso?

    ResponderEliminar
    Respuestas
    1. No se me ocurre qué más podrías poner, la flecha a mí me parece visible y discreta, quizás podrías poner un menú no "tan importante" en caso de que no lo vean, quizás sólo los enlaces a las redes sociales, o algo así.
      Los submenús no, no tiene esa opción.

      Eliminar
  23. exelente trabajo amigos de ciudad blogger, ase dias les envie un twit de como recuperaba mi nombre de dominio, lo que pasa es que en mi cunta de blogger tengo varios blogs y accidentalmente borre el que tenia el dominio www.shellomrock.com como le hago para volver a recuperarlo y usarlo en el otro blog de la misma cuenta, www.shellomrock.blogspot.com

    cualquier sugerencia mi correo es admin@shellomrock.com

    ResponderEliminar
    Respuestas
    1. Hola, hace ya varios días te respondí por Twitter :)
      Saludos.

      Eliminar
  24. Como siempre aprovechamos casi todo para nuestros blog, gracias una vez más.
    saludos

    ResponderEliminar
  25. Oiii.. não consigo adicionar ao meu blog. =/

    ResponderEliminar
    Respuestas
    1. Sólo tienes que seguir los pasos que se indican en el post, si continua el problema dime en cuál blog lo has puesto.

      Eliminar
  26. Muy buen aporte, siempre busco las cosas en esta web.
    estoy creando mi blog y estoy haciendo algunas modificaciones al código para que se vea mejor con mi fondo.

    el problema esta en que a mi no me sale el fondo negro sino el que tiene mi blog y he cambiado el color donde pone
    background: #080620;
    color: #080620; /* Color de fondo del menú */
    me puedes explicar donde lo cambio?
    http://terapiasport.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Lo que sucede es que has puesto comentarios en los estilos que no deben ir así, por eso no toma ningún estilo que agregues, debes quitar esos comentarios o cambiarlos por los correctos:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
    2. Muchas gracias, mañana pruebo. Suelo poner comentarios para poder saber donde esta cada cosa ya que sino cuando quiera cambiar algo no sabría donde ir. Intentare evitarlos lo más posible.

      Eliminar
    3. Otra cosa, se puede cambiar la flecha y poner una palabra (por ejemplo menú)?

      Eliminar
    4. No, no es necesario evitarlos, puedes ponerlos pero de otra manera, ahí en la entrada verás cómo ponerlos cuando se trata de los estilos CSS.
      Lo otro no lo he probado, quizás podrías hacer una imagen con la palabra menú y poner debajo de .meny-arrow { el fondo de la imagen;
      background: url(URL de la imagen) center no-repeat;

      Eliminar
  27. potro me empiezas a asustar con tanto conocimiento. Me encanto la idea pero no se que urls poner. No quiero quitar los menus que ya tengo y quiero poner ese tambien ya que se ve genial. ¿que urls me recomiendas que ponga sin repetir o quitando lo menos posible
    http://juan-el-super-gv.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. Tendrás que elegir los que creas convenientes. Yo pondría las redes sociales, pero eso es elección personal :)

      Eliminar
  28. Hola Potro: se puede agregar sub-menu? y si se puede cual seria el codigo? Gracias

    ResponderEliminar
  29. Hola de nuevo potro, para meterle una sección para gagdets que sea compatibles con todo tipo de gagdets que hago?

    ResponderEliminar
    Respuestas
    1. No lo he intentado, pero quizás debas añadir debajo de <div class='meny'> una sección de gadgets:

      <b:section class='menymenu' id='menymenu'/>

      Eliminar
  30. Hola Potro, oye si no es mucha molestia podrías decirme que programa usas para personalizar las imágenes de tus post, te quedan super lindas, gracias de antemano...

    ResponderEliminar
  31. Hola Potro, oye si no es mucha molestia podrías decirme que programa usas para personalizar las imágenes de tus post, te quedan super lindas, gracias de antemano...

    ResponderEliminar
  32. Tenemos un consulta que NO tiene nada que ver con esta publicación, pero nos gustaría contar con tu ayuda!!
    Tenemos una pagina web (http://www.rayandoelsolfanclub.com.ar)y como podrás ver cada ves que hacemos un publicación con una imagen aparece en nuestra pagina de inicio pero hay dos publicaciones que contienen imágenes pero no aparecen en el inicio! nuestra consulta es la siguiente: ¿A qué se debe?, ¿Se puede solucionar? ¿Cómo?
    Muchas gracias de ante mano por tu tiempo!.
    Saludos!

    ResponderEliminar
    Respuestas
    1. Desconozco por qué suceda, no sé si en esa plantilla tengas que crear las entradas de una manera específica. Tal vez debas revisar los códigos de esas entradas y ver qué tienen de distinto a las demás.

      Eliminar
  33. Hola Potro Mi Pregunta No Tiene Nada Que Ver Con Este Post, Es Que Si Lo Hago En Otro Quizás No Leas Los Comentarios ;) Conseguí Un Menú Desplegable Con FlashVortex.com Necesitaría Como Sacar El Que Trae En La Plantilla Y Colocar El Codigo De FlashVortex En El Lugar La Plantilla Es Mimoza De Lasantha Bandara
    Te Paso El Link No Se SI Tienes Cosas Protegidos Por Derecho De Autor Te Dejo El Link http://coastervilleregalos.blogspot.com

    ResponderEliminar
    Respuestas
    1. Todos los comentarios se leen y se responden Tomasito, sin importar qué tan antigua sea la entrada.
      De cualquier forma parece que ya has sabido cóm hacerlo ;)

      Eliminar
  34. Saludos, me gusta el apoyo que muestra está página para el mejoramiento del blog.

    ResponderEliminar
  35. Te voy a hacer una pregunta que no tiene nada que ver con esta entrada. Está relacionada con una que hiciste hace tiempo de como personalizar Linkwithin, y a mí me gustaría aumentar el tamaño de las imágenes que se ven, ¿se podría hacer? :)

    ResponderEliminar
    Respuestas
    1. Hola María, deja la pregunta en esa entrada para no desviarnos del tema de este post.
      Saludos.

      Eliminar
  36. Hola El Potro, tengo un pequeño problema y no va con lo que presentas en esta entrada. En el post-footer de mis entradas no se ve el: "Escrito por" y sí lo veo al seleccionarlo. ¿Como puedo cambiarlo de color para que se pueda ver?
    Gracias como siempre.
    Saludos desde Vitoria.

    ResponderEliminar
  37. Excelente post!
    oye me gustaria saber si tienes algun post que pueda ayudarme, visite una pagina y me encanto su intro es esta:

    http://hellocuteness.com/

    quisiera un intro igual a ese, donde tenga botones para las redes sociales y otro para entrar al blog, podras ayudarme?

    ResponderEliminar
    Respuestas
    1. No he visto ningún intro ahí, pero sólo tengo estos dos métodos:
      http://ciudadblogger.com/2011/05/crear-un-intro-para-el-blog.html
      http://ciudadblogger.com/2012/01/crear-un-intro-para-el-blog-con-jquery.html

      Eliminar
  38. Muchas gracias por toda la ayuda que recibimos de tus aportes. La verdad es que me han ayudado a dar un acabado un poco más profesional a mi blog. Me gustaría preguntarte algo sobre blogs. Me gustaría cambiar todas los bordes de la estética del blog (todos los bordes me refiero a lo exterior de la entradas, columnas de las páginas, gadgets, etc) he estado buscando y no he encontrado mucho, ya que no tengo mucha idea de html. La pregunta es, ¿Sabrías cambiar las imágenes de los bordes?
    Un saludo y gracias de antemano!

    ResponderEliminar
    Respuestas
    1. Hola Lachcis, si usas una plantilla original de Blogger entonces desde Personalizar (en Plantilla) puedes cambiar los colores y demás estilos.
      Saludos.

      Eliminar
  39. Tu blog me ha ayudado bastante para arreglar el mío.

    Tengo una duda que me mata el alma jajaja. En las entradas de mi blog tengo un espacio mundial entre el título y el cuerpo. Sabes dónde debo editar el HTML para acortar esa diferencia abismal?

    http://elplayeruno.blogspot.com/2013/01/dmc-no-hay-espacio-para-la-nostalgia.html

    ResponderEliminar
    Respuestas
    1. Es por los botones de compartir que no se ven. Añade estos estilos:
      .share-button {display: inline-block;}

      Eliminar
  40. Hola, me gusta tu blog, te podría pedir si puedes hacerme una plantilla para blogger, te estaría muy agradecida. Gracias por tu atención.

    ResponderEliminar
    Respuestas
    1. Hola Kirumuri, el trabajo de diseño de plantillas a petición es con costo, el precio varía dependiendo del tipo de plantilla que quieras, elementos, etc.
      Si quieres plantillas gratuitas hay muchas en btemplates.com
      Saludos.

      Eliminar
  41. hola que genial lo hice por ahora empezando quiero hacer un "SLIDING DIVS" creo que se llama asi mira algo asi como el de este blog http://thegirlins.blogspot.com/ debajo de la barra de menu.. no se si me puedan ayudar :D

    ResponderEliminar
    Respuestas
    1. Hola Laura, mira la categoría "Slideshows" ahí encontrarás varios sliders que te pueden servir.

      Eliminar
  42. Potro querido, antes que nada agradecerte por los consejos que tirás! la verdad es que estamos armando una plataforma nueva para nuestro blog y usamos muchos de tus trucos. Sos una referencia importantísima para nosotros.

    Ahora bien, por primera vez necesitamos hacerte una pregunta.
    Ya casi tenemos lista nuestra nueva plataforma y estamos a punto de lanzarla, fijate que tenemos una nota principal y a partir de ahí empiezan filas de dos notas, entre fila y fila nos queda mucho espacio y no logramos achicarlo. Vos sabrás qué deberíamos tocar en el código para solucionar esto?

    http://xsantinos.blogspot.com.ar/

    Gracias!!!!

    ResponderEliminar
    Respuestas
    1. Muchas gracias :)
      No sé si ya lo hayas resuelto porque he entrado pero no veo ningún espacio que esté de más, todo lo veo en orden con las separaciones ideales.
      ¡Saludos!

      Eliminar
  43. Hola, Potro, una pregunta: ¿hay alguna forma de hacer un poco más bonito el cuadro de comentarios de debajo de las entradas, sin esos espacios feos?

    ResponderEliminar
    Respuestas
    1. ¿La caja en sí? Nop, es un iframe que no se puede cambiar mucho.

      Eliminar
  44. Oye, Potro, ¿cómo se puede hacer que solo aparezca el menú cuando esté el cursor a la izquierda del todo? Quiero decir, que no se abra al tan solo acercar el cursor a la izquierda.

    ResponderEliminar
    Respuestas
    1. Tal vez cambiando el width: 260, que está dentro del script.

      Eliminar
  45. Hola, ¿me podrías ayudar con una duda?

    ¿Me podrías ayudar con este código?
    http://www.theblondesalad.com/looks

    quiero poner mis entradas como ella, en cuadraditos. Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola María, mira esta entrada de Karla:
      http://www.compartidisimo.com/2011/09/como-crear-entradas-resumidas-mostrando.html

      Eliminar
  46. Hola quisiera saber por que el menú me quedo asi. Este es mi blog: http://www.trucosmundogaturro.com.ar/
    Espero tu respuesta.

    ResponderEliminar
  47. hola!
    Me gustaría saber tu opinión sobre las plantillas de Blogger. Hace tiempo que me estoy planteando volver a las plantillas de blogger porque son mas fáciles de personalizar pero algunas webs dicen que las plantillas de blogger son malas y son mejor las externas de btemplates.con por ejemplo.
    Que opinas?
    Gracias!

    ResponderEliminar
    Respuestas
    1. Lo bueno y lo malo es relativo. Yo diría que si quieres personalizar la plantilla uses una de Blogger, si quieres que ya esté personalizada y no hacerle nada más entoces una externa.

      Eliminar
  48. Hola, gracias por el menú molón!lo estoy intentando meter y blogger pasa de mí pq dide que hay un problema con la etiqueta . ¿sabes de qué va?. Agradecidaaa

    ResponderEliminar
    Respuestas
    1. Puede ser que estés omitiendo un paso o que al colocar los códigos hayas eliminado otros caracteres.

      Eliminar
  49. Hola Potro:

    Soy seguidor de tu blog y alguna vez te he pedido consejo. Me parece estupendo al mismo tiempo que agradezco la ayuda que nos ofreces. Tengo un blog que últimamente cuando accedo se desliza hacia abajo y no puedo ver la entrada más reciente, con lo cual cada vez que alguien entra tiene de deslizarse hacia arriba para leer la última entrada. ¿A que puede ser bebido? ¿Hay alguna manera de solucionarlo?

    www.aladins.eu

    ResponderEliminar
    Respuestas
    1. Hola, ¿recuerdas qué fue lo último que añadiste antes de que eso sucediera? porque quizá algún script o gadget es el causante así que eliminándolo debería resolverse.

      Eliminar
  50. Hola de nuevo, por fin despues de mucho rastrear he dado con el gadget que me daba problemas. Lo he suprimido y parece que todo funciona correctamente. Lo tenía desde hace mucho tiempo y no recuerdo haberlo modificado. Te lo dejo por si puedes ver algún error. Es un reproductor que me servia para dar una pequeña introducción musical al entrar en el blog. Mil gracias Potro.

    ResponderEliminar
  51. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola xavyalex, añade estos estilos:
      #HTML1 {margin-top:0px}

      Pd. Elimino el comentario por el aviso que está al final.
      Saludos.

      Eliminar
  52. Muy buen aporte antes de nada.
    Ahora mi duda. He estado intentando personalizar un poco el código pero no he conseguido cambiar el color de la fuente del texto de enlace. ¿Donde se podría cambiar?
    ¿Sería posible sustituir ese texto por una imagen?

    Muchas gracias por todo.

    ResponderEliminar
    Respuestas
    1. En realidad no tiene color definido, toma el color de los enlaces de tu blog. Sí puedes cambiarlos por una imagen, sólo pon el código de la imagen en lugar del texto.

      Eliminar
  53. potro se murió el efecto.... T.T
    que pasó??? estaba super bueno.... derepente dejó de funcionar, incluso en tu blog de pruebas el efecto no se logra....

    ResponderEliminar
  54. QUIERO SABER como mejorar un poco el menu vertical lo que pasa es q es muy sencillo el resto bn pero lo aplique ami blog de prueva

    ResponderEliminar
    Respuestas
    1. Puedes usar los estilos que quieras, eso ya depende de cada quien, los estilos de esa área se agregan o modifican dentro de:
      .meny ul li {

      Eliminar
  55. hay alguna forma para que sobresalga un poco mas la flechita para que sea mas vistosa y la gente se de cuenta que esta el menu hay??

    ResponderEliminar
  56. Muy lindo y todo, pero... ¿Porque no baja con el blog?

    ResponderEliminar
    Respuestas
    1. Porque su función no es bajar mientras está activo, sólo mostrar el menú cuando se necesite.

      Eliminar
  57. Hola, Potro:
    ¡No hay caso, no puedo encontrarte! ¡ja,ja,ja!
    El asunto es el siguiente. Estoy haciendo un blog, "Ésto es recuerdos.". Con recopilaciones de videos musicales, biografías de Artistas, fotografías de cosas de los ´60, ´70, y ´80, etc. Según cómo lo voy llevando considero que al final, el blog va a contar con unas 500 entradas. Y no se como las voy a ordenar en el Menú. Probé con los distintos menúes con Sub Pestañas, inclusive. Pero choco con ésa dificultad. Dónde poner tantas URL. La dirección del blog es: http://simimemorianofalla.blogspot.com.ar/ por si querés visitarlo para ver el terreno. ¡Un abrazo y espero por la respuesta! ¡Gracias, Potro!

    ResponderEliminar
    Respuestas
    1. Hola Oscar, hace poco te respondí esa pregunta en esta entrada:
      http://ciudadblogger.com/2012/07/menu-horizontal-con-submenus-en-dos-columnas.html

      Sólo recuerda que hay que dar click en "Cargar más" para ver todos los comentarios ;)
      Un abrazo.

      Eliminar
  58. Hola El potro. tengo problema con menu, una vez realize los paso, cuando guarde la plantilla me dijo que tenia un error en la línea 1094, columna 61: The reference to entity "list" must end with the ';' delimiter. esta parte la resolvi. pero no veo el menu.

    ResponderEliminar
    Respuestas
    1. Hola Jose, significa que cuando añadiste los enlaces del menú dejaste mal cerrado un código. Ponlo tal como está, ya que veas que no te da error personaliza poco a poco apoyándote en la Vista Previa.

      Eliminar
  59. Hola El potro, cuandoa agrego este menu me sale: Error al analizar XML, línea 930, columna 3: The element type "body" must be terminated by the matching end-tag "/body".

    ResponderEliminar
    Respuestas
    1. Hola Juan David, el error indica que no has puesto el código completo, algo te está faltando.

      Eliminar
  60. disculpa lo e probado pero me sale en el blogger algo del código en la cabecera if( Meny.getQuery().u && Meny.getQuery().u.match( /^http/gi ) ) {
    var contents = document.querySelector( '.contents' );
    contents.style.padding = '0px'; a que se deve esto :3 espero me ayudes a sale aun mas código

    ResponderEliminar
    Respuestas
    1. Si eso te aparece en el blog entonces no está colocado correctamente. Revisa el lugar exacto donde tienes que coocarlo.

      Eliminar
  61. SALUDOS.

    YO TENGO UNA CUENTA CON GOODADDY Y UN DOMINIO OBVIAMENTE, PERO NO SE COMO SE PODRIA APLICAR ESTO? ESTA PAGINA ME DA OPCION DE PONER HEAD Y BODY... SALUDOS. GRACIAS

    ResponderEliminar
  62. SALUDOS.

    QUISIERA APLICAR ESTO A MI PAGINA WEB CON GOODADDY ELLOS ME DAN LA OPCION DE HEAD Y BODY. GRACIAS.

    ResponderEliminar
    Respuestas
    1. Hola ABNER, sólo lo he probado con Blogger, pero visita la página del autor, ahí verás el original que se supone es para páginas webs.

      Eliminar
  63. Instale "Meny" todo bien mola un montón pero no se si es porque tengo una netbook y por eso se ve así, en el página principal del blog se ven 2 barras en vez de 1, que puedo hacer Potro??

    ResponderEliminar
  64. En mi blog si quisiera que salga en el menú "jóvenes promesas"y dentro diferentes entradas. Como lo haria.
    Mi blog es solofifaplay3
    Gracias Potro

    ResponderEliminar
  65. como es eso del texto del enlace no lo entiendo

    ResponderEliminar
  66. Hola, ¿el efecto debería verse en el blog de pruebas? no lo veo.

    ResponderEliminar
  67. Hola Potro, sólo comentar mi agradecimiento por tus aportaciones. Ya me has solucionado más de una duda en mis blogs.

    ResponderEliminar
  68. ¡Hola! Excelente el menú. Estoy queriendo ver la forma de ponerle una scrollbar para poder hacer un SiteMap ahí, ya que mi blog ya tiene su Menu Bar y quisiera dejársela. ¿Hay forma?

    Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Grisel, ¿un scroll bar al menú? no lo he intentado, quizás sea posible si pones debajo de .meny { esto:

      overflow:auto;
      height:700px;

      Eliminar
  69. OYE URGENTE NO PUDE NO CARGA Y HE TRATADO VARIAS VECES Y NO ME DEJA !!

    ResponderEliminar
  70. muajajaja.... FUNCIONAAA!!!

    gracias... me gusto mucho. :)

    ResponderEliminar
  71. Potro, qué pena lo de tu pausa, te vamos a echar de menos. Este menú es genial, me encanta, una pena que no tenga submenús. Tú crees que se podrían habilitar de algún modo?

    ResponderEliminar
    Respuestas
    1. Hola Sergio, con un poco de experimentación sí podrías añadirle subpestañas, todo está en que tomes como ejemplo un menú vertical sencillo con subpestañas y lo adaptes al de este menú comparando los códigos y experimentando un poco.

      Eliminar
  72. Hola... de todos los menú sin duda este es el mejor, aunque hay algo que no se si yo estoy haciendo mal o es parte del código. Me aparece una doble barra de desplazamiento vertical, si quito el menú desaparece pero si lo coloco aparece nuevamente la segunda barra :C help me please.

    ResponderEliminar
    Respuestas
    1. Hola Javier, ¿tienes añadido algún script que modifique de alguna manera el scroll de tu blog? ¿en cuál blog tienes ese problema?

      Eliminar
  73. No puedo encontrar ]]>
    Solo me aparece que puedo hacer?

    ResponderEliminar
  74. Respuestas
    1. Dale click a la flecha que está junto a <b:skin>...</b:skin>, ahí lo encontrarás.

      Eliminar
  75. Gracias por el menu, en realidad se ve muy vistoso.
    Solo dos aclaraciones. Para poner gadgets es necesario poner este codigo debajo de div class='meny'





    Y la otra
    Este menu no funciona con tu truco de Slidshow de imagenes como fondo de blog. Las imagenes se cortan y pierde mucha calidad. Saludos!

    ResponderEliminar
    Respuestas
    1. No he podido ver el código Alejandro. Lo segundo no lo he probado, supongo que no son compatibles ambos scripts. Gracias por la aclaración.
      Saludos.

      Eliminar
  76. Buenas tardes caballero.

    Lamentablemente no funciona el código. Debe de haber algo mal en su edición html, lo he intentado 5 veces (evidentemente he creado un blog de pruebas), y me aparece el siguiente mensaje:

    Error al analizar html, línea 1075, columna 3: The element type "html" must be terminated by the matching end-tag". html

    He seguido todos los pasos, lo he colocado perfectamente pero no funciona. Lo he probado con diferentes estilos de plantillas, diferentes diseños, y sigue apareciendo el mismo error.

    La plataforma Blogger ha sufrido diferentes cambios en el último año y muchos códigos han dejado de funcionar (al igual que el código de los iconos de redes sociales giratorios, tampoco funcionan). Compruébalo creando un nuevo blog de pruebas.

    ResponderEliminar
    Respuestas
    1. Siento contradecirte Melodie pero el menú sigue funcionando a la perfección.
      Saludos.

      Eliminar
  77. Tampoco me funciona el menú orizontal con buscador
    Que hago?

    ResponderEliminar
  78. Buenas noches Potro, que código puedo utilizar en blogger para que acepte el caracter &, ya que cuando viene en los script siempre me los rechaza, de antemano gracias

    ResponderEliminar
    Respuestas
    1. Cualquiera, sólo cambia el & por &amp;

      Eliminar
    2. Buenas noches Potro, amabilisimo de tu aprte lo probaré y en cuanto vea el resultado te lo informo....otra pregunta...
      He utilizado muchos hacks para IE7, IE8, IE9, IE10 e IE11, para la compatibilidad de CSS con Internet Explorer y no he podido hacer que se vean iguales, cual es tu experiencia al respecto?..y/o soluciones que recomiendas.
      Gracias de antemano.

      Eliminar
    3. Es difícil FERNANDO, mientras IE se siga rehusando a modernizar su navegador no podremos hacer que los elementos se vean siempre de la misma manera en todos los navegadores, especialmente en IE. Yo personalmente no le doy mucha importancia, de cualquier manera los usuarios de IE están acostumbrados a ver las cosas medio mal, y si quisieran ver una página como debe ser ya se hubieran cambiado de navegador ;)

      Eliminar
    4. Muchísimas gracias Potro, por considerar mi comentario y los de los demás, es muy motivante siempre entrar a tu blog, se aprende mucho acerca de los códigos y su aplicación, en lo personal siempre batallo con los scripts, traen cada caracter que me rompen la cabeza decifrarlo, pero gracias a tu ayuda lo haces muy sencillo, me pregunto, tienes facebook o twitter?

      Eliminar
    5. Sí, Facebook y Twitter, de hecho hasta arriba del blog están los iconos de esas redes sociales.
      Saludos y gracias por tu comentario.

      Eliminar
  79. Buen día Potro, tuve un problema con los estilos, no sale ninguno :s que puedo hacer :S

    Ayúdame, este menú esta re bueno u.u

    http://tst-02.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola Xml3D, arriba de los estilos del menú tienes esto:
      .avatarauthorright span { margin-top:-5px;)

      Si te fijas ese cierre no es una llave } sino un paréntesis. Ese error afecta a todos los estilos que haya abajo.

      Eliminar
    2. aaa Graciasss, eres el Mejor!

      Eliminar
  80. hola una pregunta porque me agrega otra barra lateral

    ResponderEliminar
    Respuestas
    1. Hola carlos, el menú sólo agrega la barra del menú que se despliega, no agrega más elementos.

      Eliminar
  81. Saludos El Potro. Necesito ayuda. ¿cómo puedo ponerle un link o enlace al fondo de mi blogger?

    Me refiero a ese espacio que no contemplan los gadgets de blogger como el Javascrip. Creo que es meterse de lleno a la estructura de la plantilla. Sinceramente ya intenté muchas formas y simplemente no doy con la solución.
    Ojalá me pueden ayudar, mucgas gracias y saludos.

    ResponderEliminar
    Respuestas
    1. Hola, el body no puede tener un enlace, no es posible desde HTML.

      Eliminar
  82. Saludos, okas. entonces se puede poner una especie de imagen que simule el fondo y ponerle un link?

    ResponderEliminar
    Respuestas
    1. Una opción es que pongas dentro de tu etiqueta BODY este código:
      onclick="window.open('http://google.com'); return false;" onkeypress="window.open('http://google.com'); return false;"

      Pero eso hará que la página se abra con cualquier click que se haga, ya sea dentro o fuera del cuerpo del blog. Eso podría ser bastante molesto para el usuario.

      Eliminar
  83. Agradezo la atenció, pero no funcionó. La puse incluso imediatamente arriba de body (cierre de etiqueta) y no jaló

    :-/

    ResponderEliminar
    Respuestas
    1. No va arriba sino DENTRO, es decir, aquí dentro: <body>

      Eliminar
  84. Okas, lo pruebo de esa manera. Muchas gracias por la ayuda y tiempo El Potro. Eres muy amable

    ;)

    ResponderEliminar
  85. hola Potro, muy buen aporte pero no me funciona con Chrome, que puedo hacer para que sea compatible con este navegador

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger