Cambiando de orientación la Sidebar

Cambiando de orientación la Sidebar

En esta oportunidad veremos como modificar distintos atributos en los estilos de la plantilla para cambiar la orientación de la sidebar (izquierda o derecha).

Si seguimos la guía al pié de la letra obtendremos los resultados deseados.


Paso 1: Aplicando alineación a la sidebar:

Vamos a ''Diseño/Edición HTML'' en donde buscamos el siguiente código:
#sidebar-wrapper

Debajo de éste veremos distintas propiedades CSS, la que modificaremos será esta:
float:
Dependiendo del lugar que deseemos situarla, le aplicaremos el valor correspondiente, deberá quedar así:

float: left; /* sidebar a la izquierda */
float: right; /* sidebar a la derecha */

Paso 2: Aplicando alineación al main-wrapper:

Aclaremos que el main-wrapper corresponde a la zona en la que la que se muestran las entradas, este paso no es necesario si éste no tiene el atributo float, en caso de tenerlo, debemos hacerlo o sino la sidebar no cambiará de posición.

Buscamos la siguiente zona en la hoja de estilos:
#main-wrapper
Debajo de ésta buscamos el atributo float, y le asignamos la dirección contraria a la que le asignamos a la sidebar (si la sidebar está a la izquierda ''left'', la asignaremos a la derecha ''right'')

Por ejemplo:

Sidebar a la izquierda y main-wrapper a la derecha:

#sidebar-wrapper {
float: left;
otros atributos
}

#main-wrapper {
float: right;
otros atributos
}

Una vez terminadas las modificiaciones a nuestra plantilla guardamos los cambios.
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Cómo obtener la primera imagen del post en Blogger sin Javascript # - Cómo obtener la primera imagen del post en Blogger sin Javascript
Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger # - Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger