En un post anterior, vimos cómo agregar botones para que puedan seguir tu blog, usando una sola imagen. De ese modo, no afectamos tanto la carga del blog. Hoy veremos otras opciones de iconos, usando texto emergente o tooltip con animación que conseguiremos con CSS.
Preparé cuatro opciones con iconos y efectos distintos, pero usando el mismo efecto en el tooltip y estilo similar al que veía en Marcofolio, la técnica que usa no ofrece el sprite con los iconos, pero decidí adaptarlo, y usar una sola imagen.
Sólo elige el estilo que más te guste y/o se adapte al diseño de tu blog, y pones en tu plantilla el código CSS y el código HTML de los botones que elegiste, siguiendo los pasos que están debajo de todas las opciones ;)
CSS Y HTML de cada opción
Opción 1
CSS
/* Botones social*/ul#m-soc{margin: 18px 0 0 10px;padding: 0;width: 280px;height: 66px;}
ul#m-soc:hover li {opacity:0.6;}ul#m-soc li {list-style: none;margin: 4px;padding: 0;float: left;border: none;}
ul#m-soc li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5UMEgyEkFxgXcddRf7zbnKVBG_ZxV-8_M_4RunHdkEfNPBCifZ9Q8Ah7HAYBzu8HgXViqxovNI1rzahhuQVWo4nqvKsvvaopPu-COtBe_MGc_OG16NekK24GqMDSLfhhOOp92GBNTQ-kn/s1600/sprite1-compartidisimo.png) no-repeat 0 0; margin: 0;padding:0;display: block;position:relative;width: 48px;height: 48px;overflow: visible;}ul#m-soc li a.twitter{background-position: 0 0;}
ul#m-soc li a.facebook{background-position: -48px 0;}
ul#m-soc li a.google{background-position: -96px 0;}
ul#m-soc li a.youtube{
background-position: -144px 0;}
ul#m-soc li a.rss {
background-position: -192px 0;}
ul#m-soc li a span{background: #555;position:absolute;top:-10px;left:0;width:auto;height:auto;opacity:0;padding:5px;text-align:left;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-soc li:hover{opacity:1}
ul#m-soc li a:hover{text-decoration:none}ul#m-soc li a:hover span{ opacity:.8;filter:alpha(opacity=80);top:-23px}
HTML
<ul id="m-soc">
<li><a class="twitter" href="#"><span>Seguir en 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;">Suscríbete</span></a></li></ul>
Opción 2
CSS
/* Botones social2*/
ul#m-soc2{
margin: 18px 0 0 10px;padding: 0;width: 220px;height:50px;}
ul#m-soc2 li{
list-style: none;margin: 7px;padding: 0;float:left;border: none;}
ul#m-soc2 li a{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvx07YhrLtSTI9kMJhbTpMarWDC_S6b212a32_9URMKz2mIQabqbSiC8tUKuh-gCPXCWomQHsn2riqXWrTxhgE0XlDvLofMrv_1akHQlI8yTNB_vPHhFEjdw6fKXywCGG_N-2ceCBGwsrS/s1600/sprite2-compartidisimo.png) no-repeat 0 0;
margin:0;padding:0;display: block;position:relative;
width: 33px;
height: 33px;
overflow: visible;
}
ul#m-soc2 li a.twitter{
background-position: 0 0;
}
ul#m-soc2 li a.facebook{
background-position: -33px 0;
}
ul#m-soc2 li a.google{
background-position: -66px 0;
}
ul#m-soc2 li a.rss{
background-position: -99px 0;
}
ul#m-soc2 li a.twitter:hover{
background-position: 0 -33px;
}
ul#m-soc2 li a.facebook:hover{
background-position: -33px -33px;
}
ul#m-soc2 li a.google:hover {
background-position:-66px -33px;
}
ul#m-soc2 li a.rss:hover{
background-position:-99px -33px;
}
ul#m-soc2 li a span{
background: #555;position:absolute;
top:-10px;left:-10px;width:auto;height:auto;opacity:0;
padding:3px;text-align:left;
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-soc2 li a:hover{text-decoration:none}
ul#m-soc2 li a:hover span{
opacity:.7;
filter:alpha(opacity=70);
top:-23px}
HTML
<ul id="m-soc2"><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 3
CSS
/* Botones social3*/
ul#m-soc3{
margin: 18px 0 0 10px;padding: 0;width: 220px;height:50px;}
ul#m-soc3 li{list-style: none;margin: 4px;padding: 0;float:left;border: none;}
ul#m-soc3 li a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuYvZOeKtkW9fbL2apZQsUC-A5UD9AriHlDpUUG7B9eRWULjq3KB-gt1NsgAFDVv1jPrMgjCuV7VWf8B79QqTRLOo-ieVj9um8tma4ZtPZnGjvIxeQzXiT6oybzexSlzMeUZsh8vMXsZb3/s1600/sprite3-compartidisimo.png) no-repeat 0 0; margin:0;padding:0;display: block;position:relative; width: 33px;height: 33px;overflow: visible;
}
ul#m-soc3 li a.rss{
background-position: 0 0;
}
ul#m-soc3 li a.twitter{
background-position: -33px 0;
}
ul#m-soc3 li a.facebook{
background-position: -66px 0;
}
ul#m-soc3 li a.google{
background-position: -99px 0;
}
ul#m-soc3 li a span{
background: #555;position:absolute;
top:-5px;left:-10px;width:auto;height:auto;opacity:0;
padding:3px;text-align:left;
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-soc3 li a:hover{text-decoration:none}
ul#m-soc3 li a:hover span{
opacity:.7;
filter:alpha(opacity=70);
top:-23px}
HTML
<ul id="m-soc3">
<li><a class="rss" href="#"><span>Suscríbete</span></a></li><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></ul>
Opción 4
CSS
/* Botones social4*/
ul#m-soc4{
margin: 18px 0 0 10px;padding: 0;width: 250px;height:55px;}
ul#m-soc4 li{
list-style: none;margin: 4px;padding: 0;float:left;border: none;}
ul#m-soc4 li a {
background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuv3ztthIAmSUF3C-iiBN6F3qVaoBAOPElhBesSKz5waEb4MITPuOoPlHQcVqM1mrsbQdwci7AZLk6_mnc2iQf6rimt6lCDm_DwIhMfEa0Fp6ENGt141UU1vFZ6m-RshWbP0TdhZ05m7Y/s1600/sprite4-compartidisimo.png) no-repeat 0 0;width:41px;height:40px;
margin:0;padding:0;display: block;position:relative;
overflow: visible;
}
ul#m-soc4 li a.twitter{
background-position: 0 -41px;
height:38px;
}
ul#m-soc4 li a.facebook{
background-position: -41px -40px;
}
ul#m-soc4 li a.google{
background-position:-82px -40px;
}
ul#m-soc4 li a.youtube{
background-position:-123px -40px;
}
ul#m-soc4 li a.rss{
background-position:-164px -40px;
}
ul#m-soc4 li a.twitter:hover{
background-position: 0 0;
}
ul#m-soc4 li a.facebook:hover{
background-position: -41px 0;
}
ul#m-soc4 li a.google:hover{
background-position: -82px 0;
}
ul#m-soc4 li a.youtube:hover{
background-position: -122px 0;
}
ul#m-soc4 li a.rss:hover{
background-position: -163px 0;
}
ul#m-soc4 li a span{
background: #555;position:absolute;
top:-10px;left:-10px;width:auto;height:auto;opacity:0;
padding:3px;text-align:left;
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-soc4 li a:hover{text-decoration:none}
ul#m-soc4 li a:hover span{opacity:.8;
filter:alpha(opacity=80);
top:-23px}
HTML
<ul id="m-soc4"><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>
Cómo poner los botones en tu blog paso a paso
Es fácil, vas a necesitar los dos códigos para que funcionen los botones: el que dice "CSS", y que dice "HTML" debajo de cada opción.
Paso 1. Ve a Plantilla > Diseñador de plantillas > Avanzado > Añadir CSS y en el campo pones el código CSS de los botones que elegiste, y guarda los cambios en "Aplicar al Blog".
Paso 2. Ve a Diseño, y pega el código HTML de los botones que elegiste, en la columna lateral u otra sección, eligiendo la opción HTML/Javascript. Sustituye la almohadilla (#) por la dirección web de tu página en cada red social respectivamente. También puedes cambiar el texto del tooltip si así lo deseas. Luego guardas los cambios.
Notas:
El efecto deslizante no funciona en IE, fuera de eso todo funciona bien.
Puedes invertir la posición de los iconos donde se usan dos columnas de iconos en el sprite.
Puedes descartar un icono, eliminando el CSS y el HTML que corresponda a éste.
Actualizaciónes: He agregado la imagen con los iconos, está resaltada con rojo, de todos modos, te recomiendo ámpliamente que la alojes por tu propia cuenta para evitar problemas ;)
20/marzo/2012: Agregué una linea de código en el CSS, para que no se subraye el texto del tooltip, ésto ocurre sólo 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 (:hover).
Actualicé los iconos de Google Plus en las opciones 1,2 y 3. Ahora son coloraditos...
Créditos por los iconos:
Desing Kindle
designdeck.co.uk
danieleckermann
xeloader
No hay comentarios:
Publicar un comentario