nuestras entradas, y muchos de ellos proveen un botón para compartir,
lamentablemente a veces tenemos que elegir sólo un par de ellos pues si
ponemos todos, (o la mayoría de ellos) entonces el blog se ve muy
saturado. Así que una opción es poder agruparlos en un contenedor que
esté invisible y accesible sólo cuando el lector haga click sobre él. De
esa forma podemos agregar los botones para compartir de habla hispana más importantes, como son Facebook, Twitter, Google+, Taringa y Bitácoras.
una burbuja (botón) al final de las entradas, y cuando el lector de cick
sobre él se abrirá con un efecto deslizante un contenedor que tendrá
dentro los botones de las principales redes sociales de habla hispana.
Este gadget para promocionar nuestros posts será visible sólo en las
entradas individuales.
<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("#msg-compartir").click(function(event) {
event.preventDefault();
jQuery("#btns-compartir").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 == "item"’>
<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=’"http://www.facebook.com/plugins/like.php?href="
+ data:post.url+
"&layout=box_count&show_faces=false&width=73&height=63&action=like&font=tahoma&colorscheme=light"’
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('script'),
s=document.getElementsByTagName('script')[0];x.async=true;x.src='http://widgets.itaringa.net/share.js';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=’"http://bitacoras.com/anotaciones/" +
data:post.url’><img alt=’votar’
expr:src=’"http://widgets.bitacoras.com/votar/normal/"
+ 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á.
Fuente: ciudadblogger.com
