Poner fondo gradiente en el título de la columna lateral en las nuevas plantillas y más

Ahora que estuve trabajando en el diseño de la plantilla Atheros, use fondos gradientes en los títulos de las columnas, usando una propiedad CSS3.



Es muy fácil de aplicar, no necesitarás usar una imagen (menos peso de almacenamiento), ahora es posible usarlos sin ningún inconveniente, ya que pueden ser visualizados en todos lo navegadores, gracias a un filtro disponible para internet explorer.



Así se veí la pantilla de prueba, antes de aplicar los gradienes:

Ventajas de esto:

• No necesitas entrar al código de tu plantilla y volverte loca(o) con tantos códigos

• No necesitaras crear una imagen

• Te ahorras la imagen y por lo tanto no requerirás de alojamiento externo

• Destacarás el titulo de cada elemento de la columna(s) lateral(es)

• Podrás modificarlos cada vez que se te antoje, siguiendo los mismos pasos

• Verás los resultados mientras estés agregando los estilos

• Lo aplicarás de una manera rápida, sencilla y con bonitos resultados

¿Te gusta?,  entonces ¡manos a la obra!, para lograrlo vamos a aprovechar la existencia de este generador de gradientes,  del cual ya estoy perdidamente enamorada, (que le vamos a hacer) y luego teniendo el código,  lo colocarás dentro de los estilos, las características o las propiedades (como lo quieras llamar) del título de la(s) columna(s).



Nota: te recomemiendo eliminar las medidas de ancho y alto del gradiente en el generador.



COMO APLICARLO EN LAS NUEVAS PLANTILLA DE BLOGGER



Estuve inspeccionando el código de las plantillas nuevas, y en casi todas,  no tienen estilos asignados específicamente para los títulos de las columnas laterales (en cualquier posición), solamente los tienen en las etiquetas de título en general (heading tags), y excepto en una que otra plantilla, donde los asignan como:  .main-inner .widget h2 sin embargo han sido muy pocos los estilos añadidos, así que aprovecharemos para crear los propios a nuestro antojo.



Veamos como lograrlo:



Paso 1. Ve a este generador de gradientes y crea tu gradiente, puedes usar las bases que ya existen o crear el propio.

Paso 2. Copia el código de tu gradiente (donde dice CSS) en el porta papeles.



Paso 3. Ve Diseño►Diseñador de plantillas y luego selecciona la opción avanzado, después añadir CSS

Paso 4. Escribe en el bloque disponible para agregar CSS, los estilos para los títulos de las columnas:



.sidebar h2 {

height: 32px; /* puedes cambiar el alto qu abarcará el fondo */

line-height: 190%;  /* para centrar el texto con respecto al fondo*/

padding-left: 5px; /* para separar un poco el texto desde la izquierda */

}

Ahí mismo, pega el código para agregar el gradiente, que obtuviste con el generador, quedaría parecido a esto:

.sidebar h2 {

height: 32px;

line-height: 200%;

padding-left: 5px;

background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 );

}

Aprovechando que estamos ahí, y que es muy sencillo crear texto hundido en los gradientes, agreagremos esto:

text-shadow: 1px 1px 1px #eee; 

Nota: Puedes agregar todos los estilos que se te vengan a la menta y que conbinen con tu plantilla, para ver tablas de todos los atributos visita w3schools ;).



Paso 5. guarda los cambios, haciendo click en  APLICAR EN EL BLOG.



COMO APLICARLOS EN OTRAS PLANTILLAS (VIEJAS, PLANTILLAS EDITADAS) :



Harás lo mismo, con la diferencia de que tendrás que ver como esta asignado o identificado, el nombre del título de la(s) columna(s).



Generalmente lo encuentras como:



.sidebar h2, #ads wrapper h2, siempre llevará la etiqueta h2.