Cómo alinear a la derecha elementos en un blog de Blogger.com

Hoy queremos abrir una nueva sección sobre Blogger.com, con la única intención de ayudar a nuestros lectores actuales y nuevos que utilicen la plataforma de Blogger.com para sus blogs.. Publicaremos cada semana tutoriales claros y con imágenes acerca de la modificación de plantillas, consejos de Seo y asi..

Hoy comenzamos con el primero, y aprovecho la ocasión para responder a un usuario que me pregunta:

Cómo hago para alinear a la derecha el header de mi blog en Blogger.

Por lo tanto les enseñaré como centrar o alinear a la derecha el header, título o descripción.

Cuando se carga una imagen en el header/encabezamiento en Blogger, la misma por defecto se alinea a la izquierda y no hay manera de elegir una alineación diferente que se visualice al centro o derecha de la pantalla del diseño/layout.

Cuando nos dirigimos a Diseño > Elemento de la página > Cabecera > Editar.

1. Detrás del título y la descripción
2. En lugar del título y la descripción
3. Colocar la descripción después de la imagen

La ventana del gadget tiene éste aspecto:

Donde está el enlace “Eliminar imagen“, si tienes otra para reemplazarla, entonces eliminala, y selecciona una nueva indicando uno de las 3 opciones disponible que citamos anteriormente y estan en la imagen bajo la voz “Ubicación“. El header se posicionará automáticamente a la derecha del header mas o menos de ésta manera:

Para modificar la posición del header debemos ir en Diseño > Edición de HTML. Y buscas la lineas ]]></b:skin> y pega el código relativo justo antes. O en alternativa también puedes ir en Diseñador de plantillas > Avanzado > Añadir CSS y pegar el código en el box que sale en esa opción. Estos 2 procedimiento llevan al mismo resultado, y por lo tanto escoge el que creas más sencillo, en el primero para guardar los cambios debemos hacer clic en el botón “Guardar Plantilla“, mientras en el segundo “Aplica al blog“.

Imagen del header agregada en “Detrás del título y la descripción”:

En éste caso Blogger agrega una imagen como si fuera un fondo del blog. Para alinearla de manera diferente debemos reposicionar el background del header agregando el respectivo CSS. Este código no influenciará la posición del título y la descripción.

Si queremos alinearla al centro debemos utilizar el siguiente código:

#header-inner {background-position: center !important; width: 100% !important;}

Pero si deseamos alinear la imagen a la derecha, usamos éste otro código:

#header-inner {background-position: right !important; width: 100% !important;}

Y éstos son los resultados:

Como se puede notar el titulo y la descripción quedan siempre alineados a la izquierda, mientras vienen solamente modificado el alineamento del fondo/header.

Espero que con ésto ahiga resuelto todas las dudas sobre el alineamento del header en Blogger.com.