Todos los que controlamos, un poco al menos, el HTML hemos sido novatos alguna vez. Y me atrevería a decir que todos hemos empezado por las mismas razones: curiosidad y ganas de tener un espacio personalizado al máximo.
Normalmente, si queremos empezar en este mundillo, se recomienda la plantilla Simple de blogger ¿verdad?. Bueno, pues desde mi experiencia personal, cuando estaba aprendiendo esta plantilla me pareció un infierno de códigos: caótica, desorganizada, incomprensible... Y buscando algo más sencillo, me tope con la "Dummy Template": libre de derechos, organizada, intuitiva, hecha exclusivamente para desarrollar plantillas nuevas a partir de ella... El paraíso.
Vamos a hacer un repaso rápido a las ventajas e inconvenientes de esta plantilla:
- ventajas -
+ Puedes realizar cualquier diseño que imagines a partir de ella.
+ Intuitiva, códigos muy fáciles de localizar y modificar.
+ Ideal para aprendices.
+ Puedes realizar cualquier diseño que imagines a partir de ella.
+ Intuitiva, códigos muy fáciles de localizar y modificar.
+ Ideal para aprendices.
- inconvenientes -
+ NO es una plantilla pre-diseñada para colocar tal cual en tu blog. Es una plantilla para desarrollar un diseño a partir de ella, exclusivamente a través de HTML.
+ Los comentarios anidados no están "instalados" en esta plantilla, es decir, no aparece la opción de "responder", siguiendo este tutorial se soluciona el inconveniente.
+ Al instalarla, veremos que el menú no ocupa el 100% de la pantalla, y ni siquiera modificando el "width" conseguimos ese efecto. La solución es sencilla: buscaremos el code "menu {" y dentro de este añadiremos lo siguiente:
position:absolute;
top:0px;
left: 0px;
right: 0px;
Este truco funciona también para el "header {" aunque quizá debas jugar con los margins, top..etc para que quede bien colocado.
Con esta plantilla fue con la que aprendí HTML, y posteriormente, trasladé los conocimientos adquiridos a la Simple de blogger (que ya no parecía tan complicada) y a otras plantillas básicas del mismo estilo. Aunque, actualmente, esta plantilla sigue siendo mi predilecta a la hora de desarrollar nuevos diseños. ¿Qué como terminé de manejarme con los códigos? Pues rompiendo mil veces la plantilla (haced siempre copia de seguridad, por muy mínimo que sea el cambio que realizais en el código, os evitareis muchos fiascos) y buscando tutoriales en google cada dos minutos. No tiene más misterio; hoy en día hay tutoriales para todo, y cada vez son más los blogs que dedican un rinconcito a este tema.
Y sobre todo: ¡no le tengáis miedo al código!, una vez que le pillas el truco, no es nada complicado.
gracias, no sabía de este plantilla. Yo tuve que aprender a la fuerza con la plantilla simple, creo que en la última actualización la empeoraron. De simple no tiene nada .__.
ResponderEliminarSiempre he andado buscando una plantilla en blanco, y es que la Simple de blogger me suele dar muchos quebraderos de cabeza. No sé mucho de HTML pero me entretiene bastante probar cosas y aprender cómo hacer esa cosa que tengo en la cabeza. Así que probaré con ésta, a ver qué tal, ¡muchas gracias!
ResponderEliminarBesitos ♥
Lo que no me sale es cómo quedar la cabecera bien, que ocupe todo el ancho pero que no se me superponga en el cuerpo de la entrada.
EliminarA mi me sucedía que se superponia con el menú, y ajustando margénes conseguí que quedará bien, no obstante ¡voy a mirarlo!, a ver si te puedo pasar unos valores con los que quede bien ^^
Eliminar¡Listo!
EliminarTe dejo los valores que he usado, pero puede que por la resolución de tu pantalla necesites modificarlos, no te preocupes es muy fácil y es cuestión de ir probando un valor mas alto o mas bajo hasta que quede a tu gusto:
#header {
margin:0px auto;
width: 100%;
height: 20%;
top:0px;
left: 0px;
right: 0px;
position: absolute;
margin-top: 45px;
}
(el margin-top: evita que el header se superponga con el menu, puedes usar también %, y los 45px son variables, en mi pantalla quedaba perfecto así, no obstante, si necesitas añadir unos cuantos pixeles mas o menos puedes hacerlo a tu antojo)
#menu {
width: 100%;
overflow:hidden;
border-bottom:1px solid #efefef;
margin:0 auto;
position:absolute;
top:0px;
left: 0px;
right: 0px;
}
(este es el code habitual del menu)
#outer-wrapper {
width:900px;
background:#fff;
margin:0 auto;
border:1px solid #efefef;
margin-top: 13%;
}
(El outer-wrapper se encarga del cuerpo del blog: entradas + sidebar, he usado el mismo truco que en el comando "header": añadir un margin-top que separe ambas secciones, he usado % esta vez, aunque puedes cambiarlo a px, y cambiar el valor)
Espero haberte ayudado :3, como ves la cosa se soluciona fácil con un par de margins.
La plantilla Dummy viene muy bien. Cierto es que tiene sus inconvenientes pero te permite hacer cosas chulas y realmente aprendes. Yo suelo tirar de la que viene en Blogger :]
ResponderEliminarAhora, el diseño. ¡Qué pasada, Cat! Me encanta. Es simple, limpio y bonito.
Un besazo :33
Oh, intentaré aprender a partir de esa plantilla. Gracias por el post. Por cierto, me encanta el nuevo diseño, hasta ahora me parece que es de los más bonitos que has hecho (y eso que me han gustado todos).
ResponderEliminarUn abrazo muy grande :)
yo aprendi en el colegio lo sprincipios de html estudiaba media técnica en diseño y luego al llegar a blogger en 2009 empece a aprender a entenderme con ella, no fue tan dificil, peero con las nuevas de blogger me parecen una pesadilla jaja
ResponderEliminar