Hola! Hoy vamos a empezar a ver cómo pueden hacer sus propias plantillas; como les había contado, la idea es ayudarlos a entender mejor los códigos HTML y el CSS.
Esta primera entrada es realmente muy básica, y quizás les parezca un poco tonta o demasiado simple pero quiero ir paso a paso, poquito a poco para que todo quede claro. Y en realidad, muchas veces, las cosas más simples son las que más ayudan en los momentos más complicados y uno no se da cuenta porque las cree demasiado tontas para ser útiles.
En fin, comencemos.
En fin, comencemos.
Presentándoles a su blog
A grandes rasgos, ese es su blog pelado, sin nada. Todas las plantillas tienen una estructura mas o menos similar a esta. Vamos a ver qué es cada una.
En la plantilla Mínima vamos a encontrar '5 secciones': outer-wrapper, header-wrapper, main-wrapper, sidebar-wrapper y footer-wrapper. Cada "wrapper" (que literalmente significa envoltura) es como una caja y como tal, puede contener otras cajas más pequeñas.
El outer-wrapper es nuestra caja más grande en el blog (en la imagen, es lo blanco) y dentro de ella estan contenidas el resto de las cajas.
A su vez, dentro de ella está el content-wrapper (no lo menciono ni lo incluí en la imagen porque no tiene mucha utilidad en la plantilla, simplemente está ahí para delimitar un espacio contenedor) es el que contiene a el main-wrapper y el sidebar-wrapper (excluye el footer-wrapper y header-wrapper).
El main-wrapper y el sidebar-wrapper son los que contienen las entradas y los gadgets (o widgets) respectivamente. Por su parte, el footer-wrapper es el pie de página, donde suelen incluirse los créditos o como yo tengo puesto los años online del blog y cosas así. Lo que rodea a todo, puesto en la imagen en azul claro, sería el fondo de todo el blog.
El HTML funciona por etiquetas que se escriben entre signos de < (menor que) y > (mayor que) y las mismas deben ser cerradas, colocando una / (barra) después de abrir el signo 'menor que'; por ejemplo, entonces nos quedaría <etiqueta></etiqueta1> y en el interior, el contenido que querramos.
Cada etiqueta es como una caja; cada una de ellas puede contener muchas cosas, incluso otras cajas. Entonces, la etiqueta principal es <html></html> y dentro de ella irá todo el contenido de nuestro blog; esta etiqueta es como si tuvieramos una caja muy, muy grande donde vamos metiendo cajitas más pequeñas. Esto funciona así para cualquier otra página que este construida con HTML.
Otras dos etiquetas muy importantes, y que le siguen en jerarquía son <body></body> y <head></head>. Dentro la etiqueta 'body' va a estar incluido todo el contenido visible de nuestro blog y dentro de 'head' estan incluidas aquellas cosas que no es que no vayan a verse pero no directamente. Yo se que esto último es confuso pero no se hagan mucho problema, lo iremos entendiendo.
Basicamente, lo que viene incluido dentro de 'head' es el CSS, siglas para 'Cascading Style Sheets', lo que traducido al español significa 'hoja de estilos' y en pocas las palabras el CSS es lo que le va a dar, valga la redundancia, estilo a nuestro blog, ¿si me explico? Va a lograr que veamos el blog de los colores que queremos, con la estructura que nos gusta, etc. Esto se incluye dentro de la etiqueta <style></style> (aunque en Blogger tiene otro nombre, que ya veremos). Entonces, por ejemplo, si queremos cambiar el color de fondo de las entradas, o cambiar el tipo de letra del título de los gadgets del sidebar o si queremos redondear las puntas de las imágenes, todo eso lo vamos a definir en la etiqueta correspondiente dentro de <style></style>.
El HTML, sin el CSS, es plano. Si hicieramos una página HTML y no usaramos CSS todo se vería a blanco y negro, los links en azul y todo estaría desestructurado.
Pasemos un poquito al HTMLLo que les voy a contar es realmente muy básico, el HTML es un mundo mucho más grande que esto que les voy a contar.
El HTML funciona por etiquetas que se escriben entre signos de < (menor que) y > (mayor que) y las mismas deben ser cerradas, colocando una / (barra) después de abrir el signo 'menor que'; por ejemplo, entonces nos quedaría <etiqueta></etiqueta1> y en el interior, el contenido que querramos.
Cada etiqueta es como una caja; cada una de ellas puede contener muchas cosas, incluso otras cajas. Entonces, la etiqueta principal es <html></html> y dentro de ella irá todo el contenido de nuestro blog; esta etiqueta es como si tuvieramos una caja muy, muy grande donde vamos metiendo cajitas más pequeñas. Esto funciona así para cualquier otra página que este construida con HTML.
Otras dos etiquetas muy importantes, y que le siguen en jerarquía son <body></body> y <head></head>. Dentro la etiqueta 'body' va a estar incluido todo el contenido visible de nuestro blog y dentro de 'head' estan incluidas aquellas cosas que no es que no vayan a verse pero no directamente. Yo se que esto último es confuso pero no se hagan mucho problema, lo iremos entendiendo.
Basicamente, lo que viene incluido dentro de 'head' es el CSS, siglas para 'Cascading Style Sheets', lo que traducido al español significa 'hoja de estilos' y en pocas las palabras el CSS es lo que le va a dar, valga la redundancia, estilo a nuestro blog, ¿si me explico? Va a lograr que veamos el blog de los colores que queremos, con la estructura que nos gusta, etc. Esto se incluye dentro de la etiqueta <style></style> (aunque en Blogger tiene otro nombre, que ya veremos). Entonces, por ejemplo, si queremos cambiar el color de fondo de las entradas, o cambiar el tipo de letra del título de los gadgets del sidebar o si queremos redondear las puntas de las imágenes, todo eso lo vamos a definir en la etiqueta correspondiente dentro de <style></style>.
El HTML, sin el CSS, es plano. Si hicieramos una página HTML y no usaramos CSS todo se vería a blanco y negro, los links en azul y todo estaría desestructurado.
Les dejo un video, muy cortito, en el que les voy a mostrar un par de cosas; vamos a ver esto un poco mejor y a llevarlo al HTML del blog, quizás les resulte un poco aburrido porque no van a aprender nada que puedan ir y probar en sus blogs pero como ya les dije, es útil y necesario si realmente quieren aprender.
Lo que muestro en el blog lo van a ver si instalan la plantilla mínima que ya deje en esta entrada y les recomendé descargar para seguir estos tutoriales.
Lo que muestro en el blog lo van a ver si instalan la plantilla mínima que ya deje en esta entrada y les recomendé descargar para seguir estos tutoriales.
*vean el video en HD*
Algo que me olvidé de decir en el video, por si no queda del todo claro es que cuando hablo de que el HTML debe 'llamar' al CSS lo que estoy haciendo es crear la nueva etiqueta que es lo que se hace como: <div class="NOMBRE DE LA ETIQUETA">Aquí iría todo el contenido</div>. Y como ven cada una se corresponde con una sección con propiedades (width, backgroun, float, etc.) diferentes.
Esto es todo por esta entrada (por si les pareció poco, jajaj). Lo importante de conocer esto es que más adelante lo voy a ir nombrando, les voy a ir enseñando a personalizar cada parte entonces, cuando ustedes tengan un diseño en mente y lo quieran llevar a cabo, ya van a saber dónde putualmente tienen que modificar lo que sea para conseguir aquello que quieran. Diganme si tienen alguna duda, pueden dejar un comentario y les explico con mayor detalle.
Espero que comenten ^^ Si todo sale bien y me dan los tiempos, el viernes que viene publico la segunda parte; o si llego antes, pero no creo jaja. Besos!
Es muy práctico :) ! Gracias por subirlo :D saludos ^^ !
ResponderEliminarDe nada; realmente espero que resulte útil. Saludos ^^
EliminarMuy buen explicado :D a mi me costaba guiarme bien antes porque cambiaban las nombres entre las plantillas sencillo picture wind. etc y se me complicaba a la hora de hacer tutoriales en mi blog ¬¬ blogger malo xD
ResponderEliminarjajajaj si, viste! Para mí también es un tema, porque después es entendible que cada uno que usa una plantilla distinta te diga "pero eso no sale en mi blog, por qué puede ser" y tenes que explicarles uno por uno.. Gracias, me alegra que se entienda! Saludos ^^
EliminarHola corazon wauu porfin veo un tutorial de como hacer plantilla.Graciass por tu ayuda corazon una pregunta esto se puede usar osea para hoste ose algo wordpress?!Hermoso pagina me encanta.Perdon por mi espanol estoy desde Rumania y apprendi sola espanol :( besitos grande
ResponderEliminarHola!! Gracias! Se te entiende re bien, no te preocupes! Mmm puede que haya algunas cosas que te sirvan, pero está pensado especialmente para plantillas Blogger y en Wordpress hay muchas cosas que son diferentes, porque usa un lenguaje distinto (no usa HTML, usa PHP sino me equivoco). Lo que si te va a servir es la parte del CSS :) Cualquier cosa me podes preguntar, besos!
Eliminar¡Por fin entiendo algo! Jaja muy bueno, yo sé el crear una estructura de páginas web pero con el html general por lo que palabras como "b:skin" eran desconocidas para mi. Saludos ♥
ResponderEliminarBueno, creo que ahora sabes lo que significan, no? :)
Eliminar¡Al fín volviste!, se te extrañaba mucho por Blogger, Cata.
ResponderEliminarMirá, hace un mes me reformatearon (O como seaxd) mi computadora, y perdí absolutamente todo, llevo un mes buscando un PS y me acordé del tuyo, cuando descargué el CS6 no me deja ni iniciar el idioma porque me salta algo de error, y el CS5 me salta que un archivo no está disponible, ¿Lo podes revisar o volverlo a subir? Por favor.
Linda, hola! Te cuento que el CS5 lo actualicé la semana pasada o algo así porque justo una seguidora me dijo lo mismo, Mediafire me había borrado el archivo pero ya tenes el link actualizado!
EliminarEl CS6 no se por qué te sale eso, la verdad no me surgió nunca ese problema así que si queres ese, buscalo por otro lado, sino baja el CS5 que es lo mismo!!
Besos miles :3
Hola bonita!:) Conocí tu blog gracias a tu canale de Youtube. Andaba buscando un tutorial de como hacer un imagemap y voilá, apareció. Tu blog es precioso y tienes unos tutoriales que me están ayudando un montón! Gracias por tu trabajo, te estaré leyendo en próximas entradas y mientras tanto me leo las anteriores :3
EliminarMuaaaaaaaaaaaaaas~
Hola linda!! Me alegra que te sea útil lo que hago, le pongo muchas ganas para ayudarlos :) Muchas gracias a tí por tu visita y por tu comentario, cosas así animan a seguir! Besitooos
EliminarMe encantan tus tutos, tú blog y todo, editas increíble y eres un amor tienes una nueva subscriptora.!!!!
ResponderEliminar:D
Ayyy, qué linda! Muchas gracias corazón, me alegra que te guste mi blog y lo que subo, es para ustedes :D Un besito grande!!
EliminarHola Cataa, me encanta tu pagina, la verdad es que cuando cerraste el blog temporalmente me dio bastante pena y hoy quise buscar tu pagina otra vez para ver si ya subias tutoriales, entonces vi este y estaba muy interesada y lo he hecho casi todo bien (de este tutorial) pero la verdad es que me cuesta muchisimo lo de pasarlo todo a la plantilla del blog, la ultima parte ¿me podrias ayudar? besos linda y gracias por contestar ;)
ResponderEliminar