Hacía tiempo que tenía ganas de hacer una plantilla básica para blogger. Nada de filigranas, sólo hacer las cosas más fáciles a los que quieren empezar de cero.
He quitado código por todas partes de las plantillas simples de blogger, he evitado que se cargaran los scripts y estilos por defecto de blogger, y por lo tanto ha quedado lo que ha quedado: una página en blanco, sin CSS, para que podáis hacer tanto como queráis.
Al final he conseguido una plantilla con muy poco código, que (casi) valida (leer más abajo), y optimizada para el SEO (he usado tanto microdata como microformats).
Os he dejado un par de comentarios extensos en el código, sobre todo entre <b:skin> y </b:skin>.
Si queréis verla, podéis hacerlo aquí (aunque ya os aviso de que es una página cualquiera, sin nada de estilo).
Comenzar a editarla
Comenzar a editarla es tan fácil como poner a escribir algo de CSS básico. Aquí tenéis un ejemplo con el siguiente pedacito de CSS:
body {
min-height: 100%;
margin: 1em 0;
background: #eee;
color: #333;
font-family: Arial, Helvetica, sans-serif;
}
a {
opacity: .9;
color: #32A1CC;
text-decoration: none;
}
a:hover {
opacity: 1;
border-bottom: 1px dashed;
}
.site-wrapper {
/* Estático, es un ejemplo */
width: 960px;
margin: 0 auto;
background: #fff;
box-shadow: 0 0 5px rgba(0,0,0,.5);
}
/* Clearfix */
.content-wrapper:before,
.content-wrapper:after {
content: "";
display: table;
}
.content-wrapper:after {
clear: both;
}
.content-wrapper {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
/* Distribución entre la columna central y la lateral*/
.sidebar,
.content {
float: left;
}
.content {
width: 600px;
margin-right: 60px;
}
.sidebar {
width: 300px;
}
.site-footer {
clear: both;
}
/* El título */
.site-title {
text-align: center;
line-height: 2;
margin: 0;
}
.description {
display: none;
}
.site-header {
border-bottom: 1px dashed #aaa;
margin-bottom: 1em;
}
/* Algunos detallitos para el post */
.post-outer {
padding: 0 1em;
}
/* Y para los títulos de la sidebar y el footer */
.widget .title {
color: #666;
}
.sidebar .title {
border-left: 3px solid #aaa;
padding-left: 8px;
}
.site-footer {
margin-top: 1.5em;
}
.site-footer .title {
border-top: 3px solid #aaa;
padding-top: 8px;
}
.site-footer .title,
.site-footer .widget {
text-align: center;
}
/* Comentarios */
.comments ol {
padding: 0;
}
.comment-content {
padding-left: 40px; /* 30px de imagen + 10px de margin-right */
}
.comment-header {
/* Alinear al medio con la imangen */
line-height: 30px;
}
.avatar-image-container img {
/* Reducir la imagen y separarla 10px a la derecha */
width: 30px;
margin-right: 10px;
}
.avatar-image-container {
float: left;
}Se puede mejorar mucho, pero con eso ya se ve más presentable ;)
Crear tu propia versión
Si no te gusta la plantilla tal y como está (sumarios automáticos, etc), es posible que te interese compilarla entera, mejor que editarla desde el editor de blogger. Si te interesa, aquí está el código que he usado en github. Necesitarás poner en marcha un pequeño servidor con PHP, pero es fácil con XAMPP si usas windows, y más si usas linux/mac
Para explicarlo: el archivo compile.php incluye los archivos head.xml y body.xml, y cualquiera que estén incluidos desde ellos con:
<!-- #file=archivo.xml -->Y lo guarda en compiled.xml
Descargar
Si queréis descargar la plantilla, símplemente haced click en el botón de abajo (si se abre en texto plano, click derecho » guardar como).
Validar la plantilla
Hay un sólo error de HTML en la plantilla, y es una meta del feed. No las he borrado porque junto con ella, van otras que sí son correctas y que te pueden ayudar a ser indexable, o a ganar subscriptores al feed. No obstante puede ser eliminada borrando estas líneas:
<!-- Links del feed -->
<b:if cond='data:blog.feedLinks'>
<data:blog.feedLinks/>
</b:if>Según añadáis widgets, si os obsesiona validar la plantilla, debéis eliminar todos los códigos así:
<b:include name='quickedit'/>Además, se añaden automáticamente algunos atributos al elemento <html>. Si ves que queda así:
<html class='v2 no-js' expr:dir='data:blog.languageDirection' lang='es' prefix='og: http://ogp.me/ns# article: http://ogp.me/ns/article#' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>Puedes optar por dejarlo así para que valide:
<html class='v2 no-js' expr:dir='data:blog.languageDirection' lang='es' prefix='og: http://ogp.me/ns# article: http://ogp.me/ns/article#'>Conclusión
Poca cosa más que decir, símplemente disfrutadla, y si hay algún problema, o cualquier otra cosa, símplemente dejad un comentario :)
¡Estupendo Emilio!. La estudiaré. Gracias por tus publicaciones.
Cracias a tí por pasarte :)
Excelente para empezar a aplicar el CSS y personalizarla como uno quiera, la descargare y probare con ella a ver que me resulta. :P
Me alegro de que te guste Juvinao ;)
Muy buen trabajo…
Siempre me habia interesado la idea de hacer una plantilla desde cero, voy a probar que sale….
Fijo que sale algo muy interesante remy ;)
Hola Emilio he recurrido a todo y se que tu me lo puedes solucianar
Tengo un problema con esta web www. estudiocreate .com que no soy capaz de dejar el footer anclado al final, se mueve segun si hay mas contenido o no y se ve diferente en todos los navegadores. ¿A que es debido?
Prueba con éste CSS:
Impresionante eres un genio perfecto lo que no acabo de verlo igual en todos los navegadores.
Añade algo como
z-index: 1000;a la regla anterior y debería de hacerlo.Ahora si todo perfecto. Gracias como siempre impresionante
Y porque no funciona igual para estos elementos.
quiero poner las dos flechas y el cuadrado pegando abajo del sidebar y no se bajan
Perdon se me olvido decir que varian porque unos tienen mas contenido que otros
http://www.estudiocreate.com/portfolio/100-anys-de-sigmund-freud/
http://www.estudiocreate.com/portfolio/cinema-i-identitat/
y quiero que siempre este al final.
Seria con un float o me equivoco
No, veamos: position: fixed posiciona los elementos con respecto a la pantalla, así que al poner bottom: 0; quedarán debajo del footer. No obstante si pones bottom: 45px; quedará por encima del footer, y por ende debajo de la sidebar.
Mira con cuidado tu código, tienes muchos problemas con id’s y clases. La id sidebar se repite varias veces, por ejemplo.
Hola emilio, agradecerte por la plantilla. Tengo una pregunta, a que te refieres con validar la plantilla, te lo pregunto dado mis escasos conocimientos de blogger. Estoy hace un año pruebe y pruebe, viendo tutoriales, tratando de hacer algo que me guste, pero no le he conseguido, y de tanto hacer ya he aprendido algunas cosas. ¿Esta plantilla es tan funcional como las de blogger? ¿las plantillas de blogger son malas?
Como quito los estilos del sumario…. y como hago la imagen de los comentarios más pequeñaaa sale muy grande
He editado el código para dar algo de estilo a los comentarios, ahora debería de estar decente :)
Sobre los sumarios, sólo tienes que cambiar el css que hace referencia a
.post-outerpor.item .post-outer, .static_page .post-outer, para reducir los estilos actuales a los posts individuales y a las páginas estáticas.Muchas gracias Emilio, que bonita plantilla se parece mucho a la tuya. Como puedo mover el post-author poner casi por el post footer?
Mueve todo el
<span>que hay debajo de<header class='post-header'>y ponlo debajo de<footer class='post-footer'>:)Muchas gracias por la plantilla, solo preguntarte a que te refieres con “validar” la plantilla, y si no hago la valido que pasaría
Nada, validar es que el código HTML sea válido acorde a los estándares. Si no lo cumples en principio no tiene por qué pasar nada (la inmensa mayoría de los sitios tienen errores de validación), pero lo ideal sería que todas validasen.
Hola, muy lindisima la plantilla, una pregunta referente a los estilos. Como puedo acercar más los titulos de los post con sus contenidos, en la plantilla por defecto salen muy separados, como hago para que el contenido ocupe todo el ancho en los sumarios justificados obviamente. Muchas gracias guapo!
Disculpa por haber tardado en contestar :S estoy algo liado, acaba de ser mi graduación y todo eso…
Simplemente tendrías que poner algo del estilo a:
Hola, ¿como hago para que la imagen en el home sea mas grande y no se pierda la calidad al engrandecerla?
Puedes usar ésto: http://www.oloblogger.com/2012/03/miniaturas-para-sumarios-mas-grandes.html
o esto: http://www.ayuda-bloggers.info/2013/04/blogger-thumbnail-first-url.html
:)