19 de febrero de 2016

¿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

14 comentarios:

  1. Gracias!! por la entrada me servirá mucho
    Bueno yo no soy tan kpoper pero si escucho algunas canciones así que seria genial que compartas las canciones que te gustan!!

    ResponderEliminar
    Respuestas
    1. Me alegra que te sirva! :D
      Sii? >w< gracias por tu opinion!

      Eliminar
  2. Me parece genial la nueva sección, dar a conocer nuevas canciones siempre es interesante ñwñ por otro lado la entrada ha sido muy útil, ayudarás a muchos bloggers que están empezando con los códigos (que aunque parezca que no) son bastantes liosos xD

    Saludos Kyaru!

    ResponderEliminar
    Respuestas
    1. Si? Gracias *^* espero que guste... jajaja
      Espero que les sirva, es cierto que son bastante liosos por eso he querido hacer estas entradas ahora que me entiendo un poco más con el html :P
      Gracias por comentar!

      Eliminar
  3. muy interesantes los efectos, gracias ^^

    ResponderEliminar
  4. Aquí tienes una seguidora fiel del kpop, asi que estaré atenta a las entradas!
    Un besoo.

    ResponderEliminar
  5. muy buena entrada y muy útil, gracias por compartirla

    saludos >u<

    ResponderEliminar
    Respuestas
    1. Muchas gracias :D Me alegra que te sirva ^^

      Eliminar
  6. No soy muy fan del kpop, Bueno, las más populares de 2ne1, bigbang, snsdy... yap
    Gracias por la entrada! muy útil :3

    ResponderEliminar
    Respuestas
    1. Bueno, la sección es para dar a conocer grupos y canciones así que quizás te guste ^^
      Gracias a ti por comentar!

      Eliminar
  7. gracias por compartir y empezar la sección!
    en cuanto a la seccion de kpop, a mi me encantaría! ojalá la empieces :D
    saludos ♥

    ResponderEliminar
    Respuestas
    1. Gracias a tii *^*
      Sii? >w< Biien parece que gustará así que espero tenerla activa mucho tiempo :D

      Eliminar