sábado, 23 de marzo de 2013

widget de redes sociales en 3D con efecto Rotatorio



Seguiendo con los Widget de redes sociales, a diferecia de los otros que e pueblicado este me a gustado mucho ya son imagens 3D y tiene un efecto Rotatorio que le da un toque unico.



Para agregar este widget ve Diseño, a Añadir Gadget, HTML/Javascript y pega lo siguiente:

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="URL DE FEED RSS" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijt6duuBzMRq6EYikgLtDAsfFbKQ-TZOH2BsZ5POUAwJjMkPjOstYcoQFO5tRKQEMYWVe1Rw-R81ThZtrwXoSXUDodq02QySLy8sPmwGkTJgiuNw4WISwI12-0OkFfZhU4eOEEdh7geWJW/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="URL DE FEED DE EMAIL" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpR37h-9rFJRXGCPcJL478S_2CUm6LAWHr9RYoR_jNJdebMe8UTuVNmYuXbqAzUp_6poLfqZ5DFNNdAisGXYWln05VeQCz-LfQS7R3HjH0zXYCMJJk7MhiCPd5DQkbz7AG1BBVhm3YQJco/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="URL DE TU PAGUINA DEFACEBOOK" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9zvNpXAL5tRsYhkhM4dS7DLXUmOhKVojhn6-PZvX-W2PM3uUZoQAwOTqVnfjji0DTl_qF5EuyZRn5grD4ESCp3rR90z8Zb8eb7yC30z54NP4albxw6FgtCVg48h6V3ze80_jRVIM5pWfx/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="URL DEVTWITTER" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdzeH5Af-osEEZa8pDCr2-yRzUJ82Mr-2mi1Y_LpxDYkaCuj0lmvNcTjWtjex9rPyL1DCRvF_VEuMj5rXgYFqX6xwum7s56H7uWSw0FdzU8VKbGTyzdax1Na4nA-nRK7SznPkYYgUSDDOi/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="URL GOOGLE-PLUS" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXbH2jwn6IU5A8wmjoGeKYSf9oYIBaH5D2vDG35bhYgCO5EhgK8zN11YdA1xPo90H2tI0_31DDka089HJIE3P24r0fcFXB6l9wfrJS3MZuCsDHqW9OJQhpljw-RlejA6UxDI-ani8FF9W0/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="URL PINTEREST" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjupIYuUV96EQjv_hvfx8vOk6M39tM_r_oa7Wtik3B_qL1EBP_IsjprdiTO_4dd9UnBYtAUR8VhG1Kan3KdnN7iI5cdNXFIGpxbFYldkC80i-ekk9sDrMKvAf5XusI9A6WguV8zlwAkM3dl/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="FEEDBURNER-URL" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>
Ahora simplemete cambia todo lo que esta en rojo y listo.

La Vista Previa.




Icon Icon Icon Icon Follow Me on Pinterest

spice up your blog

No hay comentarios:

Publicar un comentario

Descripcion en imagenes con efecto deslizante usando css

Una forma de agregarle mas estilo a nuestras imágenes y hacer que nuestro blogs sea mas profesional, es poniendo una pequeña descripc...