[Tutoriales] ¿Cómo hacer tu propia plantilla?

Holiii!!! Ahora mismo me estoy muriendo por dentro. Tenía esta entrada preparada de ayer, pero hoy, en casa de mi abuela que estoy ahora, fui a publicarla y vi que no estaba, ¡se había borrado! Así que he hecho está versión de el tutorial, un poquito menos específico (bastante menos especifico), y más corto, y en varias partes, ya que no me ha dado tiempo de terminarlo. Por hoy, solo voy a explicar lo básico, y cómo personalizar los títulos de los gadget.

Espero que os guste!!


Para empezar ha hacer tu plantilla, lo primero de todo es tener un blog. Podéis hacerla en vuestro blog principal, la plantilla, pero yo os recomiendo que hagáis otro blog, o que hagáis la entrada en un blog de pruebas que ya tengan. Para los que son nuevos en blogger, voy a ir diciendo cómo, poco a poco.

Lo primero, hay que ir a blogger, y pulsar en Nuevo blog, y allí rellenas el cuadrado que te sale. Pones el nombre del blog, una dirección (si es en un blog de prueba para no liarse de si está cogido o no, os recomiendo tirar las manos en el teclado y listo), y finalmente elegimos una plantilla.

En mi caso, yo he elegido una plantilla simple para hacer esta plantilla. Ahora entras en el blog que has creado, si quieres le das a ver blog, para ver que tal, y ahora vamos a Diseño>Diseñador de Plantillas, para poder cambiar un par de cosas básicas. En mi caso, para empezar, en la primera opción, he cambiado la plantilla simple que elegí, por otra plantilla simple, la tercera:

Y ahora voy a cambiar el fondo por uno que me guste más, y voy a cambiar el ancho del blog, en las siguientes dos pestañas de el Diseñador de Plantillas. El fondo lo podéis buscar en internet, o podéis buscarlo en BG Patterns. Yo he hecho esta misma, que podéis utilizar ustedes también:

Además, también le cambio la gama de colores para que se cambien los colores de los links sin tener que estar haciéndolo manualmente en la pestaña de Avanzado. Y en esa misma pestaña, podemos personalizar el resto de cosas, como la letra del blog, el color etc. Después de hacer eso en el blog que estoy haciendo, me queda así:

Ahora que ya tenemos una base sobre la que hacer nuestro blog en condiciones, vamos a empezar a personalizarlo. Lo primero que voy a hacer es quitar la barra de navegación (donde pone lo de salir, siguiente blog, y esas cosas arriba del blog) ya que me parece que no hace falta tenerla en un blog, es innecesaria, y estropea un poco la estética del blog. Para quitarla vamos a Diseño>Barra de Navegación, y nos aparecerá una ventana para elegir la estética de esta barra, y al final de todo, le damos a la opción No. Miren la diferencia ahora, ¿no está mejor?

Lo siguiente que voy ha hacer, es una entrada para poder ver como queda en el blog. Para ello, pondré un texto de Este Generador de Textos, y le pondré un blockquote, varias frases en negrita, en cursiva, y en subrayado, algunos links, una imagen, un salto de línea (la hojita que está rota, para poner lo de seguir leyendo>>) y unas palabras en encabezado secundario, encabezado y subencabezado. Y finalmente le damos a ver blog, para poder ver cómo se muestra la entrada en nuestro blog:

Y ahora por fin, vamos a empezar con lo bueno, con la personalización en serio, en la Plantilla. Por ahora, voy a empezar con los títulos de los gadget, esto podéis hacerlo con ESTE tutorial, o podéis hacerlo con lo digo aquí, aunque es solo un ejemplo, para poner los gadget en lacitos:

Solo tienen que ir a Plantilla>Editar HTML> y buscan ]]></b:skin>, y justo antes, añaden este códgio y lo personalizan:

.sidebar .widget h2 {
background: darkred; /*Color del fondo*/
color: rgba(232, 211, 208, 0.99);/*Color del texto*/
padding: 1px;
padding-left: 50px;
box-shadow: inset 0 0 20px rgba(67, 4, 4, 0.99);/*Sombra del gadget*/
}
.sidebar h2:after {
content: " ";
position: absolute;
display: block;
width: 0px;
height: 0px;
top: 7px;
right: -33px;
border-color: rgb(113, 1, 1) transparent rgb(113, 1, 1) rgb(113, 1, 1); /*Colores del lazo*/
border-style: solid;
border-width: 17px;
}
.sidebar h2:before{
content: "";
position: absolute;
display: block;
border-color: rgb(55, 0, 0) rgb(113, 1, 1) rgb(113, 1, 1) rgb(55, 0, 0);/*Colores del lazo*/
border-style: solid;
border-width: 5px 10px 5px 10px;
top: 32px;
right: 1px;
}
.sidebar .widget-content:before {
content: " ";
position: absolute;
display: block;
width: 0px;
height: 0px;
top: 8px;
left: -34px;
border-color: rgb(113, 1, 1) rgb(113, 1, 1) rgb(113, 1, 1)transparent;/*Colores del lazo*/
border-style: solid;
border-width: 17px;
}
.sidebar .widget-content:after {
content: "";
position: absolute;
display: block;
border-color: rgb(55, 0, 0) rgb(55, 0, 0) rgb(113, 1, 1) rgb(113, 1, 1);/*Colores del lazo*/
border-style: solid;
border-width: 5px 10px 5px 10px;
top: 32px;
left: 0px;
}

Y ya tenemos el título de los gadget. El interior de los gadget no lo voy a editar en esta plantilla porque quedarían demasiado pequeños para el lazo que hice, así que solo editaré el título, pero si quisierais editar el interior, tendrías que poner:

.widget-content {
padding: 8px;
background: color del fondo;
border-color:color de los bordes;
border-width:ancho del borde;
border-style:estilo del borde;
}

Y solo tendrías que ir personalizándolo poco a poco.

Esto es todo por ahora, espero que os haya gustado mucho el tutorial y que os haya servido, el próximo día, traeré la segunda parte, con cómo personalizar el título de las entradas, el pie de página y algunas cosas más.

Beshus y hasta mañana!!