Ir al contenido principal

Como poner botones para compartir deslizantes en tu blog o sitio Web

Como poner botones para compartir deslizantes en tu blog o sitio Web

Buenas amigos lectores hoy les enseñare como poner botones para compartir de las redes sociales mas conocidas los cuales tendrán una función  deslizantes lo positivo de esta función es que no satura nuestro blog ya que estos se deslizan y el lector tendrá una vista mas agradable.

Lo que haremos es mostrar una burbuja como la que vemos en la imagen de arriba para que cuando el usuario decida compartir la entrada solo tenga que hacerle clic sobre ella esto hará que aparezcan los botones de redes sociales.

para introducirlos seguiremos los siguientes pasos:

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. 
Lo que esta en color verde los pueden modificar para que lo personalicen a su gusto.

Datos de los Botones:
  • 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á.
Cualquir duda comentar:


Comentarios

Entradas más populares de este blog

El poder de la compasión y el pensar en los demás

El ser humano es mas allá de su cuerpo físico, es un conjunto de emociones, sentimientos, valores y uno de lo mas importante es la compasión, pero ahora se preguntaran que la compasión o como se si yo soy compasivo pues este es una actitud bondadosa, de amor y respeto hacia los demás y hacia uno mismo, dicha actitud consta de la capacidad de reconocer lo que siente otra persona, ser sensible a su experiencia junto con la intención de aliviar el sufrimiento ajeno y procurar bienestar. Primero que todo es que las personas sepan que la compasión no es sentir pena o lastima por otras personas, muchas lo confunden y esto ocasiona que se genere un rechazo de la otra persona ya que ellos sienten que ese individuo que siente compasión por ella tiende a ser superior y no es así; bien pero ahora nos preguntamos como la practicamos o como cultivamos la compasión en mi, esta practica se esta llevando a cabo en muchas terapias y programas médicos y psicológicos y es por que gracias a ella ...

Instagram se esta comiendo a Facebook

Mark Zuckerberg es el creador de Facebook una red social que se convirtió en la más popular de la historia de la tecnología, pero en el año 2012 adquirió una nueva plataforma llamada Instagram por la cual pagó 1000 millones de dólares y que en el principio parecía una locura ya que esta contaba solo con 30 millones de usuarios, pero al día de hoy nadie duda en el enorme poder que tiene esta plataforma. Inicialmente el objetivo era que esta nueva red social  fuera independiente de Facebook y así se a logrado que sea y es tanto así que se ha expresado que Instagram se está comiendo a su hermana mayor Facebook ya que mientras los usuarios de esta comienza a decaer la app de fotografía florece cada día, y es tanto así que estudios recientes indican que para el año 2020 Instagram vencerá a Facebook en números de usuarios.  Entre las principales razones por la que Instagram esta superando a Facebook en primer lugar es que esta plataforma es disponible solo para móviles y ...

Parejas Liberales relaciones que salen de la rutina

Las relaciones de pareja son complicadas de llevar y los motivos son diversos y unos influyen más que otros, desde las rutinas y las infidelidades son las más comunes y las que más daño hacen ya que no todas las parejas logran superar estos problemas, pero por tal motivo se originaron las parejas liberales. Las parejas liberales no poseen un concepto definido muchas veces es depende de cómo la pareja lo tome o la definición que ellos les den, porque para uno pueden son relaciones donde cada uno no viven juntos mantienen su independencia del hogar, pero para otros una pareja liberal es aquella que tiene la libertad de relaciones sexuales con una persona diferente a su compañero o compañera y esta actividad se le denominada intercambio de parejas, y las personas que se encuentran en una relación con este tipo de libertad abogan que son más felices que las personas que se encuentran en una relación convencional, y esto es motivado a que no existen los celos, el intercambio de...