En este articulo te mostrare como añadir unos botones para compartir en redes sociales en forma de burbuja llamado Bubblicons a tu blog. Este es un widget. que puedes añadir a tu blog facilmente. Estoy usandocodigos de Css con HTML.
Para ver ejemplo de click en la siguiente imagen:
Para añadir este widget de bubbleicons a tu blog sigue estos pasos.
1.Entra a tu cuenta de Blogger
2.Ve a Diseño y escoger Añadir un gadget y selecciona Html/Javascript
3.Ahora pega el siguiente codigo en el Html/Javascript.
<style>
/* Ciudadblogger */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>
<br />
<center>
<br />
<ul class="bubblewrap">
<li><a href="http://www.digg.com/NombredeUsuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNEDomto8t28hy7XCne4-nXpMUnF15UMpzOhbHIBeJrIe5O1f2nfRK9wIkHg6GozYcJEPD_YTyO9SLYXcNRRa062B1oBS3OZ53R0Yg-EEaHmMneiwRRfrNJ2oHQTKB_TwQRL03AigHaoA/s1600/bloggertrix-digg.png" title="Añadenos a Digg" /></a></li>
<li><a href="http://www.facebook.com/Trucosdeblogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt0y_C50hG8V5QUhxhV5l-eic3_O5tjccAi6AD5qQJiueCTTnmWyoHpssfLi4JmJQrhH1VoZYOCtzMHulGMzR-5Ps3aqfxiEFcK6Xfe_igDVYWfk9i8L2tQLgt7N5rpzsQu6DFSlMMzts/s1600/bloggertrix-facebook.png" title="Añadenos a Facebook" /></a></li>
<li><a href="http://www.stumbleupon.com/ciudadblogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiilSU5FVkd6nRrFN8Y1cMLQRRtEIJE_Laqd53A0S6NU7HU86fz6d_4JoZjyk1TcEba3XUrWFG-OT9gQjAZXeFdNP7aRfdYHcNtoAiIPX16ah4jnDonW6A0JoKr16N3n9ZUFuEHAyD0O5Q/s1600/bloggertrix-stumbleupon.png" title="Añadenos a Digg" /></a></li>
<li><a href="http://www.twitter/Andante772"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNPq4hV7QYPoG0fh5G3RHepPlmncSgTxPgcH198vhROAZqbOSxg6OydvO3U86NG2JHK-XjKmOs7Y6lENgWA6xTjD7gtG7FKXkKwkL9iqAIMwFQJ21Q4HAZ0BnSGd1-7tMue2M938aYCo/s1600/bloggertrix-twitter_alt.png" title="Añadenos aTwitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/supertrucosdeblogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qtCyxwJLkm5i8o6zkZg0ULF1tt7Md6Tyt19CLjdSeHiBN66Pie9Xq2fGZCH799RwlrDRZgRuNpOtOAp6j00VP9pVfXYjvPyIsM5thDczjsEuxn1gEEBGC9sguvC_1FnKzqGkQUaNSxg/s1600/bloggertrix-RSS.png" title="Añadenos a RSS Feed" /></a></li>
</ul>
</center>
Des[ues que pagues el codigo de arriba en espacio provisto en Html/javascript*Reemplace trucosdeblogger con tu nombre de usuario de facebook
*Reemplace Andante772 con tu nombre de usuario de twitter
*Reemplace NombredeUsuario con tu nombre de usuario de digg
*Reemplace supertrucosdeblogger con tu nombre de usuario de feedburner
*Reemplace ciudadblogger con tu nombre de usuario de stumbleupon
4. haber hecho los cambios anteriores guarda tu HTML/Javascript'.
Listo ahora tu y tus visitantes disfrutaran y compartiran tus articulos en redes sociales con solo un click en los botones burbujas estilizados,y hace tu sitio o blog mas atractivo.
0 comentarios:
Publicar un comentario