Poner fondo gradiente en el título de la columna lateral en las nuevas plantillas
Es muy fácil de aplicarlo y no necesitarás usar una imagen, 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 ingresar al código de tu plantilla y volverte loca(o) con tantos códigos
- No necesitaras crear una imagen
- 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
Nota: te recomemiendo eliminar las medidas de ancho y alto del gradiente en el generador.
Cómo aplicarlo en las nuevas plantillas de Blogger
Estuve inspeccionando el código de las plantillas nuevas, y en casi todas, no tienen estilos
definidos específicamente para los títulos de las columnas laterales. Solamente los tienen en las etiquetas de título en general, 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. Agrega en el campo de añadir 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;
Paso 5. Guarda los cambios, haciendo click en APLICAR AL BLOG.
Cómo aplicarlo a otras plantillas (viejitas de Blogger, de terceros, etc.)
Harás lo mismo, con la diferencia de que tendrás que averiguar cómo está definido o identificado, el título de la(s) columna(s).
Generalmente lo encuentras como:
.sidebar h2, #ads_wrapper h2, siempre llevará la etiqueta h2.
Etiquetas:Tutoriales