Lo Último

Fondos semitransparentes en tu blog




La apariencia es uno de los puntos de un blog donde reside su éxito, el impacto visual quizá tenga más importancia de la que pensamos, por eso en Blogger In te enseñamos a usar las transparencias en las partes importantes del blog.
Cuando un lector entra en nuestro blog, lo primero que dice es "Hay!! que bonito!!" para después centrarse en su contenido.

Si bien la apariencia no lo es todo en tu blog, si es una parte que no puedes dejar de cuidar, ya que si a un gran contenido añadimos una gran apariencia, el resultado es un blog extraordinario, es muy fácil poner transparencias a las parte de tu blog con contenido visual.

Para conseguir semitransparentar El título del blog, la columna lateral donde tenemos los gadgets y el cuerpo de la entrada, no hay más que meter un poco de CSS. No son necesarios ni pesados scripts ni largos códigos, asi que empezamos!.


Para que ésto funcione primero debes poner transparente el fondo de las entradas, los gadgets y la cabecera con su descripción.Para incluir transparecias debéis proceder de la siguiente forma:

Ir a tu "Escritorio Blogger"
Pulsar en tu "Blog"
Pulsar en "Plantilla"
Pulsa en "Personalizar"
Pulsa en "Avanzado"
Deslízate abajo y pulsa en "Añadir CSS"
en la caja de la derecha incluye el código apropiado para cada parte de tu blog:


Para el cuerpo de las entradas:
/------------------------------------------------------\
.post {
  background-color: rgba(0, 0, 0, 0.35);
}
\------------------------------------------------------/



Para la columna lateral de gadgets:
/------------------------------------------------------\
.sidebar {
  background-color: rgba(0, 0, 0, 0.35);
}
\------------------------------------------------------/



Para el título y la descripción:
/------------------------------------------------------\
.widget {
  background-color: rgba(0, 0, 0, 0.35);
}
\------------------------------------------------------/



Sólo para el título:
/------------------------------------------------------\
.Header h1 {
  background-color: rgba(0, 0, 0, 0.35);
}
\------------------------------------------------------/



Sólo para la descripción:
/------------------------------------------------------\
.Description {
  background-color: rgba(0, 0, 0, 0.35);
}
\------------------------------------------------------/



Para los gadgets superiores:
/------------------------------------------------------\
.Tabs {
  background-color: rgba(0, 0, 0, 0.35);
}
\------------------------------------------------------/



Como véis es superfácil poner transparencias a las partes importantes de tu blog, lo que he puesto en rojo es el nivel de transparencia cuyo valor va desde 0 hasta 9, el resto de los valores que véis en 0, son para el color del fondo de la entrada, así que si ponemos un color por ejemplo rojo, y aplicamos un valor a la transparencia, ésta se teñirá de rojo.



Esto es todo! espero que disfrutes de la nueva apariencia de tu blog, y sobre todo que tus visitantes queden impresionados!.