Estás en: » » Botones para compartir deslizantes (Facebook, Twitter, Google+, Taringa, Bitácoras)

Botones para compartir deslizantes (Facebook, Twitter, Google+, Taringa, Bitácoras)



El efecto deslizante lo haremos con jQuery, y la burbuja con el texto (el botón) lo haremos con CSS3.
Empecemos: primero ingresa en la Edición HTML de la plantilla, marca la casilla Expandir plantillas de artilugios, y antes de </head> pega el script:


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(function()
{
jQuery(&quot;#msg-compartir&quot;).click(function(event) {
event.preventDefault();
jQuery(&quot;#btns-compartir&quot;).slideToggle();
});
});
</script>




Ahora antes de ]]></b:skin> agrega los estilos:




/* Botones para compartir
----------------------------------------------- */
.msg-compartir {
width:140px; /* Ancho de la burbuja */
position:relative;
padding:10px;
margin:1em 0 3em;
text-align:center;
color:#000; /* Color del texto */
background:#F3961C; /* Color de fondo de la burbuja en navegadores que no soporten CSS3 */
/* Color de fondo gradiente de la burbuja */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(#f9d835, #f3961c);
background:-o-linear-gradient(#f9d835, #f3961c);
background:linear-gradient(#f9d835, #f3961c);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.msg-compartir::after {
content: "";
position: absolute;
bottom: -15px;
left: 67px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #F3961C transparent; /* Color de fondo del triángulo de la burbuja */
display: block;
width: 0;
}
.btns-compartir {
display: none;
margin-top:-10px;
background:#F2F2F2; /* Color de fondo del contenedor de los botones */
border:1px solid #D0C9AF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
margin-bottom:20px;
}



Por último, busca esta línea:


<div class='post-footer'>


Justo arriba de ella coloca el contenedor con los botones:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center><a href='#' id='msg-compartir' style='text-decoration:none'><p class='msg-compartir'>Comparte esta entrada</p></a></center>

<center>
<div class='btns-compartir' id='btns-compartir'>
<table border='0' cellpadding='7'>
<tr>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px;'/></td>

<td><a class='twitter-share-button' data-count='vertical' data-lang='es' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td>

<td><script type='text/javascript'>(function(){var x=document.createElement(&#39;script&#39;), s=document.getElementsByTagName(&#39;script&#39;)[0];x.async=true;x.src=&#39;http://widgets.itaringa.net/share.js&#39;;s.parentNode.insertBefore(x,s)})()</script>
<t:sharer data-layout='big'/></td>

<td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='tall'/></td>

<td><a expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url'><img alt='votar' expr:src='&quot;http://widgets.bitacoras.com/votar/normal/&quot; + data:post.url' style='vertical-align:middle;border:0;float:right; margin-left:10px;' title='Votar este artículo en Bitacoras.com'/></a></td>

</tr>
</table>
</div>
</center>
</b:if>



Guarda los cambios y listo. En las anotaciones en color verde he puesto como siempre las áreas que se pueden personalizar como el color de fondo, de texto, etc. En donde dice cellpadding='7' puedes controlar la distancia entre cada botón.

Recuerda que:

  • Sólo será visible en las entradas individuales, NO en la portada.
  • La burbuja está hecha con CSS3, así que si usas un navegador viejo como Internet Explorer 8 sólo verás un rectángulo.
  • En Internet Explorer el botón de Facebook no se verá bien, aunque sí funcionará.

ESCRITO POR Facundo
Me llamo Facundo, entre al mundo de los blogs hacia el año 2009. Soy estudiante de secundaria. Actualmente soy administrador de este blog en el cual publico cosas que me interesan.


Comparte esta entrada

votar
Lleva este gadget a tu blog
sábado, 29 de octubre de 2011 // Etiquetas: , , , , , , , // 5 comentarios //

5 comentarios :

  1. Coŋejo pestilente21 de enero de 2012, 15:18

    No tengo Facebook, twitter, google+, Bitacoras, Tumblr, etc hahaha, pero sinceramente y como diseñador, me gustan los botoncitos haha.

    Que tenga muy buen día.

    ResponderEliminar
  2. nico_11116@hotmail.com19 de febrero de 2012, 17:37

    Una consulta, si quiero que directamente aparezcan todos los botones a la vista, es decir,que no esten escondidos dentro de la burbuja. como tengo que hacer?

    ResponderEliminar
    Respuestas
    1. Facundo23 de febrero de 2012, 23:01

      Hola Nico , para hacer eso tenes que hacer lo mismo que esta en la entrada , solamente que en vez de pegar esto :

      ----------------------------------------------------------------


      /* Botones para compartir
      ----------------------------------------------- */
      .msg-compartir {
      width:140px; /* Ancho de la burbuja */
      position:relative;
      padding:10px;
      margin:1em 0 3em;
      text-align:center;
      color:#000; /* Color del texto */
      background:#F3961C; /* Color de fondo de la burbuja en navegadores que no soporten CSS3 */
      /* Color de fondo gradiente de la burbuja */
      background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
      background:-moz-linear-gradient(#f9d835, #f3961c);
      background:-o-linear-gradient(#f9d835, #f3961c);
      background:linear-gradient(#f9d835, #f3961c);
      -webkit-border-radius:10px;
      -moz-border-radius:10px;
      border-radius:10px;
      }
      .msg-compartir::after {
      content: "";
      position: absolute;
      bottom: -15px;
      left: 67px;
      border-width: 15px 15px 0;
      border-style: solid;
      border-color: #F3961C transparent; /* Color de fondo del triángulo de la burbuja */
      display: block;
      width: 0;
      }
      .btns-compartir {
      display: none;
      margin-top:-10px;
      background:#F2F2F2; /* Color de fondo del contenedor de los botones */
      border:1px solid #D0C9AF;
      -webkit-border-radius:8px;
      -moz-border-radius:8px;
      border-radius:8px;
      margin-bottom:20px;
      }

      ----------------------------------------------------------------


      vas a pegar esto :


      /* Botones para compartir
      ----------------------------------------------- */
      .btns-compartir {
      display: none;
      margin-top:-10px;
      background:#F2F2F2; /* Color de fondo del contenedor de los botones */
      border:1px solid #D0C9AF;
      -webkit-border-radius:8px;
      -moz-border-radius:8px;
      border-radius:8px;
      margin-bottom:20px;
      }

      Eliminar
  3. Berita20 de agosto de 2012, 20:33

    No puedo copiar los códigos. Me aparece tu dirección del blog. Me fijo si lo puedo solucionar de alguna forma. Saludos.

    ResponderEliminar



  • Dehumanized EP
Facebook SoundcloudTwitterYoutube

Escuchalo en vivo

Seguidores

Ultimos comentarios