Así como ocurre en las telenovelas, este post es la continuación del anterior, donde compartía contigo cuatro opciones de iconos sociales, listos para que los pongas en tu blog. En esta ocasión he preparado otras tres opciones, para que tengas más posibilidades de que alguna se adapte al diseño de tu blog, y al igual que la vez anterior, también usan solo una imagen.
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, solo vas a llevarte el código completo de los botones que más te gusten, y vas a editar lo que resalté con rojo, al final del código.
Cómo poner los botones, paso a paso
Paso 1. Ve a Diseño, o elementos de la página de la vieja interfaz, 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 la almohadilla o signo de número (#), pones la dirección web de tu cuenta de Twitter. El gatito se debe de quitar, solo 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 ;)
(ver opciones 5,6, y 7)
Opción 5
Código (CSS + HTML)
<style type="text/css">
ul#m-soc5{ margin:19px 0 0 10px; padding:0; width:220px; height:60px}
ul#m-soc5 li{list-style:none; margin:4px; padding:0; float:left; border:none}
ul#m-soc5 li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZwwvycdEEXKudRbqzXKo5p6eXOoCXgUDPus6kzWlPNFpSOtLpqTBHeGlOdTrBdzuaECfNP0bpZTzcQw1NwWXhyN7dnFHb6slEMo3R3unfyMoXhBj8Bj3TPLVtjZMrFG1-q0CUtOx8atBZ/s400/sprite5-compartidisimo.png) no-repeat 0 0; margin:0; padding:0; display:block; position:relative; width:33px; height:33px; overflow:visible}
ul#m-soc5 li a.twitter{background-position:0 0}
ul#m-soc5 li a.facebook{background-position:-33px 0}
ul#m-soc5 li a.google{background-position:-66px 0}
ul#m-soc5 li a.youtube{background-position:-99px 0}
ul#m-soc5 li a.rss{background-position:-132px 0}
ul#m-soc5 li a span{background:#555; position:absolute; top:-5px; left:-10px;width:auto;opacity:0; padding:3px; text-align:left; color:#fff; filter:alpha(opacity=0); white-space:nowrap;text-decoration:none;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-soc5 li a:hover{text-decoration:none}ul#m-soc5 li a:hover span{opacity:.7; filter:alpha(opacity=70); top:-28px}
</style>
<ul id="m-soc5">
<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>Youtube</span></a></li><li><a class="rss" href="#"><span>Suscríbete</span></a></li>
</ul>
Opción 6
Código (CSS + HTML)
<style type="text/css">
ul#m-soc6{ margin:19px 0 0 10px; padding:0; width:190px; height:55px}
ul#m-soc6 li{list-style:none; margin:4px; padding:0; float:left; border:none}
ul#m-soc6 li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYaVfgETCZkeiNj4yFL6qva9CABT67Ib3170w7pnQOj_F1AuQFl8lECLWMhXG4wkgr8qpvHZEfOHmy0jdQfSpx9MQjpq_JwUUQ17L8RdVtKDOhj0TGjTET5vCaagmidNOEl5sU5lkO0Xu8/s400/sprite6-compartidisimo.png) no-repeat 0 0; margin:0; padding:0; display:block; position:relative; width:32px; height:32px; overflow:visible}
ul#m-soc6 li a.twitter{background-position:0 0}
ul#m-soc6 li a.facebook{background-position:-32px 0}
ul#m-soc6 li a.google{background-position:-64px 0}
ul#m-soc6 li a.rss{background-position:-96px 0}
ul#m-soc6 li a.twitter:hover{background-position: 0 -32px;}
ul#m-soc6 li a.facebook:hover{background-position: -32px -32px;}
ul#m-soc6 li a.google:hover{background-position:-64px -32px;}
ul#m-soc6 li a.rss:hover{background-position:-96px -32px;}
ul#m-soc6 li a span{background:#555; position:absolute; top:-5px; left:-10px; width:auto;opacity:0; padding:3px; text-align:left; color:#fff; filter:alpha(opacity=0); white-space:nowrap;text-decoration:none; 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-soc6 li a:hover{text-decoration:none}ul#m-soc6 li a:hover span{opacity:.7; filter:alpha(opacity=70); top:-27px}
</style>
<ul id="m-soc6"><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="rss" href="#"><span>Suscríbete</span></a></li></ul>
Opción 7
Código (CSS + HTML)
<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/AVvXsEhdnv9dtzoamzuOd47XmQGS0rLjarogxDNCbyah_NwjesUQlwia4USbOWAcjXR6TF11Fnojs7-MgLOVj49mXmHf1N5pTfpQWF10TVZfGm901E2UR6v7LDE67PDWYM6cGGMjxPXIRWk3gOik/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>
Nota: Puse la URL de la imagen, de cualquier modo, te recomiendo que la alojes por tu propia cuenta en Blogger, para luego sustituirla, así evitas cualquier problema.
Actualización, 20/marzo/2012: Agregué una linea de código en el CSS, para que no se subraye el texto del tooltip; ésto ocurre solo en las plantillas que tienen una regla que hace que se subrayen todos los textos de los enlaces en la plantilla, al poner el puntero del ratón sobre un enlace.
Créditos por los botones:
awicons
Ca-creation
No hay comentarios:
Publicar un comentario