Resulta cada vez es más importante que nuestras entradas sean valoradas y compartidas en las redes sociales, así que para muchos mantener visibles los botones para compartir es indispensable.Y una buena forma de mostrar siempre los botones es hacerlos flotantes, de manera que el lector pueda seguir viéndolos aun cuando baje el scroll de la página.
Lo que hace este script de jQuery es que cuando un elemento, en este caso los botones, lleguen "al tope" de la página se quedarán flotando en una posición fija.
Puedes ver aquí mismo el resultado, baja el scroll de la página, y los botones que están a continuación se quedarán flotando. Si vuelves a la parte de arriba entonces los botones regresarán a su lugar.
Esta barra de botones la pondremos debajo del título de las entradas, la barra incluye los botones de Facebook, Twitter, Google+, Bitácoras, y Pinterest.
Lo primero es entrar en Plantilla | Edición de HTML y marcar la casilla Expandir plantillas de artilugios. Pegamos antes de el script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function() {
var $flotarbotones = $("#botonesflotantes"),
$window = $(window),
offset = $flotarbotones.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotarbotones.css({'position' : 'fixed', 'width' : '650px', 'top' : '0px'});
} else {
$flotarbotones.css({'position' : 'absolute', 'top' : 'auto'});
}
});
});
//]]>
</script>
Ahora antes de ]]> pegamos los estilos de la barra:
#botonesflotantes {
width: 650px; /* Ancho de la barra */
height: 18px;
padding: 8px 0 10px 0;
position: absolute;
background: #eee; /* Color de fondo */
border: 1px solid #E6E6E6; /* Borde */
border-radius:5px;
z-index: 99;
}
.botonesflotantes {
margin-left: 5px !important; /* Distancia de los botones desde la izquierda */
}
.botonesflotantes li {
float: left;
margin-left: 5px;
list-style:none;
}
Por último, debajo de <div class='post-header'> agrega el siguiente código:
<b:if cond='data:blog.pageType == "item"'>
<div style='padding:5px 0 35px 0;clear:both;'>
<div id='botonesflotantes'>
<ul class='botonesflotantes'>
<!-- Botón de Facebook -->
<li><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=100&height=25&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:25px;'/></li>
<!-- Botón de Twitter -->
<li><a class='twitter-share-button' data-lang='es' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li>
<!-- Botón de Google+ -->
<li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></li>
<!-- Botón de Bitácoras -->
<li><a expr:href='"http://bitacoras.com/anotaciones/" + data:post.url'><img alt='votar' expr:src='"http://widgets.bitacoras.com/votar/mini/" + data:post.url' style='vertical-align:middle;border:0;float:right; margin-left:0px;' title='Votar este artículo en Bitacoras.com'/></a></li>
<!-- Botón de Pinterest -->
<li><a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' style='margin:0 10px 5px 0;'>Pin It</a> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/></li>
</ul>
</div>
</div>
</b:if>
Si quieres que los botones estén al final de la entrada entonces el código anterior pégalo antes o después de <div class='post-footer'>
Verás que en el primer código aparece en color verde el ancho de la barra, y también aparece en los estilos, si cambias el tamaño deberás hacerlo en ambos. Toma en cuenta que son varios botones, por lo que no se recomienda hacerla más angosta, de lo contrario algunos botones se bajarán. En caso de que decidas hacerla más angosta entonces quizá sea necesario eliminar algún botón.
En el último código verás a cuál botón corresponde cada código, por si quisieras quitar alguno de ellos.
Si la barra quedara encimada al texto de las entradas entonces cambia el 35px por un valor más alto.
Los botones se verán únicamente al ingresar a las entradas individuales, de otra forma los botones se encimarían unos con otros al bajar la página.
En el último código verás a cuál botón corresponde cada código, por si quisieras quitar alguno de ellos.
Si la barra quedara encimada al texto de las entradas entonces cambia el 35px por un valor más alto.
Los botones se verán únicamente al ingresar a las entradas individuales, de otra forma los botones se encimarían unos con otros al bajar la página.
FUENTE:http://goo.gl/xjd2K
0 comentarios: