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 son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

19 comentarios:

  1. disculpa como busco label1

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

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

    ResponderEliminar
  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.

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

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

    Gracias!

    ResponderEliminar
  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.

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

    ResponderEliminar
  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.

    ResponderEliminar
  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

    ResponderEliminar
  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>

    ResponderEliminar
  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

    ResponderEliminar
  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

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

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

    ResponderEliminar
  15. Muchas Gracias!

    Por cierto gran pagina!

    Un saludo
    www.lahoradada.es

    ResponderEliminar
  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

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

    ResponderEliminar

Samurai Jack (2017), episodio 10 "Final"

Samurai Jack (2017)Jack se enfrenta por fin con Aku, todos tratan de ayudar al samurai y la sorpresa vendrá del pasado.

[Leer artículo...]

Noragami entra en paro indefinido

Noragami es suspendida temporalmenteUna de las autoras no puede continuar con su trabajo al frente del manga y se ha decidido meter la historia en hiatus, lo que puede significar...

[Leer artículo...]

Tales of Zestiria y su final Yuri

El final de Tales the Zestiria The XLas aventuras de Sorey llega a su fin con un final de lo más raro que he visto hasta ahora.

[Leer artículo...]

Warau Salesman New (2017) El vendedor sonriente

Warau Salesman New (2017) EstrenosSatoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[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.

Anexos

Bitacoras.com