Al añadir unas líneas de CSS podemos conseguir que la sidebar o barra lateral del blog se muestre justo al lado del título del blog, a su misma altura y con un aspecto bastante profesional.
Esto se consigue por medio de los márgenes, los cuales serán negativos para hacer que la sidebar se "traslade" hacia arriba y poder así conseguir la estructura deseada...
Busca estos bloques de CSS en tu plantilla (estarán un tanto separados, por lo que encuentra primero uno y después el otro):
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#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 */
}
Ten en cuenta que posiblemente no tengan el mismo aspecto. Lo que realmente debe coincidir es el nombre del elemento (header-wrapper y sidebar-wrapper).
Añádeles las líneas que ves en color rojo...
#header-wrapper {
width:420px;
float: left;
border:1px solid $bordercolor;
}
#sidebar-wrapper {
margin-top: -110px;
margin-left: 30px;
width: 220px;
float: right;
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 */
}
La primera línea que has añadido hará que la cabecera del blog se encoga, ofreciendo así un mayor espacio para que la barra lateral pueda situarse a su derecha.
Las otras dos líneas hacen que la sidebar "suba" -110 píxeles (debe ser un valor en negativo para que ascienda de posición) y 30 píxeles hacia la derecha.
Puedes editar dichos valores para adaptarlo a tu blog.
Guarda la plantilla para terminar: