29 agosto 2011

Introduciendo la plantilla para Blogger: Google Plus fan

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.


google plus plantilla


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


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 resaltado 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 tienes preguntas, o inquietudes o lo que sea, no dudes en comentarlas :).

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


Demo | Descargar

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.