AGREGAR UNA NUEVA SIDEBAR

Respondiendo al siguiente comentario de Cris me decidí a explicar como crear una nueva sidebar.

"Llevo unos días que se me ha metido e la cocorota poner una segunda colmna a mi blog, porque ya no me caben las cosas en mi columna lateral. He buscado instucciones en google pero no lo he conseguido, no me acabo de enterar y casi la lío.Podrias hacer una entrada sobre esto? ¿Hay que cumplir algún reqisito para poder hacer eso?"

Lo primero comentarte Cris es que nada en el blog es fijo, es decir podemos crear cualquier cosa que creamos oportuna, el único inconveniente es saber hacerlo, ya que para este tipo de cosas el asistente de blogger no nos sirve, deberemos modificar nuestra plantilla mediante código HTML y CSS. Lo ideal sería que todos supieramos estos lenguajes pero como todo, es cuestión de ponerle ganas y pensar un poco, cuando nos ponemos a modificar código nada es automático, debemos de ajustar los códigos a nuestros requerimientos, por tanto intentaré explicar de la forma mas clara posible como hacerlo.

En primer lugar deberemos centrarnos en las estructuras que están implicadas, que principalmente son:Veamos como se refleja esto en el código:

Iremos a la plantilla de nuestro blog, en el caso de blogger Diseño->Edicición de HTML. Antes de nada recomendaros realizar una copia de vuestra plantilla y la búsqueda rápida mediante las teclas Ctrl+F para buscar fragmentos de código.

Lo fundamental a la hora de hacer estas modificaciones es ser conscientes del tamaño del que disponemos. Por tanto nos fijaremos en el atributo width de main-wrapper que es el área donde se muestran los post y de sidebar-wrapper que será la sidebar existente, en el código os aparecerá de la siguiente forma:


#main-wrapper {
padding-top: 0px;
width: 500px;
float: right;
....
}

#sidebar-wrapper {
padding-top: 160px;
padding-right: 30px;
padding-left: 15px;
width: 210px;
float: left;
....
}


Estos fragmentos de código no serán exactamente iguales en vuestro caso, pero lo importante es entender lo que significa. Lo señalado en azul es el ancho y por tanto tendremos que sumar esos valores para saber del ancho del que disponemos, en este caso sería 500px de main + 210px de sidebar =710px. Por tanto dispondríamos de 710px. Es evidente que si añadimos una nueva sidebar tendremos que reducir alguno de estos valores para hacerla encajar. Lo común será crear una nueva sidebar con el mismo ancho que la que tenemos y reducir el espacio del main.

Teniendo esto claro, procederemos a agregar la nueva zona y lo haremos de la siguiente forma:

Buscaremos el fragmento de código con la siguiente estructura.


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
......AQUI OS APARECERÁ INFORMACION DE VUESTROS GADGETS.
</b:section>
AQUI ES DONDE AÑADIREMOS EL EL CODIGO.
</div>


Sustituiremos la línea que señalé en azul por lo siguiente:

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

Los ID no deben coincidir, observamos como el id de la primera sidebar se llama sidebar y el id de la segunda sidebar se llama sidebar2



Si guardáramos los cambios en este punto, lo que nos pasaría sería que se nos deformaría todo, ya que le estamos agregando una nueva sidebar que no cabe!, por tanto se solaparían y saldría todo desordenado, por tanto es en este punto donde tendremos que ajustar los anchos de cada elemento. Teniendo en cuenta los datos que dedujimos al principio, lo normal sería agregar una sidebar del mismo tamaño que la existente y reducir el tamaño del 'centro', para ello lo que haremos será copiar un nuevo fragmento de código especificanto las características de la nueva sidebar. Lo haremos de la siguiente forma:


#sidebar-wrapper {
padding-top: 160px;
padding-right: 30px;
padding-left: 15px;
width: 210px;
float: left;
....
}

#sidebar2-wrapper {
padding-top: 160px;
padding-right: 30px;
padding-left: 15px;
width: 210px;
float: right;
....
}

La parte señalada en rojo es la que añadimos justamente en la parte inferior del código azul, que es el código de la primera sidebar que teníamos anteriormente pero modificando en la primera linea #sidebar-wrapper por sidebar2-wrapper, los atributos los dejaremos todos igual con el objetivo que sean ambas columnas iguales. Lo único que cambiaremos será float que pondremos right o left dependiendo de donde queramos la nueva columna.

Como punto final adaptaremos el tamaño de la parte central. Como ejemplo al principio os comenté que disponíamos de 710px que en vuestro caso será otro valor, pues los que haremos será sumar el valor de las 2 sidebar en el ejemplo width de sidebar=160px + width sidebar2=160px serían un total de 320px, si teníamos al principio 710px entonces nos quedará para la parte central: 710px-320px=390px. Este sería el valor que tendremos que modificar en el width del main-wrapper. De esta forma nos quedaría todo bien cuadrado.

Ahora solo queda guadar los cambios y esperar que todo haya salido bien. Os recomiendo hacer esto con tiempo y intentando entender bien cada uno de los pasos ya que de no ser así el resultado será un fracaso. Espero hayáis entendido el procedimiento, ya me contaréis vuestras anécdotas :).

ICONOS EN TITULOS DE POST

Añadir una pequeña imagen en el título de los post puede ser algo bastante interesante, rompe con la monotonía de las letras y puede resultar bastante ilustrativo siempre y cuando la elección de la imagen sea la correcta. Son del tipo de detalles que el lector agradece inconscientemente, por tanto os voy a mostrar varias formas de insertar estas pequeñas imagenes.

Este es un ejemplo:
Os voy a mostrar 2 formas de insertar los iconos, la primera será agregar un icono en un post concreto y la segunda agregar un icono fijo para todos los post.

En el título de un post concreto:

Cuando editamos una entrada, en el caso de blogger tenemos en la parte superior una casilla donde introducimos el título.

Tendremos que añadir lo siguiente:

<img src="URL DEL ICONO" />


Poner un icono al principio del post:

<img src="URL DEL ICONO" />TITULO DEL POST

Si queremos añadirlo al final:

TITULO DEL POST<img src="URL DEL ICONO" />


En medio del título:

TITULO <img src="URL DEL ICONO" /> DEL POST

Lo único que tendréis que modificar es la URL DEL ICONO, podréis encontrar todos los iconos que imagineis aqui eso si la búsqueda la tendréis que hacer en inglés, ya que el buscador es inglés. Como siempre podréis alojar las imagenes aqui para conseguir la url del icono.

En todos los post:

Deberemos de ir la plantilla de nuestro sitio, en el caso de blogger accederemos siguiendo Diseño->Edición de HTML y marcaremos la casilla de expandir artilugios.

Buscaremos el siguiente fragmento de código:

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>



Si queremos el icono al principio del título del post, lo sustituiremos por:

<b:if cond='data:post.url'><img src="URL DEL ICONO" />
<a expr:href='data:post.url'><data:post.title/></a>


Si en cambio lo queremos al final, lo sustituiremos por:

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/><img src="URL DEL ICONO" /></a>


Nota: Podéis observar al principio de este post de donde conseguir los iconos y obtener su dirección. Suerte y espero ver de aquí en adelante vuestros títulos decorados ;)