Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

El gadget de etiquetas en forma de menú

Casi todas las semanas me preguntan cómo incluir un enlace hacia un grupo de entradas en un menú de Blogger, de tal forma que el contenido se vea organizado.

Para conseguir esto, antes es necesario ordenar los posts con etiquetas. El enlace de éstas mostrará un listado con el contenido correspondiente.

¿Y qué mejor que hacer uso del propio gadget de etiquetas ofrecido por Blogger para fabricar un menú de navegación?

A continuación puedes ver una imagen del resultado tanto en vertical como en horizontal:






Diseño > Edición de HTML > sin expandir artilugios



Localiza esta línea en tu plantilla:
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

Ahora, justo debajo añade uno de estos dos códigos:

Para el menú vertical:
<b:widget id='Label74' locked='false' title='MENU Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if><div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<div id='blcjEtiqjte'>
<ul>
<li style='border-color:#e3cf8c;background:#f4e6b8;'><a expr:href='data:blog.homepageUrl' style='color:#000000;font-weight:bold;'>Inicio</a></li>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
</b:if>
</li>
</b:loop>
</ul></div><style>
#blcjEtiqjte ul li {text-indent: 0;background: #FDF7A5;border: 2px solid #F9DB7B;margin-bottom: 4px;padding: 6px 8px;list-style: none outside none;}
#blcjEtiqjte a:link, #blcjEtiqjte a:visited {color: #817143;font-family: Arial,helvetica,sans-serif;text-decoration: none;}
#blcjEtiqjte [dir="ltr"] {color:#c8141a;}
</style>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Para el menú horizontal:
<b:widget id='Label74' locked='false' title='MENU Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if><div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<div id='blcjEtiqjte'>
<ul>
<li style='border-color:#e3cf8c;background:#f4e6b8;'><a expr:href='data:blog.homepageUrl' style='color:#000000;font-weight:bold;'>Inicio</a></li>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
</b:if>
</li>
</b:loop>
</ul></div><style>
#blcjEtiqjte ul li {background: #FDF7A5;border: 2px solid #F9DB7B;float: left;list-style: none outside none;margin-bottom: 4px;margin-right: 6px;padding: 6px 8px;text-indent: 0;}
#blcjEtiqjte a:link, #blcjEtiqjte a:visited {color: #817143;font-family: Arial,helvetica,sans-serif;text-decoration: none;}
#blcjEtiqjte [dir="ltr"] {color:#c8141a;}
</style>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Las líneas que destaco en color rojo pertenecen al color de fondo y al estilo del borde que presenta el menú.

background: #FDF7A5; Es el color de fondo. Haz uso de la tabla de colores para obtener el código de tu tonalidad favorita o utiliza una imagen de fondo personal, reemplazando la línea por esto:
background: url("URL IMAGEN") repeat scroll 0 0 transparent;

Inserta la dirección de la imagen en URL IMAGEN y listo.

border: 2px solid #F9DB7B; Es el aspecto del borde o marco. Modifica su grosor aumentando o disminuyendo la cifra 2. Para hacer uso de otro estilo, sustituye solid por los términos citados en este otro tutorial. Finalmente el color, #F9DB7B Con la tabla de colores podrás cambiarlo.

Guarda la plantilla y entra en Diseño > Elementos de la página para arrastrar el gadget de etiquetas hasta el lugar idóneo (bajo la cabecera para el horizontal o en la barra lateral para el vertical).

Notas:
- Para guardar los gadgets sin título revisa esta entrada.
- Accede a este artículo para eliminar el título del gadget pero conservarlo en el apartado de Diseño > Elementos de la página.
- Si tienes problemas para guardar los cambios, utiliza el buscador de tu navegador (presionando las teclas Ctrl y F) para dar con este término: Label74. Bastará con editarlo: Label75.

Edder dice...

Exelente página, he modificado mi plantilla de blogger con varios trucos tuyos, solo me faltan algo de edición en este menú jeje.

AlexPP3 dice...

Wooow, quedo genial.
Seguro te debio dar trabajo el tuto pero merece la pena. Gracias y muchos saludos!

Jaime Trujillo Escobedo dice...

¡Bienvenido Edder! Escoger un color de fondo para el menú es sencillo pero hacer uso de una imagen requiere más tiempo. Si necesitas ayuda házmelo saber.

Jaime Trujillo Escobedo dice...

Me alegro, AlexPP3. Gracias a ti por seguir mis artículos.

Luz de Gas RadioBlog dice...

Muy bueno

MCarlitooH2 dice...

no encuentro el codigo "<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>"

pero si tengo "<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>"

pero si pongo el menu horizontal debajo del codigo anterior me da un error me dice "El artilugio con ID "Blog1" no puede contener el elemento: "b:widget". Un artilugio sólo puede contener elementos b:includable."


Alguna solución? Saludos.

Jaime Trujillo Escobedo dice...

MCarlitooH2, es probable que hayas marcado la casilla 'Expandir plantilla de artilugios' y por lo tanto la etiqueta muestra el código que recoge (perteneciente a la estructura del blog). Prueba a realizarlo sin expandir artilugios.

Jaime Trujillo Escobedo dice...

MCarlitooH2, es fundamental leer detenidamente las instrucciones dado que, a pesar de tratarse de indicaciones que suelen repetirse en la mayoría de trucos, pueden contener información adicional o distinta.

Con respecto a la colocación del menú, según puedo verlo en tu blog, aparece sobre la cabecera. ¿Quizás te refieras a colocarlo bajo el banner?

MCarlitooH2 dice...

No te preocupes ya lo solucioné.

Laube dice...

A ver, a ver, que me da que esto podría servirme, Jaime. Pero tengo dudas:
1) Todas las etiquetas que tengo según el editor de Blogger se me reflejaría automáticamente en etse menú horizontal????.
2) Podría arrastrarlo justo bajo el título del blog? (Por cierto, te gusta mi nueva cabecera?. Ya sabes que valoro tu opinión y si en algo puedo mejorar, me gustará que me lo digas). No quiero que quede muy separado, sino que quede justo bajo el título. No sé si me explico.
Un besote guapetón

Jaime Trujillo Escobedo dice...

Laube, procederé a explicarte todo por partes:

1) Aparecerán únicamente las etiquetas seleccionadas. Revisa esta entrada acerca de las etiquetas a mostrar.

2) Por supuesto que podrías. Instala antes el gadget y posteriormente, desde el apartado de Diseño > Elementos de la página, arrástralo hasta lograr que se sitúe bajo la cabecera.

Si no consigues situarlo en el lugar deseado, revisa este otro tutorial.

La separación ya la veríamos al haberlo instalado pues los márgenes siempre pueden modificarse. Tu nueva cabecera me gustó mucho, principalmente por el efecto degradado de la palabra fotografía y las manchas superpuestas con el texto. A pesar de conjuntar perfectamente con la plantilla, yo retocaría la mancha inferior pues se visualiza 'cortada'.

Prueba a realizar lo siguiente:

- Localiza la etiqueta ]]></b:skin> y justo antes añade esto:

.main-inner {
padding-top: 0;
}

Haz vista previa y comprobarás que el bloque central cubre la diminuta imperfección.

Laube dice...

Me guardo tu comentario para hacerlo con más tiempo.
Tienes razón con lo que comentas de la manchita entrecortada... Ya la tenía en mi punto de mira... jejeje.
Gracias Jaime!

Ashura dice...

¿Cómo se hace un gaged que sea plegable?, yo vi uno en un blog, pero no te puedo dar el link porque el blog es de yaoi.
Estaba el titulo del gaged, y en el contenido del gaged había un mensje de la autora, y había un "botón" que decía "leer", le hacías click y se "desplegaba" un texto con imágenes.

Jaime Trujillo Escobedo dice...

Ashura, creo que lo que buscas ha sido explicado en esta entrada.

Francisco dice...

Hola, gracias Jaime me sirvió de mucho, me quedo fantastico.:)

Arte Digital Design dice...

Que tal Jaime! Muy buen blog! Funciona 100% pero quisiera hacer algo no se si me podrías ayudar, quisiera que todos los botones me queden igual que el primero (Boton Inicio)

Jaime Trujillo Escobedo dice...

¡Me alegra mucho Francisco!

Jaime Trujillo Escobedo dice...

¡Bienvenido Arte Digital Design! Claro que puedo ayudarte. En primer lugar, accede al apartado de Diseño > Edición de HTML y expande la plantilla de artilugios.

Para modificar el fondo, utiliza el código hexadecimal #f4e6b8 en la línea background: #FDF7A5; (resaltada en rojo), eliminando el actual.
Así mismo, para cambiar el color del borde, reemplaza #F9DB7B por #e3cf8c.

Guarda la plantilla y listo.

Arte Digital Design dice...

Funcionó! Mil Gracias Jaime, Blog's como el tuyo hacen crecer a la red de blogeros que nos unimos día con día a la familia Blogger! Te sigo y te recomiendo!
Este es mí blog para aquellos amantes al Diseño gráfico del Escritorio de sus PCs. Saludos Desde Honduras!
ARTEDIGITALDESIGN

Jaime Trujillo Escobedo dice...

¡Estupéndo Arte Digital Design! Muy agradable tu comentario. Te agradezco enormemente que me recomiendes así como que me sigas. Abrazos desde España!

Rosa dice...

Pues voy a intentarlo Juan, que puse una plantilla nueva y tiene en la parte de arriba en orizontal unas etiquetas y no se como hacerlo, asi que voy a probar a ver que me sale o si lo estropeo todo jajaja.
Gracias por todos tuis aportes, que aunque no te comente hace mucho, siempre leo.
Buenas noches

Jaime Trujillo Escobedo dice...

¡Rosa! Alegre de tenerte por aquí. Ya me contarás. Tal vez, y debido a la originalidad de tu nueva plantilla, vendría bien hacer uso de una imagen de fondo en lugar del color. Si necesitas ayuda dímelo.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo