Lunany-kawaii: {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

visualizarlo en mi blog de pruebas

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