Hace no mucho tiempo he implementado en el blog unos marcadores sociales y he recibido varios comentarios preguntando como ponerlos en su blog. y ya saben que yo no me guardo nada y es por eso que hice este tutorial.
Y por si fuera poco, para que sea todavía más fácil, en este caso, vas a poner todo el código (CSS+HTML), en un gadget, eligiendo la opción HTML/Javascript, sólo vas a llevarte el código completo de los botones que más te gusten, y vas a editar lo que resalté con verde, al final del código.
<style type="text/css">
ul#m-soc7{margin:18px 0 0 10px; padding:0; width:280px; height:66px}
ul#m-soc7 li{list-style:none; margin:4px; padding:0; float:left; border:none}
ul#m-soc7 li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU_dCS3TqNNBeBW1Jhdw9umdc9htO1VfbJVFuNDRPDjwtFItv60eGaOALTj_nupRk0WsvLHB8s72KhD0YWrk5BiBEnOPyykfP_iP-Iqo6eqtVMB_58bmxcDTyjuNnljJR6MfP88WM1pM4Z/s400/sprite7-compartidisimo.png) no-repeat 0 0; margin:0; padding:0; display:block; position:relative; width:48px; height:48px; overflow:visible}
ul#m-soc7 li a.twitter{background-position:0 0}
ul#m-soc7 li a.facebook{background-position:-48px 0}
ul#m-soc7 li a.google{background-position:-96px 0}
ul#m-soc7 li a.youtube{background-position:-144px 0}
ul#m-soc7 li a.rss{background-position:-192px 0}
ul#m-soc7 li a.twitter:hover{background-position:0 -48px}
ul#m-soc7 li a.facebook:hover{background-position:-48px -48px}
ul#m-soc7 li a.google:hover{background-position:-96px -48px}
ul#m-soc7 li a.youtube:hover{background-position:-144px -48px}
ul#m-soc7 li a.rss:hover{background-position:-192px -48px}
ul#m-soc7 li a span{background:#555; position:absolute; top:-10px; width:auto; left:0;opacity:0; padding:3px; text-align:left;text-decoration:none; color:#fff; filter:alpha(opacity=0); white-space:nowrap; border-radius:3px; font-size:12px; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; -ms-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out}ul#m-soc7 li a:hover{text-decoration:none}
ul#m-soc7 li a:hover span{opacity:.8; filter:alpha(opacity=80); top:-24px}
</style>
<ul id="m-soc7"><li><a class="twitter" href="#"><span>Twitter</span></a></li><li><a class="facebook" href="#"><span>Facebook</span></a></li><li><a class="google" href="#"><span>Google+</span></a></li><li><a class="youtube" href="#"><span style="border:0;">YouTube</span></a></li><li><a class="rss" href="#"><span style="border:0;">Suscripción</span></a></li></ul>
Cómo poner los botones, paso a paso
Paso 1. Ve a Diseño, y pon el código completo de los botones que te gustaron, en un gadget HTML/Javascript.
Paso 2. Luego, edita la última parte del código, que es la del HTML y resalté de azul, escribiendo la dirección web de la red social, donde está la almohadilla (#). Es fácil saber a que red corresponde cada almohadilla, ya que antes verás la clase (class), que lleva el nombre de la red.
Por ejemplo, esta es la linea de código en el HTML, del botón de Twitter:
<li><a class="twitter" href="#"><span>Twitter</span></a></li>
Ahí donde esta el signo de número (#), pones la dirección web de tu cuenta de Twitter. El gatito se debe de quitar, sólo debe de llevar la dirección web, cuidado con no borrar las comillas antes y después.También puedes editar el texto del tooltip y que en este caso, dice: Twitter.
Paso 3. Ya que editaste el código para todos los botones, guarda los cambios y listo ;)
