efectos para las imagenes al pasar el cursor

Les traigo algunos efectos simpaticos que pueden usar para sus blog!! funcionan cuando se coloca el cursor sobre las imagenes del blog...

  1er Efecto: efecto giratorio

primero vamos a diseño de la plantilla HTML  y antes de ]]></b:skin>  pegamos el siguiente codigo:

img{-webkit-transform: perspective(400px) rotateX(0deg);
-moz-transform:perspective(400px) rotateX(0deg);
-o-transform:perspective(400px) rotateX(0deg) ;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
-webkit-transform: perspective(400px) rotateX(360deg) ;
-moz-transform: perspective(400px) rotateX(360deg) ;
-o-transform: perspective(400px) rotateX(360deg);}

 2do efecto: efecto agrandado

primero vamos a diseño de la plantilla HTML  y antes de ]]></b:skin>  pegamos el siguiente codigo:

img{
-webkit-transform: perspective(400px) ;
-moz-transform:perspective(400px) ;
-o-transform:perspective(400px) ;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
-webkit-transform:perspective(400px) translateZ(150px) ;
-moz-transform:perspective(400px) translateZ(150px) ;
-o-transform:perspective(400px) translateZ(150px) }

3er efecto: efecto transicion

primero vamos a diseño de la plantilla HTML  y antes de ]]></b:skin>  pegamos el siguiente codigo:

img{

-webkit-border-top-left-radius: 100px;

-webkit-border-bottom-right-radius: 100px;

-moz-border-radius-topleft: 100px;

-moz-border-radius-bottomright: 100px;

border-top-left-radius: 100px;

border-bottom-right-radius: 100px;

-webkit-transition:All 1s ease;

-moz-transition:All 1s ease;

-o-transition:All 1s ease;

}

img:hover{

-webkit-border-top-right-radius: 100px;

-webkit-border-bottom-left-radius: 100px;

-moz-border-radius-topright: 100px;

-moz-border-radius-bottomleft: 100px;

border-top-right-radius: 100px;

border-bottom-left-radius: 100px;

-webkit-border-top-left-radius: 0px;

-webkit-border-bottom-right-radius: 0px;

-moz-border-radius-topleft: 0px;

-moz-border-radius-bottomright: 0px;

border-top-left-radius: 0px;

border-bottom-right-radius: 0px;}

 4er efecto: efecto que gira hasta desaparecer

 primero vamos a diseño de la plantilla HTML  y antes de ]]></b:skin>  pegamos el siguiente codigo:

img{
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
-webkit-transform: rotate(360deg) scale(0);
-moz-transform: rotate(360deg) scale(0);
-o-transform: rotate(360deg) scale(0)
}

 

Texto que se esconde

hola chicas les trigo un nuevo gadget para sus blogs!! es un truquito de esconder algun texto en sus blogs!! por ejemplo yo tengo creditos escondidos: 

como siempre van y habren su gadget HTML y pegan el codigo de aki abajito :

<center><div id="spoiler"><div><input value="Creditos!!=D" style="width:200px;font-size:12px;background-image: url(URL DE FONDO);-moz-border-radius: 5px; border-radius: 5px;margin:13px;padding:0px;border-style: 2px solid #ff9fcc;" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'hide spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'show spoiler!'; }" /><div id="show" style="display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-width:0px; padding:3px; width:90%">Texto que quieres esconder ^^</div></div></div></center>

Cambios:

morado: texto que si se ve

rojo: largo del icono

Fucsia: url de fondo

verde: texto que vamos a esconder

bueno eso es todo bay

boton de twitter en el blog♥

Hola mis chicas como están?? psss yo hace tiempo no hago un tutorial ni nada parecido pss como ya mismo salgo para el cole decidi dejarles este tuto de como tener su boton de twitter en el blog!!

es algo muy facil de hacer oka? 

empecemos =)

 sigue los siiguientes pasos:

Escritorio 

Diseño 

Añadir un gadget Html

y hay pegas el siguiente:

<center>
<a href="https://twitter.com/valiitOp96" class="twitter-follow-button" data-show-count="false" data-lang="en" data-size="medium">Follow @ValiitOp96</a><br/><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><br /></center>

Ahora lo que esta con naranja es donde vas a poner la direccion url de tu twitter & lo que esta con verde es en donde vas a poner  tu nick de twitter :)

ok eso es todo por hoy espero que les sirva este pequeñisimo y rapido tuto!! y pss bay eso todo ....  se les quiere chi@s ^^