[Tutoriales] Blockquote Halloween

Holiii!!! Hoy se me ha ocurrido ponerles un tipo de blockquote con un estilo muy de Halloween, así que espero que os guste, es un tutorial muy sencillo!!






Lo primero es ir a Plantilla> Editar HTML y buscar (Ctrl+F) ]]></b:skin> y justo antes pegamos el siguiente código:
blockquote {
background: #E29DFEurl(http://www.juntadeandalucia.es/averroes/sanwalabonso/wqyct/ct_halloween/images/ico30.png) no-repeat right bottom;
color: black;
padding: 15px;
outline-color: #551361;
outline-width: 1px;
outline-style: dashed;
outline-offset: -4px;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
-ms-transition: all 0.5s ease-in-out 0s;
}
blockquote:hover {
background: black url(http://www.fondoswiki.com/Uploads/fondoswiki.com/ImagenesGrandes/fantasma-halloween-8.jpg) no-repeat right center/ 46%;
color: white;
outline-color: black;
outline-offset: 7px;
padding: 30px;
border: 14px solid #313131;
text-shadow: 0 0 5px black;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out0s;
-moz-transition: all 0.5s ease-in-out 0s;
-ms-transition: all 0.5s ease-in-out 0s;
}

Y listo!! Ya tenemos nuestro Blockquote de Halloween. Por cierto, me he unido a la segunda temporada de Al Estilo Blogger


Beshus y hasta mañana!!

Comentarios

  1. Hello!
    Una pregunta...son dos distintos no? es que a mi me gusta el segundo ^^
    Beshos!

    ResponderEliminar
    Respuestas
    1. En realidad es uno que se ve como el primero y al pasar el ratón se ve como el segundo, pero si quieres solo el segundo, pon este código:

      blockquote {
      background: blackurl(http://www.fondoswiki.com/Uploads/fondoswiki.com/ImagenesGrandes/fantasma-halloween-8.jpg) no-repeat right center/ 46%;
      color: white;
      outline-color: black;
      outline-offset: 7px;
      outline-style: dashed;
      outline-width: 1px;
      padding: 30px;
      border: 14px solid #313131;
      text-shadow: 0 0 5px black;
      transition: all 0.5s ease-in-out 0s;
      }

      beshus!!

      Eliminar
  2. Buen tutorial ^^ el segundo es el que mas me gusta ^^
    saludos n.n

    ResponderEliminar
  3. Hola!
    Está genial, muy acorde a la época.
    Gracias por el tutorial.
    Besos

    ResponderEliminar
  4. Yo encantada!! Me encanta tu iniciativa, aunque no siempre haga las entradas >///<

    beshus!!

    ResponderEliminar

Publicar un comentario

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!!

Entradas populares de este blog

¡Panini Manga licencia el "yuri verde"! La esperada llegada de "El chico que me gusta no es un chico"

[Storyteller] Dante

¡Ya tenemos imágenes de la edición Deluxe Hardcover de TGCF!