Con un simple código CSS podemos llamar más la atención de nuestros visitantes asignándole un efecto a los íconos de nuestra página; el efecto se puede usar con los íconos de las redes sociales u otros que destaquen algún tema. El procedimiento es muy sencillo, solo debemos ubicar el estilo que queramos usar sobre la eiqueta
de nuestra plantilla (Plantilla / Edición de HTML / Continuar ), y luego en un gadget HTML/Javascript ubicar las imágenes de los íconos.
Girar 360 grados con regreso.
-----------------------------------------
-----------------------------------------
Girar 70 grados con regreso.
-----------------------------------------
-----------------------------------------
Girar -360 grados sin regreso.
-----------------------------------------
-----------------------------------------
Ahora solo debemos crear un Gadget HTML/Javascript y en él ubicar el siguiente código, noten que es el mismo para los tres estilos, solo debemos cambiarle la parte del id="socialicons" por el que corresponda. Para el primer estilo sería con: id="socialicons", el segundo estilo sería con : id="socialicons2" y el tercer estilo sería con: id="socialicons3".
-----------------------------------------
URL que redirecciona 1">![]( "<span style=")
Título de la página 1
" border="0" src="URL del ícono 1 .png" />URL que redirecciona 2">![]( "<span style=")
Título de la página 2" border="0" src="URL del ícono 2 .png" />URL que redirecciona 3">![]( "<span style=")
Título de la página 3" border="0" src="URL del ícono 3 .png" />URL que redirecciona 4">![]( "<span style=")
Título de la página 4" border="0" src="URL del ícono 4 .png" />URL que redirecciona 5">![]( "<span style=")
Título de la página 5" border="0" src="URL del ícono 5 .png" />
-----------------------------------------
Si quisieramos dejar el efecto sin regreso cuando se quita el puntero del mouse/ratón del ícono en los estilos 1 y 2 como se ve en el estilo 3, tendríamos que pasar el contenido transition de la primera parte del estilo y ubicarlo sobre lo correspondiente a transform de la seguna parte.
Importante: El procedimiento se puede realizar también en una entrada, lógicamente en modo HTML, pero es importante que nunca se pase a modo Redactar o se perderán las etiquetas
del código y serían reemplazadas por etiquetas
Si quieren que los enlaces se abran en otra pestaña o ventana, visiten la siguiente ENTRADA para que conozcan la forma de hacerlo directamente desde la plantilla, o agregándole un código target="_blank" a cada enlace.
Como raro no podría funcionar en internet explorer, eso ni siquiera es un navegador. Les recomiendo Chrome, Opera, Mozilla, o Safari.
Autor original: Dynamic Drive
Espero que esta información les sea muy útil.
Gracias.
