Introduciendo la plantilla para Blogger: Google Plus fan

Hola, qué ta!?, hoy tengo una nueva plantilla para compartir con todos ustedes, y si eres fan de Google Plus, la recibirás con los brazos abiertos.



Caí redonda redondita en la onda Google plus, y no me pude resistir a la tentación de hacer la plantilla basándome en el diseño del botón de Google +1, usando los colores, que son el rojo, azul, verde y amarillo, y el estilo minimalista que caracteriza a Google.

Hay mucho material sobre el proyecto Google+, así que quizás esta sea una oportunidad para que crees un blog sobre este tema, aprovechando que "las acciones están a la alza", por lo pronto ya tienes lista la plantilla ;).



Esta es la primera de una serie de plantillas que tengo pensadas para este tema, así que pronto vendrán otras...



Características

• Plantilla de 3 columnas


• 3 columnas adicionales en el footer


• Resumen automático en las entradas


• Menú superior que son los titulos de las páginas estáticas


• Buscador integrado


• Espacio en el header para agregar bloque publicitario (como AdSense) de 468 X 60 pixeles


• Botones para compartir entradas de Twitter, Facebook y por supuesto Google +1


• Solo usa 2 imágenes

Esta plantilla es muy versátil, ya que puedes cambiar los colores del top, y el footer, para darle una apariencia diferente, y lo harás yendo a la Edición de HTML de la plantilla y cambiando los colores respectivamente en todo este código:

.top {

height: 4px;

width: 100%;

background-color: #efe709; /*el color de fondo que deberá ser del color de la clase amarillo*/

position: absolute;

top:0;

left:0;

border: none;

}

span.rojo, span.azul, span.verde, span.amarillo, span.rojo2, span.azul2, span.verde2, span.amarillo2 {

padding: 0;

margin: 0;

height: 4px;

float: left;

overflow: hidden;/*importante en IE6*/

}

span.rojo {

width: 15%;

background-color: #c11b0f;

}

span.azul {

width: 10%;

background-color: #3967e4;

}

span.verde {

width: 15%;

background-color: #72b446;

}

span.amarillo {

width: 10%;

background-color: #efe709;

}

span.rojo2 {

width: 15%;

background-color: #c11b0f;

}

span.azul2 {

width: 10%;

background-color: #3967e4;

}

span.verde2 {

width: 15%;

background-color: #72b446;

}

El código de los colores los he coloreado y están identificados con la clase respectivamente (el nombre del color), solo los tienes que cambiar siguiendo el mismo orden; ojo: que se repite la secuencia (excepto por el amarillo) y deberás hacer lo mismo, así como colocar el color el el fondo del .top igual que la clase "amarillo" (span.amarillo).

Puedes cambiar el nombre de las clases, pero también tendrás que hacerlo en el HTML. 





Si deseas cambiar los colores, puedes consultar esta tabla de colores.

Si tienes preguntas, o inquietudes o lo que sea, no dudes en comentarlas :).





Funciona en todos los navegadores, buenos y malos...(incluyendo IE6).

Demo | Descargar