lunes, 30 de noviembre de 2009

Crear menu desplegable para Etiquetas en Blogger

Para mostrar un menú desplegable como el mostrado en CGnauta en las etiquetas de Blogger, que es la forma más equilibrada para no desperdiciar tanto espacio con Nubes y listas, más cuando las etiquetas no tienen valor como enlace para Google, pues están bloqueadas para indexación en robot.txt

1. Debes agregar el artilugio de Etiquetas, en Edición de HTML, marcamos la casilla expandir plantilla.

2. Buscamos la siguiente sección:
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
Puede buscarse simplemente por el id "Label1"

3. Aqui seleccionaremos el contenido dentro de <b:widget id='Label1' locked='false' title='Etiquetas' type='Label'> y <b:include name='quickedit'/> y lo borramos. (Si no aparece quickedit, borre y vuelva a agregar las Etiquetas para resetearlo a su configuración original)

4. Pegamos el siguiente código entre <b:widget id='Label1' locked='false' title='Etiquetas' type='Label'> y <b:include name='quickedit'/>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Seleccione la categoria</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
Deberá quedar como:
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Seleccione la etiqueta</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
Pulse en Previsualizar debe funcionar, he cambiado la instrucción data:title en Option para evitar que se ela Etiquetas dentro de la caja de selección, reemplazandola por "Seleccione la etiqueta".

Si no desea que se muestre el número de post por categoria, remueva: (<data:label.count/>)

CSS para gestionar el artilugio
Ahora necesitamos agregar una regla css, a la sección de CSS de su plantilla:
#Label1 select
{
width:200px !important; /* Esto es el ancho de la caja de selección */
margin-left: 20px; /* con este valor centra la caja desplegable */
padding:4px; /* Controla separación interna no es necesario modificar*/
}
El ancho de la barra la he ajustado a 200px, pues de otra forma el tamaño automático dará problema con los elementos internos. Los comentarios entre /* */ pueden ser removidos, aunque no afectan en nada si los pega como están. El parámetro margin:0 auto; en caso de querer centrar la caja no funcionará, así que usamos margin-left para alinear al centro.

Comentarios y Consultas

Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

20 comentarios:

  1. disculpa como busco label1

    ResponderBorrar
  2. Mejor agrega el artilugio etiquetas y en el código busca title='Etiquetas' usando Ctrl+F en Firefox o Chrome.

    ResponderBorrar
  3. Hay alguna forma de mostrar sólo las etiquetas que deseo mostrar? en el caso de que no quieras mostrarlas todas

    ResponderBorrar
  4. Pues imagino que si te vas a Diseño en la configuración de blogger, elige Editar en el cuadro de Etiquetas y marca la opción:

    Editar seleccionadas y pulsa el vinculo Editar.

    ResponderBorrar
  5. Gracias Matius no había visto la opcion de etiquetas seleccionadas... muchas gracias!!

    ResponderBorrar
  6. Hola! Una pregunta: cómo configuraste el estilo de los comentarios?

    Gracias!

    ResponderBorrar
  7. En el código de arriba modifica la linea:

    <option expr:value='data:label.url'><data:label.name/>

    y reemplazala por:

    <option class='list1-option' expr:value='data:label.url'><data:label.name/>

    Ahora en el estilo de tu página agrega la regla:

    .list1-option
    {
    color:#fff;
    background: #000;
    padding-top:2px;
    padding-bottom:2px;
    }

    En una lista únicamente podremos modificar el fondo, pero no el color hover a poner el cursor que será siempre azul o el color predeterminado por el navegador.

    ResponderBorrar
  8. Este blog ha sido eliminado por un administrador de blog.

    ResponderBorrar
  9. Si no puedes hacerlo descarga tu plantilla y mándamela por correo a cgnauta arroba gmail.com, por favor, no escribas en Mayúsculas.

    ResponderBorrar
  10. disculpa las mayúsculas.
    te envió la plantilla, pero no creo que sea para tanto, solo necesito que me indiques donde colocar el:

    CSS para gestionar el artilugio.

    después todo me resultó fantástico, necesito cambiar el ancho de la barra, es solo eso.
    avísame, por ultimo te envió la plantilla

    muchas gracias por la calidad de trabajo

    un saludo

    ResponderBorrar
  11. ¿Lo has solucionado?
    No era muy difícil ¿verdad?

    Se supone que cada artilugio de blogger se estructura

    <b:widget id='funcion+n' locked='false' title='nombre' type='funcion'>
    <b:includable id='tipo'>

    --- código del artiligio ---

    </b:includable>
    </b:widget>

    Al final del código del artilugio y antes de </b:includable> se pone generalmente <b:include name='quickedit'/> que es el pequeño lápiz que te permite editar el contenido de cada artilugio.

    Si no está presente solamente buscas la etiqueta que le sigue: </b:includable>

    ResponderBorrar
  12. Hola,

    Si lo que necesito es como hacer que cuando pinche en una etiqueta se me desplieguen los titulos en una lista de los post etiquetados?

    Un saludo
    www.lahoradada.es

    ResponderBorrar
  13. Hola,

    No se puede hacer algo dinamico como el menu con las fechas y los nombres de los post pero con etiquetas en vez de con fechas??

    Un saludo
    www.lahoradada.es

    ResponderBorrar
  14. Ah, pues puedes hacer el siguiente tutorial:

    http://vagabundia.blogspot.com/2008/09/etiquetas-desplegables-en-la-sidebar.html

    ResponderBorrar
  15. Muchas Gracias!

    Por cierto gran pagina!

    Un saludo
    www.lahoradada.es

    ResponderBorrar
  16. Magnifica entrada!! Lo estaba buscando y ya lo tengo puesto en el blog. Es LOS VIAJES DE PACO, VERO Y HELIA. De hecho he puesto dos menus desplegables.

    Saludos y enhorabuena por el blog

    ResponderBorrar
    Respuestas
    1. Hola Verónica he visto vuestra web y los desplegables son más bonitos y se deslizan hacia abajo. ¿cómo lo has hecho?
      Gracias

      Borrar
  17. No sé si todavía andan por ahí, pero GRACIAS! Me sirvió
    Feliz sabado
    (y busque como loca)

    ResponderBorrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.