{Tutorial} Efecto "Mimi"

|| ||
Jajaja *w* son hermosos
Holaaaaa mis goshis de caramelos image, aquí me reporto desde narnia y esta vez comiendo una pizza de caramelo image hoy os traigo un tutorial de blogskin pero también para blogger oka!!! y también tiene efecto para blockquote image


Si el efecto se tuerce!! :D para verlo...


¿Cierto que esta genial? image entonces... ¿Lo quieres? ¡Sigue estos pasos! image


Efecto lista

Ve a  Plantilla Editar HTML y busca ]]></b:skin>
Ahora copia el siguiente código

a.mimi {
letter-spacing:1px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
margin:1px;
cursor:vertical-text;
text-transform:uppercase;
display:inline-block;
font:9px Tahoma;
text-align:center;
background: #FFFFFF;
width:350px;
color:#777777;
padding:3px;
border:3px double #B2F9AE;
text-decoration:none;
}
a.mimi:hover{
border:3px double #B2F9AE;
color:#A6FCB4;
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
}

{Si lo quieres como esta, no edites nada si quieres que tenga otros colores edita los # y si quieres que tenga otros efectos editas a tu gusto}

Antes de ]]></b:skin>  pegas el anterior código y guardas...

En una gadget o entrada html colocas este código:

<a class="mimi" href="Url de la página">Página</a><br />
<br />

Efecto Blockquote


Ve a  Plantilla  Editar HTML  y busca ]]></b:skin>

Antes de ]]></b:skin> pegas este código


Blockquote {
letter-spacing:1px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
margin:1px;
cursor:vertical-text;
text-transform:uppercase;
display:inline-block;
font:9px Tahoma;
text-align:center;
background: #FFFFFF;
width:350px;
color:#777777;
padding:3px;
border:3px double #B2F9AE;
text-decoration:none;
}
blockquote:hover {
border:3px double #B2F9AE;
color:#A6FCB4;
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
}

Vista previa y guardas :D


Créditos:
Efecto lista: Wasaneoby algo así
Efecto blockquote: Yo lo arreglé para blockquote así que créditos a mi :D

¡BESOTES! image más rato traigo más image

4 comentarios:

  1. Kya! Está muy chulo ese efecto :D
    Saludos Caro!!

    ResponderEliminar
  2. gracias por el tuto!! *0* esta super lindo el efecto :D
    saluditos! ^^

    ResponderEliminar
  3. Esta precioso el block.es super kawaii &elegante^3^
    saludos~

    ResponderEliminar

Tu comentario me haría muy feliz!! :D