¿Nueva sección? + Sección HTML > Nivel 2 "Detalles bonitos y fáciles"

Asdsfjkdsfsdfsf♥ me encantan~

Hi~! Cómo están? Yo he pensando en abrir una sección de K-Pop! Hablando sobre grupos que me gusten, hablando de las mis canciones actuales favoritas, los últimos singles o de canciones recomendadas por vosotros! Os gustaría la idea? No se si hay mucho fan del K-pop en mis seguidores así que me gustaría ver que os parece antes de pensar nada XD

Bueno, luego de mucho tiempo, aquí esta la segunda parte de la sección de HTML! Aún seguimos con los códigos para personalizar elementos de la plantilla, pero pronto publicaré maneras de personalizar los post y todo ^^ Si quieren algo concreto comenten y lo verán pronto!

Margin

Para poner espacio alrededor de una imagen, texto, gadget, etc.
Se puede dar el mismo espacio a todos los lados...
Margin: 20px;
Solo arriba

Margin-top: 20px;
Solo abajo

Margin-bottom: 20px; 
Solo a la derecha

Margin-right: 20px;
O solo a la izquierda

Margin-left: 20px;
Y con esos puedes hacer las combinaciones que quieras! Hasta quitarle espacio a cualquier elemento del blog poniendo el numero en negativo. Por ejemplo...
Margin-top: -20px;
Con esto, quitarías espacio arriba del elemento que quieras!

Yo suelo usarlo para cabeceras (por si quiero centrarla o darle más espacio), gadgets (para unirlos más o alejarlos de los posts) o algún contenido de cualquier gadget (tipo una foto, que no queda del todo centrada, pues con este código puedes darle más espacio en un lado para centrarla).

Padding

Este es lo mismo que el Margin pero en el interior! Es decir, si con el anterior código le añades o quitas espacio alrededor del elemento, con el Padding le haces lo mismo pero en el interior del elemento.
Igual que antes, si quieres quitarle o añadirle lo mismo a todos los lados simplemente pon el siguiente código con el espacio que quieres editar...
Padding: 2px;
Si quieres editar solo unos espacios en concreto, pues fácilmente editas todos los lados que quieras.
Padding: 0px 0px 10px 10px;
[Esquina superior izquierda / superior derecha / inferior derecha / inferior izquierda]

Texto / Fuente

Puedes editar de muchas formas el texto de tu blog! Puedes cambiarle...
El color (el cual he hablado ya en el Nivel 1)
Color: #ffffff;
El tamaño de la fuente (texto).

Font-size: 14px;
También puedes editar el tamaño y la fuente exacta del texto a la vez (ten en cuenta que este código solo funciona con fuentes que ya tiene Blogger [en Plantilla > Personalizar > Avanzado > Pagina, allí te saldrá toda la lista que tiene disponible] para poner otra fuente lo veréis en el Nivel 5 -aún no disponible-).

Font: normal normal 18px Arial;
El siguiente es para decidir un efecto en concreto es decir, poner todo un texto siempre en mayusculas [Uppercase], minúsculas [Lowercase] o la primera letra siempre en mayúscula [Capitalize].

Text-transform: uppercase;
Para personalizar el tipo de letra, poniendo una linea encima del texto [Underline], debajo del texto [Overline], linea tachando el texto [Line-throught] o sin nada [Blink].

Text-decoration: underline;

Y por último, para editar el espacio entre letra y letra de un texto.

Letter-spacing: 2px;

Shadow

Este efecto es para ponerle un difuminado alrededor de un elemento o texto!
Para ponerle el efecto a un elemento (tipo al borde un titulo de gadget o post) se usa este código!
box-shadow: inset 0 0 8px #fc6f71, 0 0 2px #fc6f71;
Para personalizarlo puedes decidir difuminar el interior o el exterior. Para que se entienda... Digamos que la primera parte inset 0 0 8px #fc6f71 es para editar el difuminado interior! Cuanto más pequeño el numero 8px menos difuminado y cuanto más grande más difuminado. Si no quieres difuminado interior, simplemente pon 0px.
Para el exterior sería esta parte 0 0 2px #fc6f71 , funciona igual que el interior!

Por ejemplo, si quieres un difuminado blanco solo en el exterior:
Box-shadow: inset 0 0 0px #fff, 0 0 2px #fff; 
En el caso de que quieres un poco de difuminado en el interior y mucho en el exterior:
Box-shadow: inset 0 0 2px #fff, 0 0 10px #fff; 
Y así sucesivamente hasta que quede el efecto que quieres!

En el caso del texto, se usa este código...

text-shadow: 1px 1px #ffc0a5;
Este es parecido al anterior, cuanto más grande el 1px más difuminado! Puedes utilizarlo para títulos o textos grandes que destaquen.

Todas las entradas/niveles: 1 / 2 / 3 / 4