Cuando empecé a adaptar el primer template para Blogger, ya tenía pensada la idea de hacer un tutorial para que los sufridos usuarios de esta plataforma olvidada puedan crear su propia plantilla para el blog, sin tener que esperar a que alguien adapte uno de los miles diseños disponibles para Wordpress. He decidido dividirlo en varias partes para que no se haga tan pesado de leer y para estructurarlo en distintos capítulos en función de los pasos que se suelen seguir al diseñar un theme de este tipo.
Antes de empezar, necesitarás tener unos conocimientos básicos sobre HTML y CSS principalmente (más CSS que HTML). También ayudará bastante tu experiencia como usuario de Blogger a la hora de modificar su código y hacerlo funcionar correctamente. De todas formas, al final de este post encontrarás algunos enlaces de manuales sobre CSS y HTML.
Introducción.
Todas las plantillas de Blogger se caracterizan por tener una composición específica, formada por un “header” o título principal, una o varias columnas laterales (sidebars), una sección donde se muestran las entradas del blog denominada “main” y por último, una parte inferior o “footer” en la que se suelen incluir los créditos y otros enlaces. Si le echas un vistazo a su código en edición HTML, puedes ver que toda una primera parte comprendida entre las etiquetas “head”, es la encargada de definir el estilo de estos elementos de forma individual y también en su conjunto mediante los códigos “body”, “outer-wrapper”, etc. La segunda parte de la plantilla, determinada por la etiqueta , es la que establece el contenido de la página y define la estructura principal de la misma. Para que te hagas una idea, el código HTML sería el encargado de poner los ladrillos, levantar las paredes y construir el armazón de una casa, mientras que el código CSS se encarga de elegir los colores, pintar las paredes y personalizar su estilo.
Estructura.
En el caso particular de Blogger, el body de la plantilla va definiendo uno a uno todos estos elementos y su contenido por orden de aparición. Dentro de cada uno de ellos se encuentran las secciones, que son los apartados que puedes ver al agregar un widget en la pestaña “Elementos de página” haciendo click en “Añadir un elemento de página” y en cada sección se incluyen los distintos widgets que hayas creado. Este es un ejemplo de sidebar con un único widget:
Personalización.
Como puedes ver, es más sencillo de lo que parece a primera vista, ya que tiene una estructura bastante lógica con un orden concreto. Seguramente, has modificado alguna vez el código CSS del sidebar, definido por una id, #sidebar-wrapper y una clase, .sidebar (segunda línea del código anterior) que suele estar casi al final del CSS. La diferencia entre una clase y una id es que la segunda es única, es decir, no puede haber más de un elemento con la misma id, mientras que la clase (class) puede aplicarse a más de un elemento y su estilo CSS se define mediante un punto en lugar de una almohadilla.
Por defecto, cada parte de la plantilla suele contener una única sección que alberga los distintos elementos de página que añades, pero puede que necesites crear una segunda sección, por ejemplo, dentro del sidebar para aplicarle un estilo diferente o incluir otra imagen de fondo. Para ello, sólamente tienes que copiar el código comprendido entre las etiquetas
El código “widget-content” define el contenido de cada widget o elemento de página que has agregado a través del panel de Blogger. Algunas plantillas incluyen una clase CSS con el mismo nombre (widget-content) que determina el margen del interior de cada widget, el color, etc, mientras que la clase “.widget” define el estilo de éste en su totalidad, incluyendo el título y estableciendo su posición dentro del sidebar, header o la sección que corresponda.
El resto de las partes de la plantilla queda definida de la misma forma. No obstante, en el resto de capítulos de este tutorial se analizarán todas y cada una de ellas para ver los errores más comunes y las infinitas posibilidades de personalización que ofrecen las hojas de estilos CSS. Si tienes alguna sugerencia o no entiendes algo de este artículo, no dudes en dejar tus comentarios y compartir tus ideas con todos nosotros.
إرسال تعليق