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.

Etiquetas en menú desplegable para mostrar los títulos de las entradas

Estoy seguro de que conoces el gadget de archivos que blogger ofrece y que nos facilita la búsqueda de una entrada específica gracias a la agrupación por fechas de los títulos publicados.

En el caso del gadget de etiquetas, no disponemos de esta útil característica y por ello quiero presentarte un truco que te permitirá modificarlo.

Como puedes ver en la imagen que te muestro a continuación, las etiquetas aparecerán en una lista tal y como las tienes en tu blog, pero dispondrán de un pequeño botoncito que al pulsarse, muestra los títulos de los artículos con dicha etiqueta.



Si lo deseas, puedes ver el truco en funcionamiento. Para ello, accede a este blog de pruebas.

Diseño>Edición de HTML>expandimos artilugios



Busca esta línea en tu plantilla:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Ahora, justo debajo de ella incluye este código:

<b:widget id='Label20' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<script type='text/javascript'>
home_page = "http://elbalcondejaime.blogspot.com/";
max_rc_posts = 10;
</script>
<script src='https://sites.google.com/site/scriptsbalcon/b/bletiquetascn.txt' type='text/javascript'/>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li style='margin-top:4px;'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/> <span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>►</a>
</span>
<b:else/>
<a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)' style='margin-right:6px;padding:2px;border:1px solid #ccc;'>▼</a><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a><style>.sidebar li {padding-top:4px;}</style>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

Reemplaza http://elbalcondejaime.blogspot.com/ por la dirección de tu blog y guarda haz vista previa para comprobar el resultado. Si te gusta, tan solo debes guardar la plantilla.

En caso de querer mostrar la opción 'Suscribirme a esta etiqueta' tal y como te muestro a continuación utiliza este otro código:


<b:widget id='Label20' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<script type='text/javascript'>
home_page = "http://elbalcondejaime.blogspot.com/";
max_rc_posts = 10;
</script>
<script src='https://sites.google.com/site/scriptsbalcon/b/bletiquetascn.txt' type='text/javascript'/>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li style='margin-top:4px;'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/> <span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>►</a>
</span>
<b:else/>
<a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)' style='margin-right:6px;padding:2px;border:1px solid #ccc;'>▼</a><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a><style>.sidebar li {padding-top:4px;}</style>
<span dir='ltr'>(<data:label.count/>)</span><a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO5obz0-4S3NFcpfPrq2QzHnJ3YbBnW9eFpEXvLPXKo84b2IVjhbecMnWxq5ebCi2ZAu4K9nJrU2gx6IYK4hMpOGvPwZZ4p8F7Cr3GYeAAqCrX4pAjnFucDNkPF2IPBreNCyudpUu8mTE/s400/balcnfd.png' style='padding-left:4px;' title='Suscribirme a esta etiqueta'/></a>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

Notas:
- Accede a esta otra entrada una vez hayas instalado el gadget en caso de querer modificar las etiquetas a mostrar.

- Si lo deseas, puedes subir el script que hace funcionar el truco a tu propio alojamiento de archivos: descargar. Después, reemplaza la dirección que ves en color grisáceo por la nueva URL.

Driwrgy dice...

Qué de trucos chulos y prácticos estás publicando, Jaime. Me gustan el resultado dinámico que ofrecen estas aplicaciones. Yo aún sigo a la espera de la doble columna sidebar porque alguon de ellos me dan problemas con la plantilla expandida o como se llame... Un besito y gracias por tu colaboración. Eres un crack y yo quiero seguir aprendiendooo.

Jaime Trujillo Escobedo dice...

Me alegra que te gusten mis publicaciones, Driwrgy. Probablemente explique lo que deseas configurar en tu blog, la sidebar dividida en dos secciones.

Dani dice...

Hola Jaime!
Este truco me parece exelente y me gustaria ponerlo en practica, pero NO encuentro esa linea.
Usé ctrl + F ..por supuesto.

Jaime Trujillo Escobedo dice...

Dani, envíame la dirección de tu blog y podré ayudarte. Lo más probable es que se deba a la plantilla.

Dani dice...

Hola, aqui te mando la URL del blog de mi mamá. Yo soy la que lo manejo.

Mi Espacio Artístico

Gracias.

Jaime Trujillo Escobedo dice...

Dani, prueba entonces (siguiendo los mismos pasos) a buscar esta línea:

<b:widget id="Text2"...

Y agrega el código encima. Si no la encuentras, reemplaza "Text2" por 'Text2'.

Dani dice...

Gracias Jaime ya funcionó ;)
Lo pude hacer buscando 'Text2'

..sigue adelante!!
Saludos.

Jaime Trujillo Escobedo dice...

Dani, muchas veces debemos 'cortar' las etiquetas para que aparezcan en la plantilla ya que pueden tener carácteres distintos.

¡Saludos!

Criis dice...

diario del recien nacido

Hola buenas, he utilizado su menu de etiquetas pero, nose porque no hay separación suficiente y se me junta con el titulo... No se porque ni que he de hacer, gracias

Criis dice...

Hola Jaime tengo un problema e puesto tu codigo donde tenia el widget pero ahora no se ven los links bien, se montan uno encima del otro, por favor como podria solucionarlo?

Diario del niño

Jaime Trujillo Escobedo dice...

Criis, no he podido localizar el menú en tu blog y por tanto ofrecerte una solución no ha sido posible. Instálalo y deja un comentario para que pueda entender correctamente el error.

Kaonsan dice...

mmmm no era lo que queria pero gracias :)
T-T sayonara!!

Jaime Trujillo Escobedo dice...

¿Y qué es lo que desearías, Otakus? Tal vez haya publicado ya lo que estás buscando.

Unknown dice...

hola jaime me sirvio, quiero dividir 4 pares de etiquetas, ej musica , dvd , libros, predicas, y que los menus se despliegen ahi, pero no se como entrar los post en cada etiqueta... ojala me puedas ayudar

Jaime Trujillo Escobedo dice...

Beto, no entendí muy bien lo que quieres hacer pero en esta entrada se explica algo muy similar a lo que dices al final de tu comentario.

Perséfoneluz dice...

Hola Jaime, soy una nueva seguidora de tu blog el cual me parece maravilloso, te felicito, todo lo que brindas me sirve muchísimo. Quería comentarte que tengo un problema con este truco, en particular, ya que no encuentro esa línea que tengo que buscar en mi plantilla. Si pudieses ayudarme te lo agradecería.

Jaime Trujillo Escobedo dice...

¡Bienvenida Perséfoneluz! Para poder ayudarte necesito conocer la dirección de tu blog dado que dependiendo de la plantilla utilizada tendré que indicarte una u otra etiqueta.

Dorsai dice...

Magnifico blog, con grandes ayudas ^^

Pregunta ¿sería posible este mismo menu, pero solo con unas cuantas etiquetas determinadas?

Jaime Trujillo Escobedo dice...

¡Bienvenido Dorsai! Permíteme recomendarte esta entrada con la que podrás, una vez instalado este gadget, seleccionar las etiquetas a mostrar.

Perséfoneluz dice...

Jaime, te paso la dirección del blog que tenía hasta hace poco.
No te pido que entres al blog que tengo ahora porque como estoy remodelandolo lo cerré por unos días para que no lo vean mis lectores.
Es el mismo diseño, aunque lo cambié a otro color, no sé si esos cambios influyen, y sino me decis y hago publico el nuevo hasta que lo veas. Besitos y gracias por tu pronta respuesta.

Jaime Trujillo Escobedo dice...

Perséfoneluz, prueba a buscar esta parte de otra línea (siguiendo los mismos pasos):

<b:widget id='HTML4' locked='false'

Cuando la hayas localizado, inserta el código justo antes.

Avísame en caso de no funcionar. ¡Abrazos!

Perséfoneluz dice...

¡Muchísimas gracias Jaime! Sí, ahora me salio perfecto. :D

Jaime Trujillo Escobedo dice...

Perséfoneluz, en ocasiones, las plantillas poseen secciones con una ID o nombre distinto al que indico en el tutorial. Hiciste bien en compartir tu consulta. Me alegra que se haya solucionado.

Gabriela dice...

hola, bueno me ha gustado este truco pero no encuentro esta linea, no me sale u.u ¿como hago?

Jaime Trujillo Escobedo dice...

Prueba a localizar esta otra línea con la plantilla de artilugios sin expandir:

<b:widget id='HTML12' locked='false' title=' ' type='HTML'/>

Añade el código justo después.

Juvinao dice...

Muy bueno Jaime me lo llevo a mi blog ;)

Jaime Trujillo Escobedo dice...

Juvinao, conviene que si copias enteramente las entradas del Balcón y las publicas en tu blog (a pesar de tratarse de plagio), al menos insertes un enlace hacia la página del autor para valorar el trabajo y esfuerzo que conlleva su creación.

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