{tutorial} blockquote que baila ♪♫

Ohayou! Soy kotomi no me olviden  ¿Como van? Hoy quiero compartir un tutorial de mi blog Es muy original y queda super bonito.Como colocar un blockquote que se mueve constantemente,y cuando colocas el cursor por ensima queda quiero para que copies su contenido sin problema




 PLANTILLA BLOGGER
1)Si tienen el nuevo diseñador de plantilla

Precionamos CTRL+F y buscamos <style>

justo debajo pegamos el codigo del blockquote que querramos,Les dejo este que es muy sencillito:
(para copiar el codigo ,selecciona todo el codigo y Presionas Ctrl+C y ya lo tienes copiado y lo pegas donde te indique )

blockquote{-webkit-user-select:text;-moz-user-select:text;-webkit-animation-name: shake;-webkit-animation-duration: 3s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: ease-in-out;background-position:bottom right;background-repeat:no-repeat;background-image: url(http://media.tumblr.com/tumblr_m7etdc6exs1qb1380.gif);padding:15px;border-top:3px solid #c8f099;border-bottom:5px double #c8f099;border-right:1px dashed #8dbd57;border-left:1px dashed #8dbd57;color:#9C9C9C;-webkit-transition: 1.0s;-moz-transition: 1.0s;}
blockquote:hover{-webkit-animation-name: none;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: ease-in-out;-webkit-transition: 1.0s;-moz-transition: 1.0s;color:#555;}



2)abajo  ↨ Pegamos el codigo del efecto:

-webkit-animation-name: none;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: ease-in-out;-webkit-transition: 1.0s;-moz-transition: 1.0s;color:#555;}@-moz-keyframes shake /* Firefox*/{{ -ms-transform:: tran slate(-1px, -2px) rotate(-1deg); }20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }30% { -moz-transform: translate(0px, 2px) rotate(0deg); }40% { -moz-transform: translate(1px, -1px) rotate(1deg); }50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }90% { -moz-transform: translate(2px, 2px) rotate(0deg); }100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }}@-ms-keyframes shake /* IE9*/{10% { -ms-transform:: translate(-1px, -2px) rotate(-1deg); }20% { -ms-transform: translate(-3px, 0px) rotate(1deg); }30% { -ms-transform: translate(0px, 2px) rotate(0deg); }40% { -ms-transform: translate(1px, -1px) rotate(1deg); }50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); }60% { -ms-transform: translate(-3px, 1px) rotate(0deg); }70% { -ms-transform: translate(2px, 1px) rotate(-1deg); }80% { -ms-transform: translate(-1px, -1px) rotate(1deg); }90% { -ms-transform: translate(2px, 2px) rotate(0deg); }100% { -ms-transform: translate(1px, -2px) rotate(-1deg); }}@-webkit-keyframes shake /* Safari and Chrome */{0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }}
3)Editamos ♥
 Lila :Pegamos la URL del gif de tu preferencia
Azul :Grosor,tipo y color del borde superior
Rosado : Grosor,tipo y color del borde inferior
Naranja :Grosor,tipo y color del borde izquierdo
Crema:Grosor,tipo y color del borde derecho

  PLANTILLA CLASICA               
 Vamos a >plantilla >editar codigo html de la plantilla > ctrl+f y buscamos  </head> 

y realizamos los pasos de la plantilla blogger 


Cualquier problema o duda Comenta C:



~¡¡No copycat u///u!!~

Kotomi-chan

7 comentarios :

  1. Esta super chulo, yo también ya lo había leído en tu blog >w<

    ResponderEliminar
  2. Waaa Gracias por el tuto!!! :D

    Muchos Saludos y se cuidan!!

    ResponderEliminar
  3. Uahhh muy lindo tuto me ha gustado bastante gracias por compartirlo n_n

    ResponderEliminar
  4. está muy genial!! >u<
    lindo truco!!!! ^v^

    besos!!! ^-^

    ResponderEliminar
  5. Respuestas
    1. Al modelo de los comentarios o Elijir como comentar en blogger o facebook eso? :3

      Eliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