viernes, 1 de mayo de 2015

[Tutoriales] Personalizar el marco de las fotos

Holiii!!! Bueno, hoy les traigo un tutorial muuy fácil, que consiste en personalizar el marco de las imágenes de tu blog. Que se puede personalizar, solo en las imágenes de los post, o las imágenes de todo el blog.

[Actualización: Hace un tiempo (creo) dije que iba ha hacer un tuto de como crear tu propia plantilla, y, bueno, como hoy no subí nada de eso, me han preguntado. Y respondo: Ya está casi ^^ Hoy iba a subir el tutorial pero me faltan cosas]


Para hacerlo, lo primero es ir a Plantilla>Editar HTML y buscamos ]]></b:skin> Y justo antes, pegamos el siguiente código:

Para personalizar solo las imágenes de los post:

.post-body img {
border-right: 5px solid red; /*Tamaño, tipo y color del borde*/
border-left: 5px solid red; /*Tamaño, tipo y color del borde*/
border-top: 5px solid black; /*Tamaño, tipo y color del borde*/
border-bottom: 5px solid black; /*Tamaño, tipo y color del borde*/
box-shadow: 0px 0px 10px gray; /*Sombra de la imagen*/
}

Y para todo el blog:

img {
border-right: 5px solid red; /*Tamaño, tipo y color del borde*/
border-left: 5px solid red; /*Tamaño, tipo y color del borde*/
border-top: 5px solid black; /*Tamaño, tipo y color del borde*/
border-bottom: 5px solid black; /*Tamaño, tipo y color del borde*/
box-shadow: 0px 0px 10px gray; /*Sombra de la imagen*/
}

Y lo único que tienes que editar, es lo que está en rojo. Para los colores, yo directamente he puesto los colores en inglés, y ya me salen, pero eso no pasa con todos los colores, así que en donde está eso, podéis buscar los códigos HTML de los colores que quieran en esta página > HTML Color Codes. Y para el tipo de borde (en donde pone solid) lo podéis cambiar por muchos bordes diferentes que podéis encontrar aquí > Editar los títulos de los gadget

Y por último, para personalizar la sombra de las imágenes, solo tenéis que cambiar el color, y los números. El primer número sirve para cuanto a la izquierda o derecha está la sombra, cuanto más aumenta el número, más a la derecha estará. El segundo número te dice cuanto arriba o abajo estará la sombra, cuanto más aumenta, más abajo estará, y por último, el tercer número, te dice cuanto de difuminado estará la sombra. Con el código que di arriba, las imágenes quedarían así:



Beshus y hasta mañana!!

12 comentarios:

  1. Wow! está genial el tuto... puede que cuando tenga más tiempo para el blog lo haga ^^
    Porcierto... ¿Vas a hacer algún tutorial de como crear tu propia plantilla?
    Beshos

    ResponderEliminar
    Respuestas
    1. Sí, ya la estoy preparando pero como no la había terminado no la he publicado aún ^^

      Eliminar
  2. Muy buen tutorial, me parece muy práctico. Tengo que empezar a aprender estas cosas n.n

    ResponderEliminar
  3. Hola!!

    lol interesante, me gusta!! sigue asi dando mas tutos

    ResponderEliminar
  4. Kul :v Lo pongo en favoritos a ver si uno de estos días me animo, espero que me salga bien jaja.

    Muchas gracias por los consejos y besos!

    ResponderEliminar
  5. Hola!
    Buen tutorial ^^
    ¿En serio vas a hacer un tutorial de cómo crear tu propia plantilla? Si es así, estoy con ansias de que lo publiques ^^
    Ahora me miraré tus otros tutoriales xD
    Besos! ^^

    ResponderEliminar

Holiii!!!! Si vas a dejarme un comentario, ten en cuenta las siguientes reglas:
-Nada de spam, si eso, me mandan un correo o me piden publi.
-Nada de insultos
-Nada de críticas ofensivas, cada uno tiene su propia opinión.

Aquí tenéis emoticonos para los coments:

(✿◠‿◠) (◡‿◡✿) (◕‿◕✿) (✖╭╮✖) (≧◡≦) (¬_¬) (◑‿◐) (◕‿-) ✖‿✖ (-’_’-) (╥_╥) (╯_╰) (╯3╰) (o_-) (¬‿¬) (◣_◢) (∪ ◡ ∪) (≧ω≦) o(≧o≦)o (⋋▂⋌) (॓_॔) (╯ಊ╰) (─‿‿─) ‹(•¿•)› (╯︵╰,) (︶︹︺) (∩︵∩) (。◕‿◕。) (⊙_◎) (~ ̄▽ ̄)~ (︶ω︶) (+_+) (。♥‿♥。) (✿ ♥‿♥) ♥╣[-_-]╠♥ ٩(͡๏̯͡๏)۶ ٩(-̮̮̃•̃)۶ ٩(̾●̮̮̃̾•̃̾)۶ ٩(-̮̮̃-̃)۶ (u_u) (*_*) (º_º) ٩(×̯×)۶ (ñ_ñ) (∩▂∩) (¬▂¬)ヽ(o`皿′o)ノ(・∀・ )( ̄(エ) ̄)( ̄へ ̄)(  ゚,_ゝ゚)(ι´Д`)ノ(・ェ-)ლ(́◉◞౪◟◉‵ლ)щ(ಠ益ಠщ)(ノಠ益ಠ)┻━┻。◕ ‿ ◕。ಠ_ಠ( °٢° )ʘ‿ʘಥ⌣ಥಥ‿ಥ(ΘεΘ;)(n˘v˘•)¬(✪㉨✪)ヽ(๏∀๏ )ノ(╹ェ╹)╮(─▽─)╭щ(ಥДಥщ)≖‿≖(ノ◕ヮ◕)ノ*:・゚✧(⊙ヮ⊙)ᕦ(ò_óˇ)ᕤᕙ(⇀‸↼‶)ᕗ(◡ಠ(•⊙ω⊙•)‘︿’( ´∀`)☆(≧ω≦)(´ー`)(つд`)( ̄。 ̄)(*~▽~)( ^▽^)σ)~O~)(=゜ω゜)(´ω`)(ノ_・。)(-_- )ノ(´ヘ`;)(^^;)( ´∀` )

Beshus mis gatitos!!