4 Opciones de iconos sociales para que sigan tu blog, usando una sola imagen y con animación

0





CSS Y HTML de cada opción 

Opción 1

iconos sociales


 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(http://2.bp.blogspot.com/-Aw_MibBJjy0/T1ky-ufuYrI/AAAAAAAAJFA/-h7XKBtLhvU/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(
http://1.bp.blogspot.com/-WEUoFdODkl4/T1klwzMGoSI/AAAAAAAAJDU/RLpgmO0OHjs/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(http://2.bp.blogspot.com/-1iSzINNp5eg/T1kraVj3_gI/AAAAAAAAJEE/WP_5VVhaVjg/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


iconos sociales


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

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, o a elementos de la página en la vieja interfaz, 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.


fuente.

Agradecer no cuesta nada!

Cualquier post, link roto, o erroneo, porfa!, reportalo en este post , agradecemos tu cooperacion.

0 comentarios :