[ Tutorial ] Blogger's Friends Efect

HOLA HOLA! Gente bonita.
¿Cómo están?
Yo muy bien. Sé que no les importa pero, sí estoy bien.

Hoy traigo un tutorial que me habían pedido [ disculpen no recuerdo quién fue -mala memoria- ]. De como le hago para poner esa sección de Blogger's Friends. Así que hoy se los comparto.

GO!

*ADVERTENCIA: Recuerda antes de hacer cualquier modificación a tu plantilla, siempre debes guardar una copia de seguridad de ella.

Blogger's Friends Efect

[ VISTA PREVIA clic ]

1RO: Desde PLANTILLA → Editar HTML busca ]]></b:skin> y pega el sgte. código arriba de este y guarda. Para buscar un código usa la combinación de botones  Ctrl + F 

/* Blogger Friends Efect ----------------------------------------------- */ .friendefek img { filter: url('#grayscale'); /* Versión SVG para IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 */ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); /* Para cuando es estándar funcione en todos */ filter: Gray(); /* IE4-8 and 9 */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .friendefek img:hover { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: none; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

2DO: Ahora en DISEÑO agrega un gadget HTML/JavaScriptAgregar y pega el sgte. código.

<div class="friendefek"> <a href="URL BLOG FRIEND"><img src="http://i61.tinypic.com/2wftzpi.jpg" /></a> <a href="URL BLOG FRIEND"><img src="http://i59.tinypic.com/dq2btu.jpg" /></a> <a href="URL BLOG FRIEND"><img src="http://i61.tinypic.com/5zmq93.jpg" /></a><br /><a href="URL BLOG FRIEND"><img src="http://i59.tinypic.com/2vnrnsj.jpg" /></a> <a href="URL BLOG FRIEND"><img src="http://i60.tinypic.com/2eb9115.jpg" /></a> <a href="URL BLOG FRIEND"><img src="http://i57.tinypic.com/1zdz0c7.jpg" /></a><br /><a href="URL BLOG FRIEND"><img src="http://i61.tinypic.com/n1up2f.jpg" /></a> <a href="URL BLOG FRIEND"><img src="http://i62.tinypic.com/23u7f5t.jpg" /></a> <a href="URL BLOG FRIEND"><img src="http://i57.tinypic.com/2d2d8n6.jpg" /></a></div>

Espero que les haya gustado el tutorial. Nos leemos mañana y muy pronto vengo trayendo recursos para este tutorial. Bye byeeeeeeeeeeeeeeeeeeee