sábado, 23 de marzo de 2013

Elegante Widget de redes sociales y suscribete para blogger

Esta ves les traigo un bonito widget de las redes sociales mas comunes, dentro de ellas Facebook, Google+, Pinterest, Twitter, Rss y tambien suscripcion por Email.


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


<style>
.social{background:none repeat scroll 0 0#fff;border-bottom:1px solid#F0F0F0;height:90px;padding:8px}.social li{float:left;margin-right:4px;text-align:center;width:52px;list-style:none}.social li.last{margin-right:0}.social li a{color:#666666;font-size:11px;line-height:34px;opacity:0.6;padding-top:42px}.social li a:hover{color:#666666;opacity:1;text-decoration:none}.social.social-feed{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjRmZ7cDffRk8uruBKo_oPMG-DIVisaZT-tc1VIrv_eTEk7ps03TdxIwQ9eNRSjlU6ZM5CWqid8M0B1VXERh1lBeaQgkSBrA4jQBj39kbD1NFpS1KWp7VX6UUcmqu-7U0TuXf5gZt6p8nE/")no-repeat scroll 0 0 transparent;display:block}.social.social-email{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbNqcP67Jo1IgI77Y0rDu5hTSiFg2YbLcWX2ySzL92XyJBehzYl1z6enbCihzqeOvKOeAf9VEJdBUl2K-Ht2-XEoMwi07fq3ZAvLOD_iA9HRhWh_Ee0_dcA30F1HQNoOZdbdr1gHkekPHC/s1600/email-feed.png")no-repeat scroll 0 0 transparent;display:block}.social.social-twitter{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9tzXRaIwXpJOatmW2OnPts1Ep25SeJdumrK_WXiP7yegFhyphenhyphencyM-Sdg_fRfcsIcXx1LprIjeCWqK94jD0xGugMDZ4d0CLa3ghv6VXYUmoKzz4UTEeFSmd_kpPPoFH96tLtzPDTvwkyBThX/")no-repeat scroll 0 0 transparent;display:block}.social.social-facebook{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR2izl-3DYFzIRAc89xMDlCEvnyK0ae9aARs98mBjLVBh9c6JjSx_qHA0vNotDD4YBjlnBCvXwFjjlrtdY92J_lFOskdGqx8lP2hXo6JSwd13t4JcZixjH4ZoefIEsT6mGWa0xikEOC0Hy/")no-repeat scroll 0 0 transparent;display:block}.social.social-googleplus{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXLJy-gddtJBtHcJrWov7CWA3N4tPNcUMOhOm6G4BGBPTctMReleQsajWB5CiQ3N3a7ErexD-5kBtT_DBLvoqKuG4C3GdvebhAGxaghvjqYSTCq75UMKpBshyphenhyphen5SZeERgJPzRy0jyQ8lzNx/")no-repeat scroll 0 0 transparent;display:block;margin-right:0}.social.social-pinterest{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYg8DiUcBjzX0LgkYqBg8taf08Md24SGN2p7ZfVnVQjg-tQqP3LOG4U_IYGM9y2nhJU8HwVZVEgyCDp13tgVIFc9GOxp2HyfTPDNSc8D6ErN9viS0LQbU3kZlryUZzbhOXTXkeUFcE_L2A/s1600/pinterest-icon.png")no-repeat scroll 0 0 transparent;display:block}
/* from http://www.mdtutoriales.blogspot.com */
</style>
<ul class='social'>
<li><a class='social-feed' href='http://feeds.feedburner.com/Tublogs' rel='nofollow' target='_blank'>RSS</a></li>

<li><a class='social-email' href='http://feedburner.google.com/fb/a/mailverify?uri=tublogs&loc=en_US'
rel='nofollow' target='_blank'>Email</a></li>
<li><a class='social-twitter' href='http://twitter.com/tublogs' rel='nofollow' target='_blank'>Twitter</a></li>
<li><a class='social-facebook' href='http://facebook.com/tublogs' rel='nofollow' target='_blank'>Facebook</a></li>

<li><a class='social-pinterest' href='http://pinterest.com/tublogs/' rel='nofollow' target='_blank'>Pinterest</a></li>
<li class='last'><a class='social-googleplus' href='https://plus.google.com/Id de tu perfil/posts'>Google+</a></li>
</ul>
<small><a href="http://www.mdtutoriales.blogspot.com">Tutoblogger</a></small>

Todo lo que esta en rojo es lo que tienes que editar, bueno en el caso de google+ lo e puesto en azul en esa parte va el ID de tu perfil, el ID son todos los numero que aparese en el url de tu perfil por ejemplo:


el url de mi perfil de google+  https://plus.google.com/u/0/107424685125055103818/posts

en este caso mi ID es : 107424685125055103818

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...