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 MenuLuego busca la etiqueta <body> o esta línea:
----------------------------------------------- */
.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;
}
<body expr:class='"loading" + data:blog.mobileClass'>Debajo de cualquiera de las dos agrega lo siguiente:
<div class='meny'>Por último añade antes de </body> este código:
<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'>
</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ú.
Ciudad Blogger
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í.
ResponderEliminarGracias Potro!... y perdón pero este... es un menú chingon...
ResponderEliminarEsa descripción es más correcta que la mía :)
EliminarEste comentario ha sido eliminado por el autor.
EliminarNaaaaa.... Excelente, ya me pongo a probarlo. Sos un genio maestro.
ResponderEliminarPotro sos único!! Guau veré si lo aplico ^^
ResponderEliminarBesitus!!
BUEN APORTE POTRO DE NUEVO TE LA RIFAS!
ResponderEliminarUn menu muy bueno, pareciera que todo el efecto fuera completamente con css3.
ResponderEliminarY seguro se puede hacer sólo con CSS3, a ver si algún valiente se anima a hacerlo :D
Eliminarwow intentare aplicarlo, aunque no se me acaba de dar bien,jeje
ResponderEliminargracias potro como siempre por enseñarnos tantoo!
Lindo martes , besines
Excelente!
ResponderEliminarPOTRO: deverias de hacer un tuto sobre hospedaje de godaddy.com o cualquier empresa que sea compatible con blogger :)
Saludos!
Ya tengo un tutorial sobre name.com que de hecho es una de las empresas más utilizadas por usuarios de Blogger :)
EliminarHola, 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
ResponderEliminarHola 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 ;)
EliminarHola 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 ! :)
Eliminarhmmm...
ResponderEliminartry it
Meny
hihihi :D
Hehe, cool :)
EliminarHola 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.
EliminarNo lo veo puesto en tu blog Sergio, no pude ver lo que mencionas.
EliminarPotro, 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
ResponderEliminarNo tengo ese navegador, pero supongo que al igual que casi todos los plugins y scripts sólo tienen soporte para los navegadores conocidos :/
EliminarGracias por ponerlo Potro!! :D
ResponderEliminarEstupendo! Luce bastante bien. Gracias por compartir.
ResponderEliminarUn abrazo Potro.
Hola Potro.
ResponderEliminarMe 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.
No es tanto código como parece, son sólo 8Kb del script ;)
EliminarHola, las letras y links que pongo se quedan arriba cuando bajo el scroll, es normal?
ResponderEliminarHabría que verlo puesto para entender bien a qué te refieres y si es que es normal o no.
EliminarA 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
EliminarA y, aunque la verdad no me importa, a veces no se ve la flecha
EliminarInsisto que tengo que verlo puesto pues en los blogs de pruebas donde lo coloqué no encontré el problema que mencionas :/
Eliminarpues miralo en f1dcenter.blogspot.com, prueba a irte a abajo de la pagina y abrir el menu Meny, no funciona
EliminarEs 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.
EliminarUna pregunta ¿qué diseño de plantilla usaste en el blog de prueba para que quede EXACTAMENTE así?
ResponderEliminarEs la plantilla "Simple" de Blogger, la que es color blanco.
EliminarGracias! Lo suponía.
EliminarPerdón ¿y si quiero solo el menú sin el efecto 3D, como hago? ¿se puede eliminar parte del código para eso?
EliminarNo sé decirte, no he probado realizar ninguna variante de este menú :/
EliminarMuchas gracias Potro.
Eliminarexcelente bachata urbana. net gracia a ciudad de blogger
ResponderEliminar¡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.
ResponderEliminarGracias de antemano.
No es necesario Abraham, es la plantilla Simple de Blogger ;)
EliminarHola potro y se puede poner en una entrada????
ResponderEliminar¿Dentro del post? Nop, no lo creo.
EliminarQ hermoso queda! gracias Potro! saludos a la City!
ResponderEliminarufff...me empiezas ha hacerme arrepentirme de pasarme a wordpress potro :)
ResponderEliminarexcelente 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
ResponderEliminarSupongo 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.
EliminarHola potro, como te ha ido?
ResponderEliminarOye 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?
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í.
EliminarLos submenús no, no tiene esa opción.
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
ResponderEliminarcualquier sugerencia mi correo es admin@shellomrock.com
Hola, hace ya varios días te respondí por Twitter :)
EliminarSaludos.
Como siempre aprovechamos casi todo para nuestros blog, gracias una vez más.
ResponderEliminarsaludos
Oiii.. não consigo adicionar ao meu blog. =/
ResponderEliminarSólo tienes que seguir los pasos que se indican en el post, si continua el problema dime en cuál blog lo has puesto.
EliminarMuy buen aporte, siempre busco las cosas en esta web.
ResponderEliminarestoy 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/
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:
Eliminarhttp://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
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.
EliminarOtra cosa, se puede cambiar la flecha y poner una palabra (por ejemplo menú)?
EliminarNo, 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.
EliminarLo 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;
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
ResponderEliminarhttp://juan-el-super-gv.blogspot.mx/
Tendrás que elegir los que creas convenientes. Yo pondría las redes sociales, pero eso es elección personal :)
EliminarHola Potro: se puede agregar sub-menu? y si se puede cual seria el codigo? Gracias
ResponderEliminarNop, este menú no tiene esa opción.
EliminarHola de nuevo potro, para meterle una sección para gagdets que sea compatibles con todo tipo de gagdets que hago?
ResponderEliminarNo lo he intentado, pero quizás debas añadir debajo de <div class='meny'> una sección de gadgets:
Eliminar<b:section class='menymenu' id='menymenu'/>
Gracias =D
EliminarHola 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...
ResponderEliminarHola 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...
ResponderEliminarGracias Locomacho, las edito con Photoshop :)
EliminarTenemos un consulta que NO tiene nada que ver con esta publicación, pero nos gustaría contar con tu ayuda!!
ResponderEliminarTenemos 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!
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.
EliminarOk, Muchas gracias!!
EliminarHola 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
ResponderEliminarTe Paso El Link No Se SI Tienes Cosas Protegidos Por Derecho De Autor Te Dejo El Link http://coastervilleregalos.blogspot.com
Todos los comentarios se leen y se responden Tomasito, sin importar qué tan antigua sea la entrada.
EliminarDe cualquier forma parece que ya has sabido cóm hacerlo ;)
Saludos, me gusta el apoyo que muestra está página para el mejoramiento del blog.
ResponderEliminara
ResponderEliminarTe 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? :)
ResponderEliminarHola María, deja la pregunta en esa entrada para no desviarnos del tema de este post.
EliminarSaludos.
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?
ResponderEliminarGracias como siempre.
Saludos desde Vitoria.
Parece que ya lo has conseguido :)
EliminarExcelente post!
ResponderEliminaroye 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?
No he visto ningún intro ahí, pero sólo tengo estos dos métodos:
Eliminarhttp://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
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?
ResponderEliminarUn saludo y gracias de antemano!
Hola Lachcis, si usas una plantilla original de Blogger entonces desde Personalizar (en Plantilla) puedes cambiar los colores y demás estilos.
EliminarSaludos.
Tu blog me ha ayudado bastante para arreglar el mío.
ResponderEliminarTengo 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
Es por los botones de compartir que no se ven. Añade estos estilos:
Eliminar.share-button {display: inline-block;}
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.
ResponderEliminarHola 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.
EliminarSi quieres plantillas gratuitas hay muchas en btemplates.com
Saludos.
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
ResponderEliminarHola Laura, mira la categoría "Slideshows" ahí encontrarás varios sliders que te pueden servir.
EliminarPotro 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.
ResponderEliminarAhora 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!!!!
Muchas gracias :)
EliminarNo 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!
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¿La caja en sí? Nop, es un iframe que no se puede cambiar mucho.
EliminarOye, 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.
ResponderEliminarTal vez cambiando el width: 260, que está dentro del script.
EliminarHola, ¿me podrías ayudar con una duda?
ResponderEliminar¿Me podrías ayudar con este código?
http://www.theblondesalad.com/looks
quiero poner mis entradas como ella, en cuadraditos. Gracias de antemano.
Hola María, mira esta entrada de Karla:
Eliminarhttp://www.compartidisimo.com/2011/09/como-crear-entradas-resumidas-mostrando.html
Hola quisiera saber por que el menú me quedo asi. Este es mi blog: http://www.trucosmundogaturro.com.ar/
ResponderEliminarEspero tu respuesta.
No lo veo puesto en ese blog.
Eliminarhola!
ResponderEliminarMe 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!
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.
EliminarHola, 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
ResponderEliminarPuede ser que estés omitiendo un paso o que al colocar los códigos hayas eliminado otros caracteres.
EliminarHola Potro:
ResponderEliminarSoy 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
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.
EliminarHola 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.
ResponderEliminarQué bueno que has podido resolverlo :)
EliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarHola xavyalex, añade estos estilos:
Eliminar#HTML1 {margin-top:0px}
Pd. Elimino el comentario por el aviso que está al final.
Saludos.
Muy buen aporte antes de nada.
ResponderEliminarAhora 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.
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.
Eliminarpotro se murió el efecto.... T.T
ResponderEliminarque pasó??? estaba super bueno.... derepente dejó de funcionar, incluso en tu blog de pruebas el efecto no se logra....
Tal vez sea tu navegador, a mí me sigue funcionando o.o
Eliminaren chrome no se ve el efecto....
Eliminar:/
Yo uso Chrome y lo veo sin problema.
EliminarQUIERO 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
ResponderEliminarPuedes usar los estilos que quieras, eso ya depende de cada quien, los estilos de esa área se agregan o modifican dentro de:
Eliminar.meny ul li {
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??
ResponderEliminarNo sé me ocurre qué podría hacérsele :/
EliminarMuy lindo y todo, pero... ¿Porque no baja con el blog?
ResponderEliminarPorque su función no es bajar mientras está activo, sólo mostrar el menú cuando se necesite.
EliminarHola, Potro:
ResponderEliminar¡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!
Hola Oscar, hace poco te respondí esa pregunta en esta entrada:
Eliminarhttp://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.
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.
ResponderEliminarHola 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.
EliminarHola 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".
ResponderEliminarHola Juan David, el error indica que no has puesto el código completo, algo te está faltando.
Eliminardisculpa 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 ) ) {
ResponderEliminarvar contents = document.querySelector( '.contents' );
contents.style.padding = '0px'; a que se deve esto :3 espero me ayudes a sale aun mas código
Si eso te aparece en el blog entonces no está colocado correctamente. Revisa el lugar exacto donde tienes que coocarlo.
EliminarSALUDOS.
ResponderEliminarYO 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
SALUDOS.
ResponderEliminarQUISIERA APLICAR ESTO A MI PAGINA WEB CON GOODADDY ELLOS ME DAN LA OPCION DE HEAD Y BODY. GRACIAS.
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.
EliminarInstale "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??
ResponderEliminarNo sé decirte, desde mi ordenador lo veo bien :/
EliminarEn mi blog si quisiera que salga en el menú "jóvenes promesas"y dentro diferentes entradas. Como lo haria.
ResponderEliminarMi blog es solofifaplay3
Gracias Potro
Hola, este menú no tiene opción de subpestañas.
Eliminarcomo es eso del texto del enlace no lo entiendo
ResponderEliminarEs el nombre que le quieras poner a ese link.
EliminarHola, ¿el efecto debería verse en el blog de pruebas? no lo veo.
ResponderEliminarYo lo sigo viendo :/
EliminarHola Potro, sólo comentar mi agradecimiento por tus aportaciones. Ya me has solucionado más de una duda en mis blogs.
ResponderEliminarGracias a ti!
Eliminargracias por este gran aporte
ResponderEliminargracias por este gran aporte
ResponderEliminar¡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?
ResponderEliminarGracias!
Hola Grisel, ¿un scroll bar al menú? no lo he intentado, quizás sea posible si pones debajo de .meny { esto:
Eliminaroverflow:auto;
height:700px;
OYE URGENTE NO PUDE NO CARGA Y HE TRATADO VARIAS VECES Y NO ME DEJA !!
ResponderEliminarHola Milena, ¿en cuál blog lo has hecho?
Eliminarmuajajaja.... FUNCIONAAA!!!
ResponderEliminargracias... me gusto mucho. :)
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?
ResponderEliminarHola 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.
EliminarHola... 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.
ResponderEliminarHola Javier, ¿tienes añadido algún script que modifique de alguna manera el scroll de tu blog? ¿en cuál blog tienes ese problema?
EliminarNo puedo encontrar ]]>
ResponderEliminarSolo me aparece que puedo hacer?
que hagoooo no me aparece
ResponderEliminarDale click a la flecha que está junto a <b:skin>...</b:skin>, ahí lo encontrarás.
EliminarGracias por el menu, en realidad se ve muy vistoso.
ResponderEliminarSolo 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!
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.
EliminarSaludos.
Buenas tardes caballero.
ResponderEliminarLamentablemente 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.
Siento contradecirte Melodie pero el menú sigue funcionando a la perfección.
EliminarSaludos.
A mi no me funciona
ResponderEliminarTampoco me funciona el menú orizontal con buscador
ResponderEliminarQue hago?
¿En cuál blog no te funciona?
Eliminarno da igual ya no me ace falta
ResponderEliminartranquilo
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
ResponderEliminarCualquiera, sólo cambia el & por &
EliminarBuenas noches Potro, amabilisimo de tu aprte lo probaré y en cuanto vea el resultado te lo informo....otra pregunta...
EliminarHe 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.
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 ;)
EliminarMuchí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?
EliminarSí, Facebook y Twitter, de hecho hasta arriba del blog están los iconos de esas redes sociales.
EliminarSaludos y gracias por tu comentario.
Buen día Potro, tuve un problema con los estilos, no sale ninguno :s que puedo hacer :S
ResponderEliminarAyúdame, este menú esta re bueno u.u
http://tst-02.blogspot.com/
Hola Xml3D, arriba de los estilos del menú tienes esto:
Eliminar.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.
aaa Graciasss, eres el Mejor!
Eliminarhola una pregunta porque me agrega otra barra lateral
ResponderEliminarHola carlos, el menú sólo agrega la barra del menú que se despliega, no agrega más elementos.
EliminarSaludos El Potro. Necesito ayuda. ¿cómo puedo ponerle un link o enlace al fondo de mi blogger?
ResponderEliminarMe 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.
Hola, el body no puede tener un enlace, no es posible desde HTML.
EliminarSaludos, okas. entonces se puede poner una especie de imagen que simule el fondo y ponerle un link?
ResponderEliminarUna opción es que pongas dentro de tu etiqueta BODY este código:
Eliminaronclick="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.
Agradezo la atenció, pero no funcionó. La puse incluso imediatamente arriba de body (cierre de etiqueta) y no jaló
ResponderEliminar:-/
No va arriba sino DENTRO, es decir, aquí dentro: <body>
EliminarOkas, lo pruebo de esa manera. Muchas gracias por la ayuda y tiempo El Potro. Eres muy amable
ResponderEliminar;)
hola Potro, muy buen aporte pero no me funciona con Chrome, que puedo hacer para que sea compatible con este navegador
ResponderEliminar