La Adición del llamativo widget de intercambio social a su blog o sitio aumenta las posibilidades de conseguir más suscriptores. La mayoría de los visitantes son la fuerza que hace clic en tu currículum de suscripción debido al widget de reparto increíble que les presento, por qué algunos hacen clic en él sólo para pruebar y antes de que te des cuenta, se convierten en tus fieles suscriptores o seguidores.
Ahora voy a compartir con ustedes, un widget de intercambio social que rota, que giran al poner el ratón, según el grado ya establecido, y regresa a su posición original cuando se quita el mismo.
Ejemplo:
Como Añadir Iconos de Rotacion Sociales a tu Blog
- Entre a la interface de tu blogger
- Da Click on Diseño > Elementos de Pagina > Añadir un Gadget(Vieja interface de blogger)
- Da Click en Plantilla > Añadir un Gadget (Nueva Interface de Blogger)
- Selecciona HTML/JavaScript de la lista de opciones y pega el siguiente codigo en area de contenido
<style>
p#rb_socialicons img {
/* Spinning Social Icons Widget por www.ciudadblogger.info */
-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;
}
p#rb_socialicons img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
/* Spinning Social Icons Widget por www.ciudadblogger.info */
</style>
<center><p id="rb_socialicons">
<a href="http://www.facebook.com/realcombiz/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimKgl52fFWcmRAcawhKraEM0Ea1vGuI7RF4USH2_ZZmhyphenhyphen5DMd551L_po6jwYJSt1Ybg5GW10XUrZGpzejHwQKLGwiVDgHbjZL-T3L6x_xqBKYXMXNg0rqJMJTPBXGi0wOlSHmxhKLU-dw/s1600/rb+facebook+icon.png" /></a>
<a href="http://www.twitter.com/realcombiz/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhovZLzUNatZSgj_gALt377ic90gr-itC3TFdIGzdx7JHlBDfyS3-icmCaLIqi33EwP274qKlkdEDeOs79Uu4kSSFdPmIRf28fLzfA_GJikkPa9ObIA5VDKolX4KkGfeAAVmPvdDuUl750/s1600/rb+twitter+icon.png" /></a>
<a href="https://plus.google.com/u/0/110710740924167130289">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbp68jxTL5-GdD3GMRA8vyKiCadRio4gHv6ffhMmf98uNV0fJbXZtqqv8tuCCHZUArFykDbk-Fxt1dZ_P4xx03zFPevdyPWjx-xfQZOX1BCxxXGfqSs9F6Lobg-7iAJOWdC-22tTNu3g/s1600/rb+google+plus+icon.png" /></a>
<a href="http://www.feeds.feedburner.com/realcombiz/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyMCodq5doGcz-UFNTPdPyX6hFq9-P-Mqgqb6c6zb_jZKs9G3y1_ZetqZB1LdnHKUQIuH4BmjtwaUENpBVrEyHkihFaH2EjxCQfXKTRXv3OTozD7ElZEdcRat_da6WEjBFI5WieuqDVYY/s1600/rb+rss+feed+icon.png" /></a>
<a href="http://www.youtube.com/realcombiz/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaF_iiWzirHIJqRSKrWjOBIuxMbMS6pQTqK7cgrBN2sGFBHFEKoLZtr6_64wsR7rwXfakg6FHm1_AowcNBy25DyQ5vqxEoXNLnJ4w_w-yVH5ZMW1GLXJ99NYQkUZksGC4JobrggLeOM5g/s1600/rb+youtube+icon.png" /></a>
</p></center>
- Da Click en Boton de Guardar
Customizar
Puedes facilmente personalizar tus icons a tu gusto editando el codigo de abajo
- Para cambiar el rate (tiempo tomado) cuando rota el icono, simplemente edite 0.8s
- Puedes cambiar el grado que se hecha el icon en rotar,simplemente edite 360 grados.
0 comentarios:
Publicar un comentario