Octonex: marzo 2019

miércoles, 13 de marzo de 2019

Tutorial de blog, entradas y sidebars translucidos con color de fondo.

Quiero aclarar que no soy un blogger experto, ni mucho menos programador, solo quiero compartir un pequeño truco fácil de usar para darle algo de estilo a sus blogs.

Algo parecido a esto:

Este tutorial esta enfocado en blogger, la verdad desconozco si para wordpress funciona igual.

Empezamos en la pantalla de configuración de blogger, a continuación le damos click en tema y luego en personalizar, ya estando allí nos vamos a avanzado, en la lista escojemos fondo de la entrada, le colocamos el color del fondo transparente al igual que el borde y el biselado.

Aplicamos la configuración y nos quedara algo así:

Ahora volvemos a la configuración del tema y damos click en editar html, una vez allí expandimos la pestaña de </b:skin>,

ahora con el comando de buscar CTRL+F, pegamos en el campo de texto el siguiente código: ></b:skin>, le damos enter y justo arriba hacemos un espacio y pegamos el código que hará posible el cambio:

}

.post {

overflow:visible;

position:relative;

background:#cccccc;

margin:.5em 0 1.5em;

border:4px solid #990000;

padding:20px 30px 10px 30px;

-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);

filter:alpha(opacity=70);

-moz-opacity:0.7;

opacity: 0.7;

-khtml-opacity: 0.7;

}

Nota: el código no es mio, lo encontré en esta pagina:

http://elbalcondejaime.blogspot.com/2010/11/fondo-de-las-entradas-transparente.html, créditos al autor.

El código nos quedara algo así:

Guardamos el tema y este es el resultado:

Ahora para las sidebars es el mismo proceso, la única diferencia esta en el inicio del código donde cambiaremos la palabra .post por .sidebar, y lo pegamos justo debajo del código antes utilizado.

Este es el proceso a patica como diríamos acá, hay una forma un poco mas fácil e intuitivo ya que podremos ver los cambios realizados en el mismo momento y en la misma pantalla.

Para esto nos vamos a la configuración de tema y le damos click en personalizar, luego click en avanzado y al final de la lista seleccionamos añadir CSS.

En el cuadro de texto que aparece allí pegamos el código antes utilizado.

Pero que pasa si queremos modificar el color del fondo de la entrada o del borde y su grosor?

Pues fácil alterando algunas de las lineas del código podremos cambiar la apariencia a nuestro gusto, por ejemplo para modificar el borde, editamos esta linea:

El grosor del borde es el numero al lado de px, mientras mas bajo sea mas delgado sera el borde, mientras mas alto mas grueso sera.

El color del borde es el numero seguido de solid, el #990000, si modificamos este numero cambiaremos el color del borde, los códigos de colores los pueden sacar de esta pagina:

http://tablacolores.blogspot.com/

Ahora la opacidad del fondo lo cambiamos alterando estos valores:

cabe destacar que los valores deben ser iguales en todos los campos, por ejemplo si queremos una opacidad del 40% nos debe quedar asi:

-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);

filter:alpha(opacity=40);

-moz-opacity:0.4;

opacity: 0.4;

-khtml-opacity: 0.4;

Para el color del fondo solo modificamos esta linea:

background:#cccccc;

cambiamos el valor #cccccc por el deseado en la tabla de colores y listo.

Repito para las barras laterales o widgets es el mismo proceso , la única diferencia esta en el inicio del código donde cambiaremos la palabra .post por .sidebar.

Espero les haya gustado y se entendiera bien que es lo que se quiere.

Si quieres ganar dinero acortando tus enlaces usa adfly: https://join-adf.ly/17327807