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.

La barra lateral en secciones o listas desplegables como en El Balcón

Son muchos los que me han preguntado en este último mes acerca de la creación de una barra lateral como la que tengo instalada y que actúa como menú desplegable para mostrar algo similar a un índice.

Al final he decidido explicarlo en una entrada y, aunque llevaba tiempo preparándola aquí publico las indicaciones más simples a seguir.

La barra lateral en secciones o listas desplegables blog blogger

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


Busca estas líneas en tu plantilla:

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

Ahora, justo debajo pega estos grandes bloques:

<b:widget id='HTML80' locked='false' title='CATEGORIA1' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle(&quot;CATEGORIA1&quot;,&quot;slide&quot;); return false'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/> &#9660;</h2></b:if>
</a><div align='center' id='CATEGORIA1' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

<b:widget id='HTML81' locked='false' title='CATEGORIA2' type='HTML'>

<b:includable id='main'>
<a href='#' onclick='Effect.toggle(&quot;CATEGORIA2&quot;,&quot;slide&quot;); return false'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/> &#9660;</h2></b:if>
</a><div align='center' id='CATEGORIA2' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

<b:widget id='HTML82' locked='false' title='CATEGORIA3' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle(&quot;CATEGORIA3&quot;,&quot;slide&quot;); return false'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/> &#9660;</h2></b:if>
</a><div align='center' id='CATEGORIA3' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

<b:widget id='HTML83' locked='false' title='CATEGORIA4' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle(&quot;CATEGORIA4&quot;,&quot;slide&quot;); return false'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/> &#9660;</h2></b:if>
</a><div align='center' id='CATEGORIA4' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Como puedes ver, en cada sección aparece el término CATEGORIA1, CATEGORIA2, CATEGORIA3... resaltado en colores distintos y que se repite tres veces.

Debes reemplazar dichos términos en cada bloque por el título que llevará el gadget. Si éste contiene acentos o espacios, aconsejo escribirlo con normalidad solo en la primera línea y "ajustarlo" borrando las tildes o los espacios para los dos restantes.

Seguidamente busca la etiqueta </head> en tu plantilla e inserta este script encima:

<!-- blsidebar menu Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>

Con ello habrás introducido Prototype y Scriptaculous. Si ya tenías instalado dichas librerías no necesitas hacerlo de nuevo. Ten en cuenta que el truco puede darnos problemas si en la plantilla tenemos instalado jQuery.

Guarda la plantilla y dirígete al apartado de Diseño>Elementos de la página.

Comprobarás que en la barra lateral aparece una lista de gadgets html-javascript con los títulos "CATEGORIA1, CATEGORIA2...". Ahora tan solo necesitas editarlos.

Puedes incluir en ellos tanto un pequeño párrafo como una imagen o simplemente enlaces (como en mi caso) hacia las etiquetas del blog, de manera que actúe como un pequeño índice.

La dirección de una etiqueta se consigue utilizando estas líneas:

<ul>
<li><a href='http://TUBLOG.blogspot.com/search/label/ETIQUETA'>TITULO</a></li>
<li><a href='http://TUBLOG.blogspot.com/search/label/ETIQUETA'>TITULO</a></li>
<li><a href='http://TUBLOG.blogspot.com/search/label/ETIQUETA'>TITULO</a></li>
<li><a href='http://TUBLOG.blogspot.com/search/label/ETIQUETA'>TITULO</a></li>
</ul>

Escribe las etiquetas con las que agrupas tus entradas tal cual están escritas (espacios y tildes incluídos) en cada apartado donde dice ETIQUETA. Sustituye la palabra TITULO por el nombre de la etiqueta o simplemente la etiqueta.

Añade líneas como esta para mostrar más etiquetas (siempre antes del cierre </ul>):

<li><a href='http://TUBLOG.blogspot.com/search/label/ETIQUETA'>TITULO</a></li>

Reemplaza TUBLOG por el nombre de tu bitácora.

Guarda los gadgets una vez hayas terminado y les hayas atribuído un título que agrupe a todas las etiquetas.

Mayac dice...

Muy bueno, agradezco que por fin nos lo explicaste. Buenisimo este blog!

Jaime Trujillo Escobedo dice...

Entonces supongo que la espera mereció la pena, Mayac. Si necesitas alguna otra cosa comenta y te ayudaré encantado.

varech dice...

Gracias Jaime por avisarme, pero lo había visto ya (no olvides que te sigo, jejejejej...).
Estoy esperando a estar sola, concentrarme y ponerme a hacerlo.
Ya te cuento
Un abrazo

PEDRO CRUZ PEREZ dice...

Hola Jaime! Lo del truco del menú que pone colores en el fondo del blog me dejó maravillado, que tal si en vez del fondo fuera posible que cambie el color de fondo de la cabecera del Blog, el fondo de los titulos del post y la sidebar.

Mira mi Blog y comprenderas mi interés.

Guía Pedagógica Global

Jaime Trujillo Escobedo dice...

