Hoy traigo un tutorial de CSS para
Blogger facilísimo. Podrás hacer que el fondo del blog cambie de color a medida que te desplazas por la página. Lo más complicado será decidirse por los colores ;)
TUTORIAL
PASO 1
Ve a la página web de
CSS3 Gradient Generator y elige los colores que prefieras para el fondo de tu blog. Puedes añadir más de dos colores haciendo click en el icono + de Color Swatches que verás arriba a la izquierda. Ajusta las proporciones de color y la dirección del degradado a tu gusto, mientras lo haces verás una muestra de como quedaría. Una vez te hayas decidido no cierres la página porque todavía no es momento de copiar el código.
PASO 2
Dirígete a tu blog y ve a PLANTILLA > PERSONALIZAR > AVANZADO > FONDOS y asegúrate de que el FONDO PRINCIPAL no sea transparente. Yo recomiendo que elijas el blanco (#FFFFFF).
Sin salir de AVANZADO baja hasta llegar a AÑADIR CSS y copia el código que ves a continuación.
.body-fauxcolumn-outer {
Aquí deberás añadir el código que obtendrás en la página de CSS3 Gradient Generator.
}
PASO 3
Ahora sí, ve a la página de
CSS3 Gradient Generator y copia el código que verás al final de la página o haz click en
COPY THE CODE. Vuelve a Blogger, borra la línea de texto del código anterior y cámbiala por el código del degradado. ¡Y listo!
Aquí os dejo un ejemplo para que veáis como quedaría el código final.
EJEMPLO
.body-fauxcolumn-outer {
background-image: linear-gradient(bottom, rgb(58,209,189) 39%, rgb(226,245,235) 62%);
background-image: -o-linear-gradient(bottom, rgb(58,209,189) 39%, rgb(226,245,235) 62%);
background-image: -moz-linear-gradient(bottom, rgb(58,209,189) 39%, rgb(226,245,235) 62%);
background-image: -webkit-linear-gradient(bottom, rgb(58,209,189) 39%, rgb(226,245,235) 62%);
background-image: -ms-linear-gradient(bottom, rgb(58,209,189) 39%, rgb(226,245,235) 62%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.39, rgb(58,209,189)),
color-stop(0.62, rgb(226,245,235))
);
}
¿Qué os ha parecido el tutorial? ¡Que tengáis un buen Jueves!
