martes, 2 de agosto de 2011

Botones flotantes para compartir de Facebook Twitter y Buzz

El procedimiento es sumamente sencillo, sólo hay que entrar en Diseño | Edición de HTML, marcar la casilla Expandir plantillas de artilugios, y pegar antes de ]]></b:skin> lo siguiente:

table#RedesSociales{
position:fixed;
top:150px;
left:5px;
z-index:200;
}

Ahora busca esta línea:


<!-- clear for photos floats -->

Debajo de ella agrega este código:

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0' cellpadding='6' id='RedesSociales'><tbody>

<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=60&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:60px'/></td></tr>

<tr><td><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'/></td></tr>

<tr><td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></td></tr>

</tbody></table>
</b:if>

 Ese servirá para que se compartan las entradas individuales, así que no se verán en la portada, sólo ingresando a un post.

Pero si lo que quieres es compartir o que se recomiende la URL de tu blog y no las entradas, entonces en lugar de ese código, el que pondrías sería este:

<table border='0' cellpadding='6' id='RedesSociales'><tbody>

<tr><td>&lt;iframe allowTransparency=&#039;true&#039; frameborder=&#039;0&#039; scrolling=&#039;no&#039; src=&#039;http://www.facebook.com/plugins/like.php?href=http://nombre-de-mi-blog.blogspot.com&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=60&amp;action=like&amp;font=tahoma&amp;colorscheme=light&#039; style=&#039;border:none; overflow:hidden; width:73px; height:60px&#039;&gt;&lt;/iframe&gt;</td></tr>

<tr><td><a class='twitter-share-button' data-count='vertical' data-lang='es' data-text='Título del blog' data-url='http://nombre-de-mi-blog.blogspot.com' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td></tr>

<tr><td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone href='http://nombre-de-mi-blog.blogspot.com' size='tall'/></td></tr>

</tbody></table>


En ambos casos podemos cambiar la posición de los botones, eso se controla en el primer código.
top:150px; es la distancia que habrá desde arriba, con un valor más alto los botones se bajarán.
left:5px; es la distancia que tendrán desde al lado, left indica que estarán a la izquierda, si los quieres a la derecha cambia left por right

Resultado
 Esto aparecera en la parte izq de su blog, si le quieres agregar mas botones lo le añaden los codigos y listo

0 comentarios:

Publicar un comentario

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Best Buy Coupons