Para poner estos botones flotantes para compartir usaremos un script muy corto de jQuery.
Lo primero es ingresar a Plantilla | Edición de HTML, marcar la casilla Expandir plantillas de artilugios y pegar antes de </head> lo siguiente:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/><script type='text/javascript'>// <![CDATA[$(function() {var offset = $("#BotonesFlotantes").offset();var topPadding = 15;$(window).scroll(function() {if ($(window).scrollTop() > offset.top) {$("#BotonesFlotantes").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});} else {$("#BotonesFlotantes").stop().animate({marginTop: 0});};});});// ]]></script><style>#BotonesFlotantes {position: absolute;left: -100px; /* Distancia desde la izquierda */border: 1px solid #FB5F55; /* Borde del contenedor */border-right: 0px;padding: 10px;background-color: #FFF; /* Color de fondo del contenedor */z-index:9;}#BotonesFlotantes div {margin: 10px 0;}</style>Luego buscamos esta línea:
<div class='post-header'>
Y debajo de ella pega lo siguiente:
<b:if cond='data:blog.pageType == "item"'><div id='BotonesFlotantes'><div><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'/></div>
<div><a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<div><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></div>
</div></b:if>
Guarda los cambios y listo.
En el primer código hemos puesto tanto el script como los estilos ya que ambos son muy breves. Ahí verás en color verde a qué corresponde cada área.
Donde dice /* Distancia desde la izquierda */ debes modificarlo hasta que quede a la distancia correcta según tu plantilla. Ahí mismo verás dónde cambiarle el borde y fondo del contenedor.
Estos botones se verán sólo en las entradas individuales, de otra forma no funcionarían.
Si quisieras agregar más botones entonces añádelos antes de </div> y cada uno encerrado entre <div> y </div>
Recuerda que este gadget usa jQuery, por lo que si ya tienes la última versión de jQuery no hace falta repetir el script. Y si usas Mootools o Scriptaculous debes aplicar unos cambios al script.
Sino te aparecieran, pon la /* Distancia desde la izquierda */ en 0px, si tampoco aparecen entonces el último código ponlo arriba de <data:post.body/>
En el primer código hemos puesto tanto el script como los estilos ya que ambos son muy breves. Ahí verás en color verde a qué corresponde cada área.
Donde dice /* Distancia desde la izquierda */ debes modificarlo hasta que quede a la distancia correcta según tu plantilla. Ahí mismo verás dónde cambiarle el borde y fondo del contenedor.
Estos botones se verán sólo en las entradas individuales, de otra forma no funcionarían.
Si quisieras agregar más botones entonces añádelos antes de </div> y cada uno encerrado entre <div> y </div>
Recuerda que este gadget usa jQuery, por lo que si ya tienes la última versión de jQuery no hace falta repetir el script. Y si usas Mootools o Scriptaculous debes aplicar unos cambios al script.
Sino te aparecieran, pon la /* Distancia desde la izquierda */ en 0px, si tampoco aparecen entonces el último código ponlo arriba de <data:post.body/>
fuente: http://goo.gl/JBPfy
No hay comentarios:
Publicar un comentario