Imagen con pestañas en cabecera... y 2 | Oloblogger Una vez colocada la imagen como se explicó anteriormente , vamos a hacer que el interface de Blogger...

31 de mayo de 2007

Imagen con pestañas en cabecera... y 2

Una vez colocada la imagen como se explicó anteriormente, vamos a hacer que el interface de Blogger nos deje añadir nuevos elementos a la cabecera.

Se edita el código HTML de la plantilla (sin olvidar hacer antes una copia de seguridad), se marca "Expandir plantillas de artilugios" y se busca el apartado dónde está "maxwidgets". Con CTRL+F (buscar) llegais enseguida. Es algo como esto:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='0' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Aquí saldrá vuestro título (cabecera)' type='Header'>
<b:includable id='main'>

Ahora hay que cambiar el valor de maxwidgets de 0 a "3", showaddelement pasarlo a "yes" y locked ponerlo en "false". El primero para que nos permita tener más de un elemento en la cabecera, el segundo para poder añadir los nuevos elementos y el tercero para poder ordenar los distintos elementos. Guardar Plantilla.

Apartado Diseño de Blogger


Ya podemos añadir otro elemento y colocarlo encima o debajo de la cabecera. Lo más fácil para pestañas, es crearlas con un programa de dibujo, subirlas a un borrador del blog (o alojarlas en un servidor de imágenes) y luego añadir un elemento HTML/JAVASCRIPT como éste:

<a href="http://direccióndevuestraweb/search/label/etiquetaamostrar">
<img border="0" style="CURSOR: hand" alt="textoalpasarporencima" src="http://direccióndelaimagendelapestaña"/></a>


AmbigramasTrucos para blogs


Así quedaría si ponemos dos veces el anterior código, cada uno con una dirección distinta de imagen (pestaña). Hay que repetirlo tantas veces como botones se quieran poner.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

24 comentarios :

  1. muy bueno todo lo que publicas sobre blogger,estuve probando lo de los menus y el problema que tengo es que me queda espacio entre los menues y el slidebar y la primera entrada como puedo hacer para que queden pegados,gracias y saludos

    ResponderEliminar
  2. ¿Dónde estás poniendo el menú? Sería bueno que me mandaras una captura de pantalla. Pon el enlace a la imagen en tu comentario o envíamela por e-mail.
    Saludos

    ResponderEliminar
  3. quiero agradecer a oloman que me ayudo a solucionarlo,aca les dejo lo que era un error muy tonto,despues de estar varias horas armando el blogger se me habian quemado las neuronas......no me di cuenta que tenia habilitado el blogger solo para que entra yo y me aparecian el simbolo de herramientas que ocupaba el un espacio espacio entre el menu y las entradas,no me quiero acordar que me volvi loco tratando de encontrar la solucion...mate algunas neuronas que se le va a ser....

    ResponderEliminar
  4. PERO QUE GRANDE ERESSSS!! joder! miles de preguntas contestadas en un sólo site!! mi más sincera enhorabuena, chapó!

    ResponderEliminar
  5. tengo un problema al intentar hacer el cambio en el HTML sale esto---- Se ha encontrado más de un artilugio con el ID: HTML1. Los ID de artilugio deben ser exclusivos.----

    como lo puedo solucionar

    ResponderEliminar
  6. Hola Doble D. Sólo busca uno de los artilugios HTML1 y cambia su nombre. Por ejemplo ponle HTML71 para no fallar.

    ResponderEliminar
  7. Oloman, estoy muy contenta, llevaba tiempo buscando hacer esto y o no lo encontraba por ninguna parte o lo que encontraba no me salía, pero este me ha salido a la primera y justo lo que yo queria. De hecho creo que esta mañana te lo he preguntado en otro post. Un millón de gracias!
    Ya que estoy, se le podria aplicar un efecto rollover?

    ResponderEliminar
  8. Je, je. Te entendí otra cosa Laura y te dejé un link que no sé si te valdrá. Pero ahora que pides lo del rollover, creo que te va a venir de fábula:

    http://oloblogger.blogspot.com/2008/09/botones-en-movimiento-rollover.html

    ResponderEliminar
  9. Hola!Mi problema es que he pagado para que me hicieran un set para mi blog, y una vez terminado, me dice que no sabe colocar las pestañas en horizontal debajo de la cabecera. Yo sé que ahora blogger tiene un gadget para poder hacer esto, pero ...¿qué pasa si las etiquetas las quiero con las imágenes que me han hecho para cada pestaña?No sé si me explico bien. Me encantaría poder utilizar esas imágenes como pestañas.Me puedes ayudar?

    ResponderEliminar
  10. Tadenay, por lo que he visto, cada botón es un gadget independiente en tu barra lateral.

    Toma el código de cada uno de ellos y cópialo uno a continuación de otro, sin saltos de línea.

    Luego, todo junto, lo pegas en un nuevo gadget (tendrás que eliminar los anteriores una vez que veas que sale como quieres). Por último, mueves ese nuevo gadget a la parte superior pinchando y arrastrando.

    ResponderEliminar
  11. Hola
    Estoy intentando alinear una imagen,a la derecha del titulo del blog, y no lo consigo.
    La cabecera esta dividida en dos partes, y aunque en diseño de plantilla he logrado alinearlos. Al abrir el blog la imagen sigue saliendo un poco mas bajo. La imagen la he recortado al maximo en altura.
    He estado mirando los cuatro temas que tienes acerca de la cabecera de un blog, y lo mas que he conseguido es poner el elemento "añadir un gadget" encima del titulo del blog.
    ¿Sabes si hay algun modo de alinear imagen y titulo?
    El blog es "http://mcpepo01.blogspot.com"
    Saludos

    ResponderEliminar
  12. toctoc06, creo que el único problema es que diste demasiado porcentaje a los dos HEADER. Prueba a poner un valor inferior aquí:
    .header2 {width:48%; float: right; margin:0 auto 1%;}

    Por cierto, el último 1% anula ese margin, pero es que para lo que lo quieres, tampoco te hace falta:
    .header2 {width:40%; float: right; }

    ResponderEliminar
  13. ! Perfecto !
    Gracias por el apunte.
    Saludos

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

    ResponderEliminar
  15. Doremi Filicos, cambiada plantilla y solucionados todos los problemas de una ¿no?

    ResponderEliminar
  16. ¿Es posible, sin usar imágenes, dar un color diferente a cada pestaña? Concretamente, lo que quiero hacer es que al poner el ratón encima de una pestaña salga un color solo para esa pestaña, pero sin tener que usar imágenes de ningún tipo.

    ¿Se puede?

    ResponderEliminar
    Respuestas
    1. Si las pestañas tienen un color plano hecho desde CSS, sólo tienes que añadir al elemento con el que formas esas pestañas -no detallas si la haces con DIV, listas LI, etc.- la pseudoclase :hover y luego otras propiedades de fondo distintas para ese efecto.

      Por ejemplo, si tienes algo así:
      #menu li {background: #fff;}

      ...tendrás que añadir esto otro para que al pasar el ratón por encima se vuelvan negras:

      #menu li:hovr {background: #000;}

      Eliminar
    2. Yo lo tengo así:

      /* Tabs
      ----------------------------------------------- */
      .tabs {
      margin-right: 8px;
      margin-left: 8px;
      }
      .tabs-inner .widget {
      background: #23b14d;
      }
      .tabs-inner .widget li a {
      display: inline-block;
      padding: 8px 14px;
      font: normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
      color: #1f3747;
      border-left: 1px solid #3b7481;
      }
      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
      color: #1f3747;
      background-color: #446688;
      text-decoration: none;
      }
      .main-inner .widget {
      margin: 0;
      }

      Y serían 8 pestañas diferentes.

      Eliminar
    3. Eso te debería funcionar con el color de fondo #23b14d en estado normal y on el color #446688 cuando haces hover. Lo más que puedes hacer es colocar el bakground normal en .tabs-inner .widget li a

      Eliminar
    4. ¿Entonces no se puede?

      Eliminar
    5. Creo que dije lo contrario. De todas maneras, si es tu menú superior, ahí te salen en verde/azul según haces hover o no ¿No es eso lo que quieres?

      Eliminar
  17. Hola.!
    Tengo la cabecera de mi blog de esta forma, lo que quisiera saber es, si puedo dividir la cabecera en dos? Te lo pregunto por que lo he querido hacer pero a la hora de buscar unos codigos, no los encuentro.. me podrias ayudar?
    Saludos

    ResponderEliminar
    Respuestas
    1. Hola. En esta serie de 3 entradas explico cómo dividir el footer del blog en varias columnas. Con el mismo sistema puedes dividir la cabecera:
      http://www.oloblogger.com/2009/05/plantilla-blogger-crear-secciones.html

      Espero que te sirva.

      Eliminar
  18. Hola, lo leeré espero me sirva y más que todo espero entenderle ;) saludos y gracias

    ResponderEliminar