[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!!

Comentarios

  1. Buen tutorial ^^, para quien empieza le ira muy bien ^^
    saludos n.n

    ResponderEliminar
  2. Tengo muchas ganas de ir editando mis blogs así que estaré pendiente de todo lo que publiques jeje ^^

    Como decís arriba, le acabo de quitar la barra de navegación de blogger a mi blog porque quedaba feo, y lo peor de todo es que no me daba cuenta xD

    En fin, muchas gracias y besos!

    ResponderEliminar
  3. Buen tuto! Yo que soy un desastre haciendo plantillas tendré que usarlo, aunque prefiero bajarlas de internet y no tener que hacer nada xD
    Beshos

    ResponderEliminar

Publicar un comentario

Holiii!!!! Si vas a dejarme un comentario, ten en cuenta las siguientes reglas:
-Nada de spam, si eso, me mandan un correo o me piden publi.
-Nada de insultos
-Nada de críticas ofensivas, cada uno tiene su propia opinión.

Aquí tenéis emoticonos para los coments:

(✿◠‿◠) (◡‿◡✿) (◕‿◕✿) (✖╭╮✖) (≧◡≦) (¬_¬) (◑‿◐) (◕‿-) ✖‿✖ (-’_’-) (╥_╥) (╯_╰) (╯3╰) (o_-) (¬‿¬) (◣_◢) (∪ ◡ ∪) (≧ω≦) o(≧o≦)o (⋋▂⋌) (॓_॔) (╯ಊ╰) (─‿‿─) ‹(•¿•)› (╯︵╰,) (︶︹︺) (∩︵∩) (。◕‿◕。) (⊙_◎) (~ ̄▽ ̄)~ (︶ω︶) (+_+) (。♥‿♥。) (✿ ♥‿♥) ♥╣[-_-]╠♥ ٩(͡๏̯͡๏)۶ ٩(-̮̮̃•̃)۶ ٩(̾●̮̮̃̾•̃̾)۶ ٩(-̮̮̃-̃)۶ (u_u) (*_*) (º_º) ٩(×̯×)۶ (ñ_ñ) (∩▂∩) (¬▂¬)ヽ(o`皿′o)ノ(・∀・ )( ̄(エ) ̄)( ̄へ ̄)(  ゚,_ゝ゚)(ι´Д`)ノ(・ェ-)ლ(́◉◞౪◟◉‵ლ)щ(ಠ益ಠщ)(ノಠ益ಠ)┻━┻。◕ ‿ ◕。ಠ_ಠ( °٢° )ʘ‿ʘಥ⌣ಥಥ‿ಥ(ΘεΘ;)(n˘v˘•)¬(✪㉨✪)ヽ(๏∀๏ )ノ(╹ェ╹)╮(─▽─)╭щ(ಥДಥщ)≖‿≖(ノ◕ヮ◕)ノ*:・゚✧(⊙ヮ⊙)ᕦ(ò_óˇ)ᕤᕙ(⇀‸↼‶)ᕗ(◡ಠ(•⊙ω⊙•)‘︿’( ´∀`)☆(≧ω≦)(´ー`)(つд`)( ̄。 ̄)(*~▽~)( ^▽^)σ)~O~)(=゜ω゜)(´ω`)(ノ_・。)(-_- )ノ(´ヘ`;)(^^;)( ´∀` )

Beshus mis gatitos!!

Entradas populares de este blog

¡Panini Manga licencia el "yuri verde"! La esperada llegada de "El chico que me gusta no es un chico"

Atelier of Witch Hat: ¿manga u obra de arte? Reseñando los vol. 1-10

[Storyteller] Dante