¡Es cierto Varech! Completamente de acuerdo contigo, cuanta más tranquilidad mejor te saldrá el truco. Si necesitas alguna otra cosa solo tienes que decírmelo.

Abrazos!

Cocofansclub dice...

Hola jaime!!para cuando la entrada de "responder a este comentario"?? como lo tienes en tu blog lo estoy esperando!!:D
un besote!
claudia

varech dice...

Jaime, lo que yo metí en el gadget etiquetas, en un menú desplegable como uno que tú pusite, no es prácticamente lo mismo?

Jaime Trujillo Escobedo dice...

PEDRO CRUZ, acabas de darme una estupénda idea. Atento a las publicaciones que pronto os traeré ya que es probable que explique algo similar.

Jaime Trujillo Escobedo dice...

Claudia! Verás, la entrada está terminada pero me ocurre algo un tanto extraño: el código del botón "Responder" cambia al transformar los carácteres html con el conversor online y muchas cifras desaparecen. Esto produce que la plantilla no pueda guardarse y por tanto el tutorial no tenga sentido.

Tranquila, intentaré como pueda, solucionarlo.

Jaime Trujillo Escobedo dice...

Varech, lo es y no lo es. Por una parte, produce el mismo efecto pero por otra, su edición es mucho más complicada.

Piensa que al añadir el código ofrecido en esta entrada, cada elemento desplegable es un gadget y su contenido de fácil acceso y edición (clic en editar gadget), sin tener que prestar atención a códigos como es el caso del menú.

De todas formas has tenido una grandiosa idea... mmmm me has dejado con la duda ya que lo que explicas esta bastante interesante ;).

PEDRO CRUZ PEREZ dice...

Que tal Jaime! Me alegra mucho tu pronta repuesta y estaré atento a tu publicación, si viste mi Blog quiero que sepa que ha sido el producto de los consejos tuyo, El Escaparate de Rosa y Gema Blog entre otros dilectos amigos a quienes les estoy eternamente agradecido. Siempre te sigo !Palante hermano!

Gra dice...

BIEEEEEENNNNN!!!!!....AHORA MANOS A LA OBRA!!!
Mil Graaacias!!!!!!!! Sos un genio!!!! ahora quedará perfecto!!!
Saludos!!!

Jaime Trujillo Escobedo dice...

Yo también te estoy enteramente agradecido, Pedro, por tu comentario y por haberme citado junto a dos bloggeras estupéndas con las que yo también descubro muchos trucos.

¡Abrazos!

Jaime Trujillo Escobedo dice...

Jajaja ¡Eso mismo digo yo, Gra! Me alegro de haber publicado esta entrada que tanto había retrasado.

Si necesitas algo durante la instalación dímelo.
Un abrazote!

Prof. de Música dice...

:( amigos auxilio, tengo tanto tiempo intentando crear un menu desplegable para mi blog y no he podido, he intentado de todo, pero siempre se ve el desplegado; es decir el sub menu detras de la plantilla, aveces con firefox funciona bien pero no con IE, nesecito encontrar un menu que sea acorde con el diceño de la plantilla de mi blog, y que sea facil de montar. funse.blogspot.com

Jaime Trujillo Escobedo dice...

Prof. de Música, por ahora el único menú desplegable que he creado puede encontrarse en esta entrada.

Por otra parte, este truco también es atractivo ya que trata prácticamente de lo mismo: un conjunto de gadgets en la barra lateral que se despliegan para formar un menú desplegable.

miquel dice...

Hola Jaime,

estoy implementando tu fantástico menú en mi blog, pero me ocurre lo siguiente: cuando creo la entrada y la etiqueto, para que la entrada sea me aparezca exclusivamente en la entrada del menú, también me aparece en la lista de entradas generales, ¿como puedo excluirla? te lo agradecería seguro que es una tontería, pero no soy capaz de verlo. Muchas gracias de antemano.

Jaime Trujillo Escobedo dice...

Miquel, no entiendo lo que deseas hacer. Es muy extraño ya que el menú desplegable tan solo muestra los enlaces o el contenido que tú agregues en el interior de cada gadget que lo compone, no aparecen títulos de entradas de manera automática.

Prof. de Música dice...

Gracias Jaime por responder, bueno probare con este menu, solo que no encontre las lineas div id='sidebar-wrapper'
b:section class='sidebar' id='sidebar' preferred='yes' para copiar el codigo sera que se debe a la plantilla que estoy usando y que quisas su codigo html no lleva esta linea??

Jaime Trujillo Escobedo dice...

Prof. de Música, en tu caso y como estás usando una plantilla de las nuevas que ha ofrecido blogger, debes buscar esta otra línea

<div id="sidebar-right-1" class="sidebar section">

Y añadir el código debajo.

Mariona Monrós dice...

Wa Jaime muchas gracias!!! no sabes cuanto tiempo hace que quería poner esta opción en mi blog!

muchísimas gracias!! te voy a recomendar a todos los bloggers conocidos ;)

Jaime Trujillo Escobedo dice...

Acabo de visitar tu blog y pude ver lo bien que queda la barra lateral con este truco. Me alegra que hayas conseguido lo que querías, Mariona Monrós ^^.

Será todo un honor para mi ser recomendado.

Javier Alfaro dice...

cuando le doy cntrl+f no encuentro la plantilla esa (ayuda) hay disculpa que moleste tanto

Javier Alfaro dice...

dsculpa la molestia ja

Javier Alfaro dice...

pro no la encuentro

Jaime Trujillo Escobedo dice...

Javier Alfaro, en tu caso y dado que la plantilla que utilizas es prediseñada debes buscar esta otra línea de código:

<div id="sidebar-right-1" class="sidebar section">

A continuación encontrarás el comienzo de <b:widget... Pega el código encima de dicha etiqueta inicial.

Javier Alfaro dice...

jaime ya logre ponerlo pero no entiendo como poner los enlaces no ntiendo ayuda please eso de dond agrupo mis entradas sorry por la ignorancia

Jaime Trujillo Escobedo dice...

Javier, acabas de añadir secciones por medio de elementos html-javascript. Únicamente necesitas escribir el título de los enlaces e insertar su dirección en el cuerpo de cada gadget como lo harías normalmente.

Pela dice...

Hola, mi duda es la siguiente: quiero editar cada categoría, pero para ingresar sólo texto (en este caso la letra de una canción, estilo poema), pero al estar configurado para poner enlaces ( si no me equivoco) tengo un salto de línea importante. Desde dónde corrijo esto?, desde ya, muchas gracias por todo.

Pela dice...

Cómo hago para que en vez de un título (como el término CATEGORIA1 que usas) aparezca una imagen?.:D

Jaime Trujillo Escobedo dice...

Pela, atenta a las próximas entradas ya que en alguna explicaré lo que pides.

Pela dice...

OK, Jaime, estaré atento, excelente tu Blog!.

Jaime Trujillo Escobedo dice...

Pela, ya estoy preparando el tutorial.

Jaime Daza Lucena dice...
Este comentario ha sido eliminado por su autor. Siento las molestias.
Jaime Trujillo Escobedo dice...

Jaime Daza, pues El Balcón fue creado en el año 2008 y comenzó siendo un pequeño 'archivador' en donde uní el contenido que tenía distribuido entre mis diferentes blogs (plantas, recetas, ayuda blogger...). Pensé que hacer un único espacio variado sería lo más cómodo para vosotros, los lectores.

No pienso que mi humilde espacio tenga tanta fama pero si es cierto que escribir día a día y ver vuestras opiniones es algo maravilloso.

Tan solo debes esforzarte un poco para destacar en el mundo de los blogs. ¡Hay gente increíble por este mundillo!

Anónimo dice...

gracias me gusto mucho

dianmoci dice...

hola Jaime gracias por tu aporte, tengo un problema
con el gadget para los seguidores no funciona, felicitaciones sigue a delante con tus buenos posts

Jaime Trujillo Escobedo dice...

Hola Dianmoci. ¿Has probado a instalar el gadget de seguidores siguiendo este otro tutorial?

Estoy seguro de que conseguirás instalarlo.

Jaime Daza Lucena dice...

El enlace estba mal, así que como no podia editar el comentario lo borre sin querer
muy bueno tu blog
www.jaimedl-fotografodigital.blogspot.com

dianmoci dice...

Jaime probe la otra forma de instalar gadget y si funciona de nuevo gracias

Jaime Trujillo Escobedo dice...

Perfecto Dianmoci, ahora los lectores podrán seguir tu blog sin problemas.

Daniela dice...

Hola jaime resulta que no encuentro esas palabras en la plantilla de mi blog para luego pegar el codigo, que hago? Gracias :)

Jaime Trujillo Escobedo dice...

Daniela, prueba con esta alternativa pues en tu plantilla funcionará sin problemas.

Perséfoneluz dice...

Hola Jaime, no sabes el lío que tengo, resulta que hice este truco tal cual, pero solamente puse un bloque, es decir una categoría. Ahora quiero poner otras y cuando voy a la plantilla no encuentro el bloque de la categoría que ya hice.

No sé cómo puedo hacer sino para quitarlo y hacerlo todo de nuevo.

Muchas gracias. Besos.

Perséfoneluz dice...

¡Hola Jaime!

No sé si te llegó el comentario que te mandé el otro día. Si no es así entonces no hay problema porque te había hecho una consulta que ya resolví, o mejor dicho acabo de mirar mi plantilla y parece que se soluciono solo, muy raro pero lo bueno es que lo tengo todo perfecto.

Besitos. ;)

Jaime Trujillo Escobedo dice...

Perséfoneluz, los comentarios publicados se almacenan en mi Escritorio de blogger hasta que los publico. Todas tus consultas llegan sin problemas pero puedo retrasarme al responder.

Con respecto a lo ocurrido, no se trataba de un error sino de que el código de la plantilla no fue actualizado. Para evitar esto, al escribir títulos a tus gadgets y posteriormente acceder al código de la plantilla, utiliza una nueva ventana o pestaña de tal forma que el apartado Diseño > Edición de HTML cargue desde cero.

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