Cómo hacer un layout básico

Hey babies! Hoy, como casi todo el mes de agosto, traigo un tutorial, pero esta vez es uno un poco más especial, ya que se trata de cómo hacer un layout básico y a partir de ahí empezar a personalizarlo como más os guste.

Post de prueba

Acabas de crear tu blog, con su nombre, URL, pero todavía no has tocado nada más. Lo primero que hago yo siempre es crear posts de prueba. Puedes usar cualquier texto random que tengas por ahí o sacarlo de algún generador de Lorem Ipsum, yo siempre los busco en Google y los dos que más uso son Lipsum y Cupcake Ipsum (éste último es si me apetece algo más cute, pero tiene la particularidad de separar mucho los párrafos, así que los junto manualmente).

Ahora que tienes el texto, lo que hago es poner algunas palabras en negrita, cursiva, subrayadas, con link, vamos, todo lo que uso en mi día a día para hacer un post, además de las listas (con viñetas y números), blockquote (citas) y un leer más, si nos interesa. Aquí tampoco debes olvidar los diferentes tipos de título, poner una imagen de portada y alguna en medio y, si quieres ir más allá, una imagen con subtítulo.

❗ Si quieres tener varios posts de prueba y te da pereza estar haciendo lo mismo una y otra vez, sólo tienes que copiar el HTML del post y pegarlo en otro post.

Ejemplo de cómo hago posts de prueba

Diseño del modelo

Con el post de prueba ya hecho, ve a Tema y en las Plantillas, elige el modelo Viajes (o Travel), el que nos interesa es el segundo, es decir, el que se llama Flight y ahí mismo podemos darle a Personalizar.

En la opción Contexto, eliminamos esa horrible imagen y elegimos un fondo que nos guste o un color plano. Ahora ajustamos el ancho que tendrá el blog. Aquí también es fácil: sólo tienes que determinar la largura total del blog y de la sidebar. Basta con mover la barrita o escribir el número específico de píxeles en los recuadros.

❗ Si tu layout va a tener dos sidebars, recomiendo que la anchura quede entre 900px y 1100px, para que así se ajuste bien a monitores pequeños y no quede minúsculo en pantallas grandes.

En Diseño es donde decidiremos, como su propio nombre indica, qué diseño tendrá nuestro blog, eso es a elección de cada uno. ¡No olvides aplicar todo al blog!

Ahora vamos a la opción de Avanzado, que aunque tenga ese nombre, no es muy complicado de usar. En Texto de la página, puedes elegir la fuente del cuerpo del blog, el tamaño y el color. Generalmente se usan fuentes como Trebuchet o Arial, pero también quedan bien Open Sans, Calibri, Arimo, Cantarell, Droid Sans, Hanuman y PT Sans, depende del gusto personal.

Después pasamos a la opción de Fondos, donde en el fondo principal debes poner transparente. Y en el fondo exterior, eliges un color acorde a la paleta de colores que hayas decidido. Así ya tienes un fondo para probar las personalizaciones de cómo quedará el resultado final. ¡No olvides aplicarlo al blog!

En Enlaces, elige los colores de los links del blog. Color del enlace es el color del link normal, color de enlace visitado es el color que queda cuando le haces clic encima y color del enlace cuando se coloca el ratón sobre él, su propio nombre lo dice 😁.

Título de blog, coloca el tamaño de la fuente en 0px, eso te hará ahorrar mucho espacio en la cabecera del blog, aunque más adelante enseñaré cómo ocultarlo o eliminar el título del blog.

Ahora vamos al Título de la entrada, por ahora las demás opciones no serán usadas. Nos enfocaremos en qué fuentes usar que estén en Blogger, tipo Georgia y Time New Roman, ya que es un tutorial básico. En esta pestaña eliges la fuente, el tamaño y el color, muy simple.

En Fondo de la entrada, ponlo transparente, si aún no lo habías puesto.

En Color del título del gadget, haz lo mismo que con el título de la entrada. Elige el color, el tamaño y la fuente, sería genial que combinase con el título de la entrada.

En Texto del gadget debes elegir la fuente, el tamaño y el color de lo que estará escrito en los diferentes gadgets de la sidebar.

En Enlaces de los gadgets es lo mismo que los enlaces de la página.

En Fondo de la columna lateral tienes dos opciones: en el color de fondo puedes dejarlo transparente - para hacer los gadgets separados - o de color de la paleta de colores que hayas elegido para hacer que combine con el área de posts. En Color de biselado ponlo siempre en transparente (queda horrible puesto). Y puedes guardar los cambios.

CONSEJO: Antes de empezar la siguiente fase de la edición, ve a Diseño y luego a Editar el área de Entradas del blog. Si quieres colocar las etiquetas, comentarios y autor bajo el título del blog, basta arrastrar las cajitas a la posición bajo el título. Recuerda hacerlo antes de editar el HTML, porque después no funcionará. Más adelante, en un posterior post, subiré un tutorial de cómo hacer que esos elementos queden debajo del título.

Editar HTML

Volvemos a Tema, pero esta vez vamos a Editar HTML y vamos a quitar cosas molestas de la plantilla Viajes, empezando por los bordes, algo que ya hice un tutorial de cómo hacerlo { AQUÍ }.

Ahora vamos a quitar la navbar, vamos a Diseño darle a editar a la Barra de navegación y elegir la opción Desactivar y ahora retiramos el espacio que deja. Buscamos: /* Variable definitions y justo encima colocamos el siguiente código:

#navbar-iframe {
display: none;
}

body .navbar {
height: 0px;
}

.content-outer {
margin-top: 0px;
}

Para retirar el Attribution, donde dice Tecnologia de Blogger que solo ocupa espacio innecesario, busca Attribution1' locked='true' y cambia ese true por false. Guarda los cambios y podremos borrarlo desde Diseño. Pero no siempre te deja eliminarlo, si es tu caso, podrás esconderlo, basta con buscar ]]></b:skin> y pegar justo encima:

#Attribution1 {
display: none;
}

Para retirar el fondo gris de los comentarios, busca #cccccc y sustitúyelos por transparent.

Y por fin, para quitar el texto de Entradas Atom, basta con buscar de nuevo ]]></b:skin> y justo encima colocar:

.feed-links {
display: none;
}

¡Y listo! Ya tenemos el layout básico terminado y listo para personalizarlo como más os apetezca.

Y hasta aquí esta entrada tan laaarga, pero tenía muchas ganas de hacerla, ya que a raíz de esta, puedo ir haciendo otros tutoriales. Si tenéis cualquier duda comentadlo sin ningún problema 🤗.