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.

Barra lateral oculta y "ancho total" en la zona de entradas al acceder a los artículos individualmente

En varias ocasiones me han preguntado la manera de hacer que las entradas tengan un "ancho total" cuando se abren de forma individual y que, al mismo tiempo, la sidebar (barra lateral) se oculte, permaneciendo visible únicamente en la portada del blog, en las páginas de etiquetas o de archivos, o en los resultados de búsqueda.

Para conseguirlo tan solo necesitamos agregar un bloque con unas propiedades distintas con respecto a los tamaños y que solo se ejecute en las páginas de posts individuales.

Durante este tutorial voy a utilizar los valores presentes en el CSS de la plantilla mínima que ofrece blogger. Aún así, el truco puede realizarse en plantillas modificadas ya que solo tenemos que encontrar los códigos necesarios.


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



Encuentra estos bloques de CSS (o similar):

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

¿Ves las líneas en negrita? Representan el ancho de la zona de entradas y el de la sidebar, respectivamente.

Copia ambos bloques en un documento en blanco, usando el bloc de notas o Microsoft Office Word por ejemplo.

Ahora busca la etiqueta </head> y justo encima añade este código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#main-wrapper {width: 630px;}
#sidebar-wrapper {visibility: hidden; display: none;}
</style>
</b:if>

La línea verde indica el ancho de la zona de entradas. Si te fijas, el valor utilizado (630) es la suma del ancho del main-wrapper y la de sidebar-wrapper que aparecen en los bloques que previamente reservamos.

La segunda línea, en naranja, aporta dos nuevas propiedades a la barra lateral (sidebar-wrapper), visibility: hidden; (que traducido al castellano sería visibilidad: oculta;) y display: none; (mostrar: no;).

En mi caso, la suma ha dado como resultado 630 píxeles pero los anchos de tu plantilla pueden variar, cambiando así la cifra a utilizar en la línea verde (dentro de width: 630px;).

Guarda la plantilla y accede al blog. Abre una entrada de forma individual para comprobar que la barra lateral desaparece y el contenido se expande.

Nota:

- Si en tu plantilla no aparecen los bloques de CSS indicados en el primer paso, o simplemente al agregar el código antes de la etiqueta </head> no se percibe cambio alguno, deja un comentario con la dirección de tu blog.

La solución será tan simple como cambiar la ID (nombre identificativo) de cada elemento (main-wrapper y sidebar-wrapper).

Cocofansclub dice...

Allá voy con este truco MAESTRO!!luego te contaré!!:)
besitos
claudia

Jaime Trujillo Escobedo dice...

Perfecto, Claudia. ¡Suerte!

Aurora dice...

Muy chula la idea.
Otro tema, creo que he dado un poco con cómo hace un menú basado en enlaces a etiquetas, aunque soy muy novata. Simplemente he creado un menú y a cada pestaña le he puesto la dirección que aparece cuando pulso una etiqueta de la nube de etiquetas. Supongo que por ahí van los tiros.
De todas formas, sigo atenta para ver cuál es tu propuesta.
Un saludo

Cocofansclub dice...

Hola Jaime!!ya esta este truco en mi plantilla! y creo que salio bien,lo unico que se me estira demasiado es "la suscripcion a comentarios"le das un vistazo a ver que opinas??
gracias como siempre por ser tan claro en enseñarnos!
claudia

Cocofansclub dice...

Jaime puede ser que... favorece a la apertura de la entrada individual, me dio la imprecion que acelera la carga puede ser??jiji (como si yo supiera )jajaja
besotes

Gra dice...

Hola !!! esto esta espectacular! cuando arregle lo del menu de mis etiquetas (aun no se que hacer) lo pruebo...esta buenisismo!
Gracias!!

Jaime Trujillo Escobedo dice...

Aurora, así es exactamente como debe hacerse ;). De todas formas, en breve publicaré artículos que hablen sobre los índices o las "listas de contenido" en la barra lateral.

Jaime Trujillo Escobedo dice...

Cocofansclub, por supuesto que acelera la carga del blog. Lo mejor de todo es que únicamente se debe cargar el contenido (artículo), no los gadgets de la sidebar y por tanto la navegación es más rápida.

En cuanto al recuadro para suscribirse a los comentarios... tienes razón.

La solución está en añadir la línea que te muestro en negrita dentro del código:

<div style="margin-top: 14px; margin-bottom: 14px; border: 1px solid #cccccc; padding: 4px; width: 370px;">

¡Abrazotes!

Jaime Trujillo Escobedo dice...

Hay entradas en camino, Gra, que hablan especialmente de temas como el del menú que yo utilizo (construido con etiquetas).

En el plazo de 2 semanas las publicaré ^^.

Gra dice...

Aguardo con ansias !!!!..mejor espero antes de hacer un desastre !!! :)
Gracias por acordarte !!!
Saludos!!!!

Sebastian II dice...

Excelente!!!

Jaime Trujillo Escobedo dice...

¿Verdad que resulta más cómodo poder leer artículos en "ancho total", Sebastian II?

Saludos!

Ana Laura dice...

Quedó muy bien; como siempre tus sugerencias son muy útiles y tus instrucciones muy fáciles de seguir. Gracias!!

Jaime Trujillo Escobedo dice...

Gra! Ya he publicado la entrada. Si necesitas ayuda al crear tu sidebar desplegable avísame.

Jaime Trujillo Escobedo dice...

Muy bien es poco, Ana Laura! Es comodísimo leer tus artículos con "ancho total". Gracias a ti por comentar ;).

Indias dice...

He probado este truco y funciona a la perfección, eres un maestro. Seguiré practicando con otros y curioseando en tu web ya que soy novato y quiero cambiar varias cosas pero no sé muy bien cómo hacerlo...
Gracias por todo

Driwrgy dice...

Este también quiero aplicarlo pero tengo que tener en cuenta el espacio que me quedará tras añadir mi segunda barra lateral así que lo dejo también en pendientes. Bss.

Jaime Trujillo Escobedo dice...

Pues consulta, realiza comentarios, Indias, cada vez que necesites algo. Aprender es lo fundamental y parece que tu blog va mejorando por momentos.

Gracias a ti por comentar!

Jaime Trujillo Escobedo dice...

Así es, Driwrgy. Hasta que no tengas las barras laterales configuradas no podrás instalar esto: ten en cuenta que para este truco se necesita conocer el ancho de cada apartado del blog, de manera que no se 'deforme' la plantilla al utilizarlo.

- [F]asteN [M]ovieS - dice...

Hola Jaime, como te va? Mira pues, intente hacer el truco y no salen los Codigos CCS que dices ENCONTRAR algo similar en el PRIMER PASO. Te dejo mi URL del Blog, si? Porfavor si me podrias ayudar, Gracias :)!.


http://fastenmovies.blogspot.com

Jaime Trujillo Escobedo dice...

FastenMovies, dado que tu plantilla ha sido modificada, ignora las indicaciones ofrecidas y limítate a incluir esto antes de la etiqueta </head>:

<b:if cond='data:blog.pageType == "item"'>
<style>#sidebar-right-1{display:none;}#sidebar-left-1{display:none;}.main-inner .section {margin-left: -140px;padding: 0;width: 737px;}</style></b:if>

Guarda la plantilla y accede a una entrada de forma individual para comprobar el resultado. Si recibes cualquier error avísame. ¡Saludos!

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