Menú vertical desplegable de pestañas con jQuery

16 de enero de 2012 244 comentarios ,
Este es un menú vertical desplegable que aparece en la parte izquierda del blog, de forma flotante, y que tiene un efecto deslizante al pasar el cursor por cada una se sus pestañas.
Es idóneo para agregar enlaces a las redes sociales o para las páginas del blog, aunque en realidad puede usarse para enlazar a cualquier sitio que queramos.
El ejemplo puede verse en esta misma entrada, en la parte izquierda del navegador, si pasas el cursor sobre él verás cómo se asoma cada pestaña.

Para colocar este menú vertical deslizante en el blog, vamos a usar jQuery, así que recuerda eliminar las versiones repetidas y usar sólo la última versión de jQuery (salvo algunos casos), esto es para evitar que quienes ya usen jQuery no les funcione el menú o cualquier otro gadget que ya use esta librería.

Bien, para empezar entra en la Edición HTML de la plantilla y antes de </head> pega el script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
// Menú vertical desplegable de pestañas
jQuery.noConflict();
jQuery(function() {
jQuery('#navigatione a').stop().animate({'marginLeft':'-85px'},1000);
jQuery('#navigatione > li').hover(
function () {
jQuery('a',jQuery(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
jQuery('a',jQuery(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
//]]>
</script>
Ahora antes de ]]></b:skin> pega los estilos del menú:
/* Menú vertical desplegable de pestañas
----------------------------------------------- */
ul#navigatione {
position: fixed;
margin: 0px;
padding: 0px;
top: 150px; /* Distancia de las pestañas desde arriba */
left: 0px;
list-style: none;
z-index:9;
}
ul#navigatione li {
width: 100px; /* Ancho de las pestañas */
}
ul#navigatione li a {
display: block;
margin-left: 0px;
width: 100px; /* Ancho de las pestañas */
height: 70px; /* Alto de las pestañas */
background-color:#d8d8d8; /* Color de fondo de las pestañas*/
background-repeat:no-repeat;
background-position:center center;
border:1px solid #afafaf; /* Color del borde */
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 12px;
-webkit-border-top-right-radius: 12px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
opacity: 0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

/* Aquí van las URLs de las imágenes de cada pestaña */
ul#navigatione .imagen1 a{
background-image: url(URL de la imagen UNO);
}
ul#navigatione .imagen2 a {
background-image: url(URL de la imagen DOS);
}
ul#navigatione .imagen3 a {
background-image: url(URL de la imagen TRES);
}
ul#navigatione .imagen4 a {
background-image: url(URL de la imagen CUATRO);
}
ul#navigatione .imagen5 a {
background-image: url(URL de la imagen CINCO);
}
Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, o si usas la nueva interfaz entra en Diseño | Añadir un gadget | HTML/Javascript. Ahí pega este código:
<ul id='navigatione'>
<li class='imagen1'><a href='URL del enlace'/></li>
<li class='imagen2'><a href='URL del enlace'/></li>
<li class='imagen3'><a href='URL del enlace'/></li>
<li class='imagen4'><a href='URL del enlace'/></li>
<li class='imagen5'><a href='URL del enlace'/></li>
</ul>
Este último es la estructura del menú, así que ahí debes colocar las URLs de los enlaces de cada pestaña donde se indica.
En el segundo código verás en color verde algunas áreas que se pueden personalizar como el color de las pestañas y tamaño. En esa misma área verás que se debe colocar las URLs de las imágenes, esos son los íconos que lleva cada pestaña dentro.
Ahí no he puesto una imagen predeterminada para todos pues cada uno deberá elegir el tipo de ícono que quiera usar. Los del ejemplo los he tomado de Iconfinder, pero eso ya es a elección.

Por defecto serán cinco pestañas, pues no es recomendable usar tantas, ya que los usuarios que ingresen al blog con un monitor de pequeña resolución no alcanzarán a ver el resto de las pestañas.
Pero si aun así quisieras agregar más, entonces en el segundo código agrega este fragmento por cada pestaña extra:
ul#navigatione .imagen6 a {
background-image: url(URL de la imagen SEIS);
}
Y en el tercer código esta línea antes de </ul>, también por cada pestaña extra:
<li class='imagen6'><a href='URL del enlace'/></li>
Si te fijas, verás que en ambos códigos extras dice imagen6
Si añades otra más deberás cambiarlo por imagen7 y así sucesivamente.

El script ya está modificado para que sea compatible con Scriptaculous, así que al menos con esa librería no deberá haber problemas. Que lo disfruten :)



244 comentarios en:

" Menú vertical desplegable de pestañas con jQuery "

  1. Gracias potro me servirá como ayuda en mi blog.

    ResponderEliminar
  2. Gracias muy buen trabajo como siempre

    saludos :D

    ResponderEliminar
  3. muy bonito potro gracias por tus aportes

    ResponderEliminar
  4. con este menu despegable, llegare a tener mas suscriptores, buena potro con las aportaciones !

    ResponderEliminar
    Respuestas
    1. Para promocionar el feed y las redes sociales queda bastante bien Daniel, espero que te dé buenos resultados :)

      Eliminar
  5. Wau potro esta muy lindo y fuera de eso no estorba en el blog, muy chevere de verdad que si :)

    ResponderEliminar
    Respuestas
    1. Eso es lo que me gusta, que queda bastante discreto. Diablos, ¿cómo no lo mencioné en la entrada? :)

      Eliminar
    2. amigo es un gran aporte si uno tubiera que hacer esto por recursos propios te cobran y mui caro es bueno que una persona como usted se gaste en hacer este tipo de tutoriales poniendole enpeño y dedicacion muchisimas gracias amigo DLB

      Eliminar
    3. Muchas gracias por tu comentario :)

      Eliminar
  6. Hola Potro, muy bueno, muchas gracias ;-)

    ResponderEliminar
  7. Solo quiero saber una cosa, ¿Si uno no quiere imágenes si no texto, qué se debe hacer?

    ResponderEliminar
    Respuestas
    1. Sólo quita la URL de la imagen, o todo el código donde va lo de la imagen. Y en la parte del menú que cada pestaña quede así:

      <li class="imagen1"><a href="URL del enlace">Nombre de la pestaña</a></li>

      Eliminar
  8. Buenas,
    1-. En primer lugar, debo felicitarte por la pág, por los trucos, y más cosas que nos enseñas.
    2-. Te tengo que pedir disculpas, por esta pregunta que te voy a hacer. He estado buscando en tu buscador pero no logre encontrarlo. Como se hace para poner un "cuadro" como pones tu debajo de cada topic con los link de otras entradas?. Por lo visto poner al azar, se puede poner uno especifico?.

    P.D: mi correo es guille-2.17@hotmail.com por si te quieres poner en contacto conmigo.

    Saludos, y gracias!.

    ResponderEliminar
    Respuestas
    1. Hola Elliugh, no tienes que disculparte por nada, el área de los comentarios es justamente para que se pregunten las dudas que se tengan ;)
      Lo que yo tengo debajo de las entradas son las entradas relacionadas, éstas son al azar, pero de acuerdo a una etiqueta, es decir, que el script hace que se muestren las entradas que tengan que ver con la misma etiqueta de la entrada.

      Saludos.

      Eliminar
    2. Gracias Potro, me sirvió!.

      Saludos!

      Eliminar
  9. ahh!! Potro, felicidades por los 10 mil me gusta de FB ;-)

    ResponderEliminar
  10. Potro, gracias por el aporte. :D

    Una duda, si ya se de las condicionales pero, que parte del codigo debo encerrar para que solo se vea en la portada?

    Porfavor, solo esa ayuda te pido.

    ResponderEliminar
    Respuestas
    1. El último código, pero, como se encuentra en un gadget entonces tendrías que usar otro método para condicionarlo:
      http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

      Eliminar
  11. Muchas Gracias Potro, lo apliqué a mi blog, un tanto personalizado, me gusta como quedó :) Para el que lo quiera ver: www.tomandofotos.com
    Saludos!

    ResponderEliminar
    Respuestas
    1. Te ha quedado genial Marcos :)

      Eliminar
    2. y todo gracias a vos Potro, que nos ayudás a hacer mejor nuestros blogs. Saludos!

      Eliminar
  12. Hola Potro, instale una plantilla estilo galeria, pero tambien me modifica las paginas estaticas y se ven mal aparte de que no funcionan como tal, me gustaria saber si se puede arreglar, aqui te dejo la url de mi mi blog

    URL BLOG:
    http://latinodvdrip.blogspot.com/

    PAGINAS ESTATICA URL:
    http://latinodvdrip.blogspot.com/p/peticiones.html
    http://latinodvdrip.blogspot.com/p/info-legales.html

    ResponderEliminar
    Respuestas
    1. Si la estructura de la plantilla no es muy compleja, bastaría con quitar el Leer más que tienes y usar uno más actualizado:
      http://ciudadblogger.com/2010/03/leer-mas-automatico-con-imagenes-en.html

      Eso es si la plantilla no es complicada, sino busca en la página del autor, quizá tengan una versión más moderna de la misma plantilla.

      Eliminar
  13. Hola Potro! se podria poner un fondo backgrund a las pestanas en vez de color solamente. Me refiero al color gris de fondo.
    Gracias
    ....y muy bueno, Dios te siga bendiciondo y te siga dando sabiduria, y nos sigas ayudando jejej! Dios te bendiga

    ResponderEliminar
    Respuestas
    1. Quiece decir una imagen de fondo background en vez de color?

      Eliminar
    2. Claro, añade debajo de:
      background-color:#d8d8d8; /* Color de fondo de las pestañas*/

      Esto:
      background-image: url(URL de la imagen);

      Bendiciones para ti también!

      Eliminar
  14. hola potro tengo un problem es que agregue todo bien pero en mi blog se aparecieron unos guiones después de cada pestaña y un puntito cuadrado que no deja que este apegado hacia la izquierda
    no se que este mal si me ayudaras potro.
    este es mi blog deje ahi los gagdet para que veas lo que paso cityvillepremios.blogspot.com
    saludos muy buen post y gracias de antemano

    ResponderEliminar
    Respuestas
    1. Prueba poniendo esto:

      #navigatione ul li {
      padding: 0;
      background: none;
      border-bottom: 0;
      }

      Eliminar
    2. hola potro disculpa por mi ignorancia pero donde pongo eso :D

      Eliminar
    3. ya lo arregle solo lo movi a otro sitio el gagdet y se desaparecio la lineas :D gracias potro me sido mucha ayuda :D

      Eliminar
  15. alguien ya lo puso en sublog para ver como queda y ponerlo yo :)

    ResponderEliminar
    Respuestas
    1. io :D cityvillepremios.blogspot.com pero esta un poquito mal estoy esperando a potro para que me ayude solucionarlo ;)

      Eliminar
    2. Ponlo en un blog de pruebas, así miras el resultado y decides si te animas ;)

      Eliminar
  16. Potro, estoy haciendo reformas en mi web y quiero preguntarte cositas. Como puedo yo poner en mi web una serie de imágenes debajo del titulo y las paginas, como las que aparecen en esta web: http://www.visualkey.net/

    ResponderEliminar
    Respuestas
    1. Pues igualito a ese no sé, pero mira en la sección de Slideshows, ahí hay algunos sliders, quizá uno de ellos pueda servirte.

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Ya he encontrado uno, pero como hago para situarlo en el mismo sitio que lo sitúa esta web: http://www.visualkey.net/
      Al igual que tu también has hecho como una separación parecida a la de la web que te indico. Yo querría que quedara el Slideshows en esta posición más o menos: http://dl.dropbox.com/u/49164033/TrucosVariosPC%20para%20Ciudad%20Blogger.png

      Eliminar
    4. Puedes ponerlo debajo de la cabecera, pero no te quedará igual, la plantilla no te lo permite.
      Me refiero a que lo podrás colocar ahí, pero tendrá el ancho del blog, pues el contenedor no puede excederse del ancho del contenedor general del blog.

      Eliminar
    5. Y como debo hacer, para que si pueda excederse. Tiene que haber algún método.
      Podrías ayudarme. Si quieres te puedo enviar una copia de mi plantilla por correo o si lo prefieres me dices por aquí en como hacerlo. Ayúdame por favor, gracias.

      Eliminar
    6. Puedes aplicarle un margen al gadget, pero exactamente igual no te va a quedar, es cuestión de plantillas, de cómo están formadas, así que en unas se puede ver de una forma y en otras simplemente no. Por qué, porque su estructura no lo permite.
      En todo caso, mejor busca una plantilla que sea similar a la que buscas.

      Eliminar
    7. El problema es que todas las plantillas que he visto tienen el margen y en ninguna me es igual. Tu no me podrías decir de una?

      Eliminar
    8. De Blogger no, no he visto una así.

      Eliminar
    9. Y lo de aplicarle un margen al gadget, como lo puedo hacer para ver como quedaría?

      Eliminar
    10. Localiza el ID del gadget, y antes de ]]></b:skin> agrega:
      #NOMBRE {
      margin-left:-400px;
      }

      Donde NOMBRE es el ID de tu gadget, peor te digo, no quedará igual.

      Eliminar
    11. Este comentario ha sido eliminado por el autor.

      Eliminar
    12. Este comentario ha sido eliminado por el autor.

      Eliminar
    13. Potro, me ha quedado mejor incluso de lo que yo esperaba que iba a quedar. Muchas gracias.
      Pero tengo otra duda, como hago para reducir estos tamaños que te indico aquí: http://dl.dropbox.com/u/49164033/prueba%20para%20ciudad%20blogger.png

      Eliminar
    14. Otra preguntita mas, y perdona por ser tan pesado. Como hago para montar las entradas en el gadgat, como hace en esta web que te muestro en la imagen señalado en rojo: http://dl.dropbox.com/u/49164033/2.png

      Eliminar
    15. En esos gadgets tienes que poner las imágenes y los enlaces manualmente, así enlazarás tus entradas. Pero yo no conozco ese gadget, así que no puedo decirte exactamente dónde se pone, pero si ya has colocado el gadget seguro ya tendrás una idea de dónde se pone.
      Por lo de los espacios necesitaría ver el blog donde lo has puesto.

      Eliminar
    16. Potro: (En esos gadgets tienes que poner las imágenes y los enlaces manualmente, así enlazarás tus entradas. Pero yo no conozco ese gadget, así que no puedo decirte exactamente dónde se pone, pero si ya has colocado el gadget seguro ya tendrás una idea de dónde se pone.)
      No entiendo tu respuesta, yo te pregunte esto: Como hago para montar las entradas en el gadget, como hace en esta web que te muestro en la imagen señalado en rojo: http://dl.dropbox.com/u/49164033/2.png
      Respecto a lo de los espacios, en cuento yo lo haga te comento para que veas y me digas como se puede reducir.

      Eliminar
    17. Es que no es que estén montadas las entradas, es un slider como cualquier otro. Por eso te decía, tienes que poner en ese slider las URLs de las imágenes, y las URLs a donde quieras que enlacen, supongo que querrás que enlacen a tus entradas.
      Por eso te decía que debes hacerlo manualmente, como se haría con cualquier otro slider.

      Eliminar
  17. pensé que nunca usarías el sistema de responder los comentarios, te quedo excelente... y el tutorial ni hablar eres el maestro

    ResponderEliminar
    Respuestas
    1. No lo iba a usar porque se me complicaba la numeración, me decidí a ponerlo porque pude resolver ese detalle, pero ahora se me complica este sistema de comentarios con Internet Explorer :(
      Gracias por tu comentario!

      Eliminar
  18. Hola potro muy buen menu amigo pero tengo un problema yo solo quiero poner una sola imagen y es un boton de ayuda lo que hago es que en el gadget solo dejo un enlace las demas las elimino

    y este otro asi

    /* Aquí van las URLs de las imágenes de cada pestaña */
    ul#navigatione .imagen1 a{
    background-image: url(URL de la imagen UNO);
    }

    pero resulta que imagen no queda fija sino que se queda al final de la pagina y queda muy separada en la posicion de un gadget que puedo hacer ojala me puedas ayudar o solo dime como se hace el efecto de esconder el boton ya tengo un boton en mi pagina pero no se como hacer que se esconda mi pagina es www.variedadespalencia.tk si lo vez esta en la parte izquierda gracias por todo y disculpa amigo sigue asi mi blog esta hecho 90% con tus trucos

    ResponderEliminar
    Respuestas
    1. Hola variedades palencia,
      Si la imagen se te ha ido hasta el final entonces es posible que cuando colocaste los códigos, o cuando eliminaste los otros, también eliminaste sin querer algo, posiblemente una llave de cierre.
      Necesitaría verlo puesto en tu blog par ver qué ha pasado que esa pestaña se va hasta abajo.
      De cualquier manera, si quieres tener sólo una, elimina sólo del último código todo esto:

      <li class='imagen2'><a href='URL del enlace'/></li>
      <li class='imagen3'><a href='URL del enlace'/></li>
      <li class='imagen4'><a href='URL del enlace'/></li>
      <li class='imagen5'><a href='URL del enlace'/></li>

      Eliminar
    2. Oye potro gracias por tu respuesta, enias toda la razon yo habia eliminado esto
      ul#navigatione .imagen2 a {
      background-image: url(URL de la imagen DOS);
      }
      ul#navigatione .imagen3 a {
      background-image: url(URL de la imagen TRES);
      }
      ul#navigatione .imagen4 a {
      background-image: url(URL de la imagen CUATRO);
      }
      ul#navigatione .imagen5 a {
      background-image: url(URL de la imagen CINCO);
      }
      por eso me salia abajo pero ahora quiero que se vea del lado dderecho y no izquirdo que tengo que editar en el codigo para hacerlo? y tambien el boton se ve un poco sobresalido quiero que se esconda un poco mas que tengo que editar? muchisimas gracias y disculpa tanta molestia

      Eliminar
    3. Hey potro ya logre repararlo a mi gusto, muchisimas gracias hermano por todo este es mi blog hay puedes ver el boton www.variedadespalencia.blogspot.com

      Eliminar
    4. gracias potro todo es gracias a ti hermano, hay voy todavia falta mucho algo que me extraño fue que tenia un script no recuerdo como se llama era para que cuando pasara el mouse la imagen sobresaliera un poco ese efecto ya no lo tiene me imagino que es una incompatibilidad con este, pero de igual forma me gusta mas este boton y es mas util para mi gracias amigo.

      Eliminar
  19. Hola potro,
    Una pregunta ¿como le puedo hacer para que al entrar a mi blog salgan hormigas caminando por el blog?

    Gracias.

    ResponderEliminar
  20. Hola, tento dos dudas. vender espacios para poner un banner de 125x125, si es así como cuanto? y la segunda... quiero hacer un blog para leer un comic, es posible poder cambiar a la siguiente entrada usando la tecla de navegación flecha e izquierda del teclado para facilitar la lectura del comic?

    ResponderEliminar
    Respuestas
    1. quise decir "vendes espacios...."

      Eliminar
    2. Hola Eddy,
      Por el momento ya se han suspendido la venta de espacios publicitarios. Quizá en algunos meses más se habiliten de nuevo, pero no podría asegurártelo.

      Lo otro que yo sepa no es posible.
      Saludos.

      Eliminar
  21. hola potro de nuevo xaqui mira yo uso un menu q bloger me da es el de crear paginas tengo creado 5 paginas la principal es de peliculas y segunada de revistas la tercera de videos y asi sucesivvamnete esto lo ice cuando tenia la antugia interfaz ahoraa tengo la nueva y me fije q tengo una q esta oculta asi lo puse en la antigua interfaz y quiero poner otra oculta peor en la nueva interfaz no se como se ace tu sabes como la pongo oculta?? espero tu espuesta estare pendiente de esta entrada gracias

    ResponderEliminar
    Respuestas
    1. Hola ticherking13,

      Estando en Diseño haz click sobre el gadget de Páginas, ahí puedes desmarcar la casilla de la página que no quieras que se muestre en el menú.

      Saludos.

      Eliminar
  22. Hola Potro, vengo a plantearte un reto :D
    Toda mi web está montada con tutoriales de Ciudad Blogger así que recurro a ti. Si entras en esta página: http://www.xatakandroid.com/aplicaciones-android/wikipedia-la-aplicacion-oficial-llega-al-android-market verás que al final de la entrada hay un recuadro con información de la aplicación que analizan.
    Me gustaría poder hacer lo mismo para mi blog, un código HTML que insertara al final de mis entradas y que pudiera cambiar los parámetros que aparecen según cada aplicación y entonces me quedara algo similar. Si además según quisiera pudiera cambiar la imagen de fondo sería genial.

    No se si estoy pidiendo una barbaridad o realmente es algo sencillo.

    Mil gracias!!!

    ResponderEliminar
    Respuestas
    1. Hola Carlos,

      Puedes usar la etiqueta FIELDSET y LEGEND, incluso personalizarla para ponerle una imagen de fondo.
      O una tabla HTML, que aunque puede darte mejores resultados es más elaborada la personalización.

      Saludos.

      Eliminar
  23. Buenas tardes El potro... queria felicitarte por tu pagina.. y hacerte una consulta.. resulta que instale este pequeño menu como un extra para el menu desplegable (http://ciudadblogger.com/2010/09/menu-desplegable-con-efecto-deslizante.html) y ahora no me funciona ningun efecto deslizante... ni las flechas ni el menu mencionado ni la " cajita de recomendar" los blogs... te agradezco tu ayuda... ya que quiero utilizarte este menu.. pero sin perder los demas gadgets que ya habia instalado..

    ResponderEliminar
  24. Hola!! de nuevo El Potro... queria comentarte que ya resolvi el anterio problemilla... resulta que habia copiado en mi blog el codigo de la ultima actualizacion de JQ que decia en esta entrada.. http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html , es decir , la version "1.6.4" mientras que este menu que nos compartes utiliza la version "1.7.1" lo que crea el "bloqueo". Te agradezco.

    ResponderEliminar
    Respuestas
    1. Qué bueno que lo has sabido resolver de forma oportuna :)
      Esa entrada no creo estarla actualizando, por eso he dejado el enlace al sitio de las APIS de Google para que vayan y tomen la última versión, sin embargo en las entradas más nuevas que publique iré poniendo siempre la última versión que esté disponible en ese momento ;)

      Saludos.

      Eliminar
  25. Hola Maestro . . . Saludos Desde Galicia
    Tras un Tiempo Apartado Vuelvo a la Carga
    He Utilizado Este Menú en mi Pagina
    Llevaba Tiempo Buscando Algo Similar
    Que se Pudiera Poner en el Lado Izquierdo
    Y Como no Aquí Estaba Ciudad Blogger
    Para Solucionarnos la Vida ...
    Creo que ha Quedado Bien
    www.sharkgalicia.com
    Pero Tengo un Problemilla
    Me ha Dejado de Funcionar
    La utilidad de ir Arriba
    Con Efecto Deslizante
    Supongo que es un Problema de Incompatibilidad
    Entre Scriptaculous y JQery
    Como Mencionas en una de tus Entradas
    Pero le he Dado Vueltas y no hay Manera
    Todavía Sigo Peleando con la Imagen
    Que Aparece en los Comentarios
    No he Logrado Solucionarlo
    Gracias por tu Ayuda

    ResponderEliminar
    Respuestas
    1. Hola Bricolaje Informatico,
      Qué gusto leerte por aquí :)
      Este menú ya está modificado para que sea compatible con Scriptaculous, así que al menos a este menú no hay que hacerle absolutamente nada.
      Lo que sí veo, es que además de este, tienes 2 versiones más de jQuery que están algo viejas, y unos scripts por ahí que usan jQuery, esos deben ser los que no dejan que lo demás funcione.
      Saludos.

      Eliminar
    2. Hay Alguna Solución . . .
      He Tratado de Eliminarlas o Modificarlas
      Siguiendo lo Explicado en Estas dos Entradas
      JQuery:sus Versiones y el Conflicto Entre Ellas
      Usar JQuery y Scriptaculous al Mismo Tiempo
      Pero no he Conseguido Nada

      Eliminar
    3. Es que las tienes alojadas en la plantilla, por eso no los ves igual que como en los demás ejemplos.
      Primero haz un respaldo de la plantilla por si algo saliera mal.
      Luego, borra desde:
      <script type='text/javascript'>

      //<![CDATA[
      /*
      * jQuery 1.2.6 - New Wave Javascript


      Hasta:
      ()+num(this,"border"+tl+"Width")+num(this,"border"+br+"Width")+(margin?num(this,"margin"+tl)+num(this,"margin"+br):0);};});})();
      //]]>
      </script>


      Después borra desde:
      <script type='text/javascript'>

      //<![CDATA[
      /*
      * jQuery JavaScript Library v1.3.2

      Hasta:
      set"+G]):K===g?(this.length?o.css(this[0],J):null):this.css(J,typeof K==="string"?K:K+"px")}})})();
      //]]>
      </script>

      Eliminar
    4. Hola Potro . . . He Realizado los Ajustes
      El Primer Escipt es del Carrusel de Imagenes
      Si lo Elimino Deja de Funcionar
      Y la Verdad Prefiero Conservarlo
      El Segundo Script lo he Eliminado
      Creo que no ha Modificado Nada
      Por lo que no se Cual era su Función
      Agradezco tu Paciencia
      Un Saludo

      Eliminar
    5. Pues habrá que elegir entre usar el carrusel o poder usar cualquier otro gadget que use versiones más nuevas de jQuery, como el de este menú.
      Saludos.

      Eliminar
    6. Completamente de Acuerdo
      Seguimos la Conversación
      En la Entrada Correspondiente
      Gracias

      Eliminar
  26. Hola EL Potro,
    He probado esto en mi blog, www.bestutilidades.blogspot.com, no a aparecido. Lo hes estado probando y nada. Entonces, he pensado que alomejor no funcionaba al haber en este blog a la vez Scriptaculous. Entonces he entrado en esta entrada tuya: http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html y he visto que en este menú ya has incluido esta opción. Al ver que tampoco iba, lo he probado en otro blog que tengo, que tambien tiene Scriptaculous y tampoco aparece este menú. Por cierto la versión de Scriptaculous creo que es la 1.8.2 y creo que lo utilizo para las felchas hacia arriba y abajo.
    Ya no se que hacer. ¿Que podra estar pasando?

    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Josep-Pepe,

      Cuando has puesto el código de los estilos has eliminado la llave de cierre de los estilos que están antes que esos. Eso ha causado que éstos no funcionen, y por lo tanto no se muestren:

      .Image {
      text-align:center;
      /* Menú vertical desplegable de pestañas
      ----------------------------------------------- */

      Mira esta entrada para que veas de qué hablo:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Saludos.

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Hola El Potro,
      He hecho lo que me has dicho y ha funcionado. Ahora lo he intentado hacer en mi otro blog: josep-pepe.blogspot.com y aparece pero no funciona el efecto y sale una linea blanca debajo de cada uno.

      Saludos.

      Eliminar
    4. Hola Josep-Pepe,
      Puede ser porque tienes dos versiones de jQuery, y sólo debes tener una, la más reciente. En la entrada hay un enlace que habla justo sobre ello.

      Eliminar
    5. Este comentario ha sido eliminado por el autor.

      Eliminar
    6. He buscado jquery en edicion HTML y solo me sale el jquery de este menú. Por cierto, en las entradas si que me funciona el efecto, aunque sale la lines blanca.

      Saludos

      Eliminar
    7. El otro de jQuery lo tienes dentro de un gadget HTML/Javascript.

      Eliminar
    8. Ya lo he encontrado, es el gadget de los seguidores en twitter. Dentro del Gadget estaba la version de jquery 1.4.1 y la he cambiado y me ha quedado lo que hay a continuación pero sigue sin funcionar el menú.

      http://dl.dropbox.com/u/11723636/Codigo1.png
      http://dl.dropbox.com/u/11723636/Codigo2.png

      Saludos

      Eliminar
    9. Es que no hace falta cambiarla. Si este menú ya agrega la versión 1.7.1 entonces ya no debería hacer falta agregarla de nuevo, pues hacerla cargar dos o más veces aun cuando sea la misma versión también da problemas. Así que si se pone jQuery con este menú ya no hace falta tenerlo dos veces.

      Saludos.

      Eliminar
    10. Igualmente, si quito el gadget de seguidores en twitter, sigue sin fucnionar el menú. Ya no se q hacer..

      Saludos

      Eliminar
    11. Pues no se me ocurre qué más puedas hacer :/

      Eliminar
  27. Hola amigo, muy buena la entrada me queda bien.Solo tengo una duda:justo debajo de cada pestaña me sale una linea horizontal que molesta para ver los demas gadget¿como la puedo quitar? y otra:al pinchar en las pestañas no me abre otra ventana , si no que sale del blog ¿como hago?porque he probado con target="_blank" y no me funciona.Saludo2

    ResponderEliminar
    Respuestas
    1. Hola COFRADIA,

      Para eliminar esos bordes agrega debajo de:
      ul#navigatione li {

      Esto:
      border:0;

      Si quieres que abra en otra ventana si es con target="_blank", quizá no lo has puesto bien. Debe quedar así:
      <li class='imagen1'><a href='http://cofradiascb.es/wp/' target="_blank"></a></li>

      Eliminar
  28. gracias amigo , solucionado .Eres un crack.
    SALUDO2

    ResponderEliminar
  29. Potro, como puedo crear listas de entradas, como estas que tu tienes: http://dl.dropbox.com/u/49164033/as.png

    ResponderEliminar
  30. Potro, la ultima pregunta por hoy, perdona mi pesadez.
    Como hago para que las esquinas (http://dl.dropbox.com/u/49164033/ooo.png) no sean redondas, es decir que tenga sus esquinas con pico (un angulo de 90º)

    ResponderEliminar
    Respuestas
    1. No importa que preguntes, sólo trata de hacer una pregunta a la vez para que primero resuelvas una cosa y después podamos seguir con lo siguiente.
      Las entradas yo las tengo de esta manera:
      http://ciudadblogger.com/2009/07/mostrar-solo-los-titulos-de-las.html

      Para quitar los bordes redondeados, elimina todos estos que encuentres:

      -moz-border-radius: $(content.border.radius);
      -webkit-border-radius: $(content.border.radius);
      -goog-ms-border-radius: $(content.border.radius);
      border-radius: $(content.border.radius);

      Eliminar
    2. Pero quitando todos los que vea, eliminare todos los bordes redondos, o solo los que te indico en la imagen: http://dl.dropbox.com/u/49164033/ooo.png

      Eliminar
    3. Tú mismo puedes averiguarlo, pero tienes que al menos intentarlo.
      Quita uno, da Vista Previa, luego quita otro y vuelve a dar Vista Previa, así sabrás qué cambia y qué no.

      Eliminar
    4. Así lo hice Potro, gracias, esta duda ya la aclare probando como me dijiste.

      Eliminar
  31. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  32. Hola Potro!! tengo una pregunta que no se como hacer estoy remodelando mi blog le he instalado un menú horizontal con pestañas desplazables pero las pestañas se ven como si estuvieran atras de todo perdón si no me explico muy bien pero te dejo la dirección del blog para que cheques lo que te quiero decir revisa la pestaña que dice FAVORITOS te agradesco que me ayudes y gracias!!! esta es la dirección del blog
    http://animeallstarz1.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Pues a mí no me aparece detrás del contenido. ¿En qué navegador lo has visto?

      Eliminar
    2. es que el problema es que quiero que el menú llegue hasta la parte del banner que esta de color gris, y cuando paso el rotor sobre la pestaña que dice favoritos salen las pestañas desplazables ahi como hasta la cuarta elección se logra ver y las demas ya se ven escondidas, esoes lo que quiciera saber como arreglar ya lo probe con firefox, crome, y explorer

      Eliminar
    3. Pues te repito, yo lo veo todo bien. Si eso sucede sólo cuando pones más "larga" esa sección entonces tendría que verla puesta de esa manera, de otro modo yo lo sigo viendo bien y no noto el error.

      Eliminar
  33. no se como ponerlos en un lateral... S:
    Simplemente se coloca donde yo pongo el gadget y queda fatal

    http://sick-of-sport.blogspot.com/

    Gracias potro!

    ResponderEliminar
    Respuestas
    1. Es porque arriba de estos estilos pusiste un script.
      Los scripts van antes de </head>, no dentro de ]]></b:skin>

      Saludos!

      Eliminar
    2. Tiene toda la razón, solucionado!

      Gracias, eres un crack!

      PD: Me encanta el nuevo sistema de comentarios, para un blog con tantísimas preguntas es muy muy bueno. Enhorabuena

      Eliminar
    3. Qué bueno que se ha resuelto :)

      Eliminar
  34. Genial!!!!!! muchas gracias :) me encanta :)

    ResponderEliminar
  35. me fasinó la propuesta. Potro ya que eres un genio me puedes decir que hacer para ponerlo de lado derecho y no isquiero ayuda y felicidades..! (=

    ResponderEliminar
    Respuestas
    1. Para poner el menú del lado derecho, cambia esta parte del primer código:
      jQuery('#navigatione a').stop().animate({'marginLeft':'-85px'},1000);
      jQuery('#navigatione > li').hover(
      function () {
      jQuery('a',jQuery(this)).stop().animate({'marginLeft':'-2px'},200);
      },
      function () {
      jQuery('a',jQuery(this)).stop().animate({'marginLeft':'-85px'},200);


      Por esta:
      jQuery('#navigatione a').stop().animate({'marginLeft':'85px'},1000);
      jQuery('#navigatione > li').hover(
      function () {
      jQuery('a',jQuery(this)).stop().animate({'marginLeft':'-2px'},200);
      },
      function () {
      jQuery('a',jQuery(this)).stop().animate({'marginLeft':'85px'},200);


      Y esta parte del segundo código:
      ul#navigatione {
      position: fixed;
      margin: 0px;
      padding: 0px;
      top: 150px; /* Distancia de las pestañas desde arriba */
      left: 0px;
      list-style: none;
      z-index:9;
      }
      ul#navigatione li {
      width: 100px; /* Ancho de las pestañas */
      }
      ul#navigatione li a {
      display: block;
      margin-left: 0px;
      width: 100px; /* Ancho de las pestañas */
      height: 70px; /* Alto de las pestañas */
      background-color:#d8d8d8; /* Color de fondo de las pestañas*/
      background-repeat:no-repeat;
      background-position:center center;
      border:1px solid #afafaf; /* Color del borde */
      -moz-border-radius:0px 10px 10px 0px;
      -webkit-border-bottom-right-radius: 12px;
      -webkit-border-top-right-radius: 12px;
      -khtml-border-bottom-right-radius: 10px;
      -khtml-border-top-right-radius: 10px;
      opacity: 0.9;
      filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
      }


      Por esta:
      ul#navigatione {
      position: fixed;
      margin: 0px;
      padding: 0px;
      top: 150px; /* Distancia de las pestañas desde arriba */
      right: 0px;
      list-style: none;
      z-index:9;
      }
      ul#navigatione li a {
      display: block;
      margin-right: 0px;
      width: 100px; /* Ancho de las pestañas */
      height: 70px; /* Alto de las pestañas */
      background-color:#d8d8d8; /* Color de fondo de las pestañas*/
      background-repeat:no-repeat;
      background-position:center center;
      border:1px solid #afafaf; /* Color del borde */
      -moz-border-radius:10px 0px 0px 10px;
      -webkit-border-bottom-left-radius: 12px;
      -webkit-border-top-left-radius: 12px;
      -khtml-border-bottom-left-radius: 10px;
      -khtml-border-top-left-radius: 10px;
      opacity: 0.9;
      filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
      }

      Eliminar
  36. Muy bueno, como todo lo que nos enseñas ;) Me encanta como quedo en mi blod.

    ResponderEliminar
  37. y como hacer para que te quede pegadas las pestañas en mi blog son separadas

    ResponderEliminar
  38. Lo quise poner en mi blog Amo Ser Mama pero no salio. No se que pude haber hecho mal, ayer lo puse en mi otro blog y quedo perfecto. ya uso jQuery para el slide que tengo en la sidebar. tendrá que ver con eso? Lo de las versiones?

    ResponderEliminar
  39. No me hagas caso, si que funciona :)

    ResponderEliminar
  40. Igualmente yo tengo 2 versiones de jQuery. Y lei que puede hacer mas lenta la carga esto. pero me da miedo borrar nada sin tu asesoramiento. Vos me dirias exactamente que debo borrar?
    Y otra cosita :) Me gutaria que las pestañas queden pegaditas entre si como las tuyas, como hago? Abrazos!

    ResponderEliminar
    Respuestas
    1. Sólo busca la versión más antigua de jQuery y esa elimínala, antes de hacerlo da Vista Previa para cerciorarte que todo funcione bien.
      Para que las pestañas no estén separadas agrega debajo de ul#navigatione li { esto:
      padding:0px;

      Abrazos!

      Eliminar
  41. Pero Potro desde donde hasta donde borro? tengo esto:
    src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
    y esto:
    src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
    Borro toda primer oracion? O que parte?

    ResponderEliminar
    Respuestas
    1. Sí, toda esa primera línea es el script de jQuery. La primera que muestras es la versión 1.5.1, y la segunda línea que muestras es la 1.7.1

      Eliminar
  42. Potro probé de borrar esa linea con la versión mas vieja (1.5.1) pero el slide de Coin slider deja de funcionar . Dejo las 2 versiones??

    ResponderEliminar
    Respuestas
    1. Pues el Coin Slider yo lo he probado con la 1.7.1 y me ha funcionado, pero si quitándolo no te funciona entonces déjalo puesto. El problema es sólo cuando al tener versiones viejas otros gadgets dejan de funcionar, pero si todo te funciona teniendo esas dos versiones entonces déjalas tal cual.

      Eliminar
  43. ok, lo dejo como esta entonces, total todo funciona bien ;) GRacias Potro. Un beso!

    ResponderEliminar
  44. Esta lindisimo, pero tengo un problema... como que los links no me andan bien, le doy clic a la pestaña y quiero que me lleve a una categoria en especifico y me dice que no existen entradas con esa categoria u.u no se que hacer... las he cambiado ya un par de veces y continua asi, solo me sirve el primero que esta dirigido a una sola entrada en especifico pero el resto no =(

    Este es mi blog: http://dropsagainlove.blogspot.com/

    ResponderEliminar
    Respuestas
    1. OoO !!! ya lo he solucionado =), tenia un problema en cuantos mayusculas y minusculas en mis etiquetas

      Eliminar
    2. Qué bueno que ya lo has resuelto Lupiux :)

      Eliminar
  45. Hola Potro, He buscado por todos los blogs que sean sobre el diseño en Blogger y no encuentro el menú perfecto para mi blog; Es un menú que sea como el de Google News (Google Noticias) que se encuentra en el lado izquierdo y que al bajar la página con el scrollbar me baje también el menú con un efecto deslizante ya que he probado menus fijos pero la verdad es que no me gustan se me hacen poco dinámicos para mi blog por eso prefiero un efecto deslizante espero no ser tan exigente y ojalá me pudieras ayudar. Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Círseven, pero el menú que mencionas no tiene ningún efecto deslizante.
      Si buscas algo que se deslice puedes probar con un código como el de esta entrada:
      http://ciudadblogger.com/2010/03/anuncio-flotante-que-baja-con-la-pagina.html

      En lugar de usarla como caja de aviso podrías ponerle una lista de enlaces que sirvan como menú.
      Saludos.

      Eliminar
  46. La neta q siempre me andas resolviendo todo, de echo estaba buscando un menu como este por todo internet y no lo encontraba :D, kisas tu me puedas ayudar con un problema que tengo en mi web... Bueno, uno de tantos, lo que pasa es que a la hora de ponerle un codigo para que la imagen de fondo se centre y no se repita las letras del blog cambian de color y asi, bueno, primero dime si me kieres ayudar :P, Saludos!

    ResponderEliminar
    Respuestas
    1. Hola SHD Prods. Claro que te quiero ayudar, pero necesitaría ver el blog donde has puesto los códigos, saber qué códigos pusiste, y exactamente qué te cambia al ponerlos. Saludos :)

      Eliminar
  47. Ok, mira mi blog es

    http://shdprods.blogspot.com/

    y el problema que tengo es que a la hora de que pongo el codigo para que la imagen de fondo este centrada y no se repita el Color de las letras de las entradas cambian de color a negro, asi como también el menu, e intentado cambiar el color de las letras pero no se cambia..

    esto lo quiero hacer debido a que muchas personas desean mirar la pagina mas chica [Ctrl -] pero al hacerlo la imagen de fondo se mira fuera de campo, y ademas que se repite :S, Si gustas checarte mi blog o si desean q te envie algun codigo, tendrás algun correo para enviártelo? puedes mandarmelo desde el campo de contacto de mi blog, Saludos!

    ResponderEliminar
    Respuestas
    1. Lo que necesito saber es qué código es exactamente el que estás poniendo, así mismo ver que ese código esté puesto en el blog, de otro modo me cuesta un poco de trabajo entender e identificar el problema ;)

      Eliminar
  48. Ok, mira el codigo original que tiene la pagina para el fondo es...


    {
    background:#1B1B1D url(http://i.picoodle.com/cbej15h5.jpg);
    margin:0;
    color:#7B7F88;
    font-size:12px;
    font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
    overflow-x:hidden;
    }


    Y al cambiar por este otro codigo que lo saque de la misma plantilla (solo que es de la imagen de fondo del slide)


    {
    position: relative;
    padding: 35px 0 112px 0;
    background-image:url(http://4.bp.blogspot.com/-dphLEfOsanI/TzLoZ3NMrxI/AAAAAAAAHP4/jmCht-4MANA/s1600/slider.png),url(http://2.bp.blogspot.com/-zTuJW2D_2YQ/TzL0e9AasVI/AAAAAAAAHRg/dEi85g4__Hc/s1600/silder-bg-1.png);
    background-repeat:no-repeat;
    background-position: top center;
    text-align: center;
    }




    las letras cambian de color a negro y se crea un espacio en la parte de arriva, Te dejo algunas imagenes para que observes.

    Espacio en la parte de arriva:
    http://i.picoodle.com/e33j16zb.jpg

    Letras negras:
    http://i.picoodle.com/e33j16zb.jpg


    No se a que se deba el cambio de color y el espacio ya que solo modifico esos códigos, espero y me puedas ayudar, saludos!

    ResponderEliminar
  49. Perdon, el de las letras negras es esta imagen...

    http://i.picoodle.com/445j16zc.jpg

    :P

    ResponderEliminar
    Respuestas
    1. Ahí le estás quitando la declaración del color y otras dos propiedades del texto. Necesitas incluirla, de modo que el código quede así:
      {
      position: relative;
      padding: 35px 0 112px 0;
      background-image:url(http://4.bp.blogspot.com/-dphLEfOsanI/TzLoZ3NMrxI/AAAAAAAAHP4/jmCht-4MANA/s1600/slider.png),url(http://2.bp.blogspot.com/-zTuJW2D_2YQ/TzL0e9AasVI/AAAAAAAAHRg/dEi85g4__Hc/s1600/silder-bg-1.png);
      background-repeat:no-repeat;
      background-position: top center;
      text-align: center;
      color:#7B7F88;
      font-size:12px;
      font-family:"lucida grande",tahoma,verdana,arial,sans-serif;

      }

      Eliminar
  50. Bien!, mucha sgracias, por cierto, no se le podra agregar hay mismo el codigo para cambiarle el color de fondo (Abajo de la imagen) Para no hacer la imagen tan grande, ya que es blanco, Busque en el odigo el color balanco (FFF, FFFFFF) y no encontre el de fondo, Saludos! xD

    ResponderEliminar
    Respuestas
    1. ¿Poner un color de fondo ahí mismo? Sí, sólo añade esto:
      background-color:#FFF;

      Eliminar
  51. ayuda no da en mi blogger

    http://dhayzon.blogspot.com/

    ResponderEliminar
    Respuestas
    1. No veo que tengas puesto el tercer código. Aun así, revisa el código que está arriba del segundo que has puesto, verás que está incompleto (el de los botones para compartir), ese debe ser el problema.

      Eliminar
    2. BASICAMENTe el problema esta q cuando agrego el 3º en el gadget | HTML/Javascript

      y lo guardo en mi blog los menus se ponen en la parte del gadget y no se esconde como el tuyo

      Eliminar
    3. Arregla el código que te digo y se solucionará tu problema con este menú.

      Eliminar
    4. esta todo bien lo ice al pie de la letra jajaja pero lo pruebo en otro blog i ba genial pero en este no anda no se por que
      http://dhayzon.blogspot.com/

      no creo q tenga q ver con este tutorial

      http://ciudadblogger.com/2011/09/botones-para-compartir-deslizantes.html

      ya q lo elimine todo y sigue sin andar

      no se q pasa me parese q hay algo q esta bloqueando mi /jquery

      pero solo tengo 1 i es la actualizada

      Eliminar
    5. gracias potro

      ya se soluciono mi problema

      uffff analizando bien tu respuesta

      bi que me faltaba un miserable ( / ) jajaja solo lo agregue y huala funciono ahora a personalizarlo gracias
      i disculpa por comentar demasiado

      Eliminar
  52. Como decimos en México... Esta de Poca Madre (excelente) =)

    Saludos.

    ResponderEliminar
  53. me quedaron separadas tienes alguna solucion para eso?

    ResponderEliminar
    Respuestas
    1. Prueba eliminar esta parte:
      .main-inner .widget #ArchiveList ul li {
      padding-top: .25em;
      padding-bottom: .25em;
      }

      Eliminar
    2. nada sigue igual d separado algun dia encontrare el error jejeje

      Eliminar
    3. Parece que cambiaste de plantilla y esta nueva te muestra mucho mejor el menú ;)

      Eliminar
  54. Oye por cierto, ya que andamos en esto de codigos... xD, Mire una plantilla q me gusto mucho solo que al mirar el codigo no encuentro donde estan las imagenes del slide.... al parecer estan en un script o algo asi, Sabes como puedo cambiar las imagenes?, en el archivo q descargue vienen unos scripts q los abri con el blok de notas :D pero no viene alguna direccion de imagen... Espero y me puedas ayudar.. La plantilla se la aplique a un blog de mientras... http://pruebas9320490324.blogspot.com/ . Saludos!

    ResponderEliminar
    Respuestas
    1. ya no, ya encontre como, ahora el problema es que las diapositivas se desordenan y se recortan :S, (y)

      Eliminar
    2. Pues yo lo veo bien, excepto por la primera transición. No conozco ese slider, pero sí recuerdo que en Chica Blogger tienen una entrada del mismo, se llama Nivo Slider:
      http://chicablogger.com/anadir-nivo-slider-en-blogger/

      Eliminar
  55. como mola estos menus ia esta en funcionamiento

    ResponderEliminar
  56. Oye, Sabras por que en una entra da que puse un formulario de contacto aparece....

    &amp;lt;p&amp;gt;&amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp........ y ademas el texto arrevasa el limite, Todo, no nomas eso.

    Una vez dentro de la entrada si se muestra correctamente el formulario, en si el problema no es que quiero que se mire el formulario sin necesidad de entrar por completo a la entrada, Sino que no aparesca &amp;lt;p&amp;gt;&amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp..... :D

    ResponderEliminar
    Respuestas
    1. ¿Puedes darme la URL del blog o entrada donde sucede eso? Porque de otra manera no puedo saber qué es lo que sucede.

      Eliminar
  57. no pude colocarlos mi amigo, me sale un menu vertical en block, sera eso porq antes de head ya tengo otro script? o tiene algo que ver con jquery?

    ResponderEliminar
    Respuestas
    1. Puede ser, recuerda que sólo debes tener una versión de jQuery, la más actualizada:
      http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

      Eliminar
  58. Oye potro, ocupo tu ayuda encerio, resulta que en la nueva plantilla que puse a mi blog en las paginas aparece el boton de "Leer mas" y cuando se le da click te llava a la misma pagina y no se muestra la info de la pagina, lo habia quitado pero me di cuenta que las entradas se mostraban completas y por eso lo coloque de nuevo, Que podia hacer al respecto?, El problema es solo con las paginas, Saludos, Espero y me ayudes una ves mas :D :P

    ResponderEliminar
    Respuestas
    1. Le daremos seguimiento en la otra entrada, la de Quitar el Leer más, donde ya has dejado un comentario, ¿vale? ;)

      Eliminar
  59. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  60. Help, no me queda :S

    www.cabalgandoxveracruz.blogspot.mx

    ResponderEliminar
    Respuestas
    1. http://img571.imageshack.us/img571/3547/erroriwt.png

      como se descuadro por completo el blog le carge un respaldo, pero te dejo una iamgen de como se veia

      Eliminar
    2. Sin verlo puesto no puedo saber qué pasó, pero lo más seguro es que hayas tenido un error en la colocación de los estilos.

      Eliminar
    3. Este comentario ha sido eliminado por el autor.

      Eliminar
    4. Este comentario ha sido eliminado por el autor.

      Eliminar
  61. Ya logre implantar la plantilla q deseo, y pude entrar al html, pero no me agrega mis gadgets, y ya tengo el menu

    ResponderEliminar
  62. Respuestas
    1. En las plantillas de vistas dinámicas no se pueden poner este tipo de gadgets.

      Eliminar
    2. q mal pex es una pena ojala en un futuro se pueda.

      Oye potro, como puedo usar este menu en una web?
      Esq estoy diseñando un index y me gustaria poner este menu en ella, pero no se como poner el gadget

      Eliminar
    3. Sólo lo he probado en Blogger, en las páginas web los scripts van antes de /HEAD, los estilos en el archivo CSS y la estructura del menú dentro del BODY.

      Eliminar
    4. Este comentario ha sido eliminado por el autor.

      Eliminar
  63. Gracias potro, pues voy a intentar, pero quedaria mas o menos asi:

    <LINK href="miestilo.css" title="compacto" rel="stylesheet" type="text/css">

    <script>
    </script>
    <head>
    <LINK href="mihojaestilo.css" rel="stylesheet" type="text/css">
    </head>

    <body>
    <ul id='navigatione'>
    <li class='imagen1'><a href='URL del enlace'/></li>
    </ul>
    </body>

    ResponderEliminar
    Respuestas
    1. Sí, y quizá tengas que quitarle el //<![CDATA[ y el //]]> al script.

      Eliminar
    2. voy a intentar, ojala y quede, la pagina de pruebas es:

      http://www.varovi.com/pruebas.html

      Ahi estaremos probando como queda xDD

      Eliminar
  64. Estimado Potro, he intentado incluir en el blogdestinosorientales.blogspot.com.es este menú y no me aparece, podrias ayudarme.

    ResponderEliminar
  65. Hola Potro...soy nueva Cris, y he seguido las indicaciones para poner en el blog los seguidores de facebook y todo ok en el diseño, pero cuando le doy a ver blog, no aparece nada, he comprobado lo del HTML y está pero nada, no sale nada..y ya no sé como OÑO hacerlooooo...gracias

    ResponderEliminar
    Respuestas
    1. Hola El Salero De Azúcar, supongo que estás confundida de entrada, porque ni en la otra que te respondí, ni en esta, se habla sobre los seguidores. Deja la pregunta en la entrada que corresponde y con gusto vemos cómo ayudarte.
      Saludos.

      Eliminar
  66. Necsito ayuda con mi blog trate de hacerlo pero no me quedo borre los codigo que le meti pero ahora aparece letras hasta arriba del blog mira.. http://i-dentificate.blogspot.com/ ¿Como quito eso? Porfa ayuda!

    ResponderEliminar
    Respuestas
    1. Supongo que ya lo has resuelto porque no veo nada raro en el blog.

      Eliminar
  67. Querido Potro, mi blog http://crisdoltex.blogspot.com.es/ he integrado dicho menú, he puesto todo en las posiciones y no sale?, me podrias ayudar, gracias.

    ResponderEliminar
    Respuestas
    1. Por alguna razón -ignoro cuál- agregaste en un gadget un estilo para ocultar ese gadget. Si editas el gadget que tiene como ID HTML16 verás que tienes una declaración para que ese gadget no sea visible.

      Eliminar
  68. Exactamente con el buscador CTRL+F cual busco, no te entiendo.
    Gracias

    ResponderEliminar
  69. Gracias, ya me he dado cuenta. Saludos maestros.

    ResponderEliminar
  70. Intento borrarlo y es parte del blog, no me deja y me da error, podrias ayudarme como que es lo que tengo que hacer.

    ResponderEliminar
  71. Por fin lo he logrado, con empeña y gracias a ti, maestro.

    ResponderEliminar
  72. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  73. Y si lo deseo a la derecha, simplemente le digo ul#navigatione { cambiando left: 0px; por right: 0px; } ???? obviamente dejando lo demás, no?

    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.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger