Gadget desplegable y adaptable de botones para compartir

Algún título le tenía que poner a la entrada pero lo que veremos puede servir tanto para montar una botonera social, como para cualquier otra situación en la que necesitemos mostrar varias opciones dispuestas en una única fila.

El resultado será una especie de menú en el que el contenido de cada uno de los elementos se mantendrá oculto hasta hacer hover sobre él. En ese momento el elemento señalado se ensanchará, cambiará de color y dejará mostrar lo que hay en su interior.

Ya que estaba en el tajo y dado que el número de plantillas adaptables (RWD) disponibles va en aumento por aquello de la cada vez más amplia difusión de Internet en dispositivos portátiles, he ajustado el CSS para que la caja principal y sus elementos se adapten a cualquier ancho.

En la demo que he montado usé la fuente de iconos Awesome, pero evidentemente todo esto es modificable, pudiendo poner en la parte inicialmente visible texto, imágenes o cualquier otra cosa con los correspondientes ajustes de estilo.

Y como decía al principio lo mismo ocurre con el contenido; se puede poner el código de unos botones como en este ejemplo, pero también podemos insertar otro tipo de código, enlaces, galerías de imágenes, vídeos... En fin, que lo podemos simplificar o complicar lo que queramos.


Para ponerla tal cual veis aquí, el código necesario lo tenéis disponible en este Codepen, un enlace que os recomiendo como primer destino tras terminar de leer este post. Allí podréis hacer todo tipo de pruebas y vuestras propias modificaciones.


Para los que gusten ir a lo directo pues ya pueden empezar a tomar notas... pero pocas. Más bien preparados para montar todo en dos pasos: copiar y pegar. Lo que puse al final de la entrada es lo único que habría que insertar en la plantilla.

¿Dónde? Pues o bien justo a continuación de la línea <div class='post-header'> o bien tras la de <div class='post-footer'>, según queramos ponerlo al principio de cada entrada o en el pie de la misma.

Yo para que lo veáis en directo lo he puesto aquí en medio:

• 
  

• Tweet
  
• 
  
  
  

• 
  

• 
  

Por cierto que incluí algunos comentarios en la parte de estilo para facilitaros la tarea de la modificación.

<!-- Botonera social desplegable -->
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<ul class='acordeon'>
<li><h4><span class='fa fa-facebook'/></h4>
<div class='contenido'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=20&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px'/>
</div>
</li>
<li><h4><span class='fa fa-twitter'/></h4>
<div class='contenido'>
<a class='twitter-share-button' data-count='horizontal' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</li>
<li><h4><span class='fa fa-google-plus'/></h4>
<div class='contenido'>
<g:plusone size='medium'/><script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
</div>
</li>
<li><h4><span class='fa fa-pinterest'/></h4>
<div class='contenido'>
<a target='_blank' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet ' class='pin-it-button' count-layout='horizontal'><img alt='Pin It' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKY8nMa63uqNlD0MzYuoYzgpSLMk41fgg0Tv76qLFw1i6q3kPbk6N8MV3e_FqtkD3q_wgg_CkcwokQfQAEGn-_vLoLwWpx4ut4pl-Eczoq6Mdx06ryQxEj4l6rU4xs7Ix0yy7bTXnewMo/s1600/pin+it.gif' /></a>
<script type='text/javascript' src='//assets.pinterest.com/js/pinit.js'/>
</div>
</li>
<li><h4><span class='fa fa-linkedin'/></h4>
<div class='contenido'>
<script src='//platform.linkedin.com/in.js' type='text/javascript'>lang: es_ES1</script><script type='IN/Share'/>
</div>
</li>
</ul>
<style>/* Ajustes generales */
ul.acordeon * {
margin: 0 auto;
padding: 0;
vertical-align: top;
color: #fff;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Contenedor general */
ul.acordeon {
width: 90%; /* Personalizar sncho total desplegado */
overflow: hidden;
margin: 20px auto;
padding: 0;
text-align: center;
list-style: none;
font-size: 0;
}
/* Cada elemento */
ul.acordeon li {
display: inline-block;
*display: inline; zoom: 1; /* IE7 */
width: 12%; /* 90 : (nºelem+2) */
height: 50px; /* Personalizar altura*/
background: #ccc;
text-align: center;
border-right: 1px solid #eee;
}
/* Títulos pestañas */
ul.acordeon li h4 {
display: inline-block;
*display: inline; zoom: 1; /* IE7 */
width: 100%;
height: 100%;
padding: 10px;
font-size: 30px;
text-align: center;
}
/* Contenido inicialmente oculto */
ul.acordeon li .contenido {
display: inline-block;
*display: inline; zoom: 1; /* IE7 */
width: 0%;
height: 100%;
overflow: hidden;
font-size: 14px;
background: #333;
}
/* Hover: Desplegamos elemento */
ul.acordeon li:hover {
width: 36%; /* aprox 3 x ancho ul.acordeon li */
}
/* Hover: Hacemos que el título no ocupe todo el ancho */
ul.acordeon li:hover h4 {
width: 40%; /* Parte sobre el total que ocupara icono desplegado */
background: #333;
}
ul.acordeon li:hover h4 span {
color: #eee;
}
/* Hover: La diferencia hasta el 100% lo ocupará el contenido */
ul.acordeon li:hover .contenido {
width: 60%; /* 100 - ancho ul.acordeon li:hover h4 */
}
/* Ajuste vertical botones 'especiales' */
ul.acordeon li .contenido iframe[src*=&quot;twitter&quot;],
ul.acordeon li .contenido iframe[src*=&quot;facebook&quot;],
ul.acordeon li .contenido a[data-pin-href*=&quot;pinterest&quot;] {
display: inline-block !important;
margin: 10px auto !important;
vertical-align: top !important;
}
/* Ajuste para pantallas pequeñas */
@media (max-width:600px) {
ul.acordeon {width: 98%;}
ul.acordeon li:hover {width: 50%;}
ul.acordeon li h4 {font-size: 18px;}
ul.acordeon li:hover h4 {width: 25%;}
ul.acordeon li:hover .contenido {width: 75%;}
}</style>

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter