Colocar botones flotantes de Facebook, Twitter y Google Plus en Blogger

Colocar botones flotantes de Facebook, Twitter y Google Plus en Blogger

Alberto Lozano 29 / julio / 2011 Blogger 1 comentario    0 visitas
Publicidad

Hace poco me mandaron un correo sobre que ya no he mencionado tutoriales para Blogger, es por eso que me encontré con este excelente tutorial para colocar los botones de las redes sociales más conocida y sobre todo la nueva red de Google.

Su función de estos botones es para compartir dicha información de los posts individuales, así que por lo mismo no se visualizaran en el inicio de su Blog, solo entrando a un post.

Bueno para empezar primero nos vamos a Diseño > Edición de HTML luego marcan la casilla de Expandir plantillas de artilugios y pegan el siguiente código antes de ]]></b:skin>

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

Ahora busca la siguiente línea:

<div style='clear: both;'/>

Y debajo de ella agrega el siguiente 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>

Guarda los cambios y eso será todo, ahora cuando ingresen desde el buscador o accedan a los posts individuales, aparecerán los botones para compartir.

Por si deseas cambiar la posición de los botones lo podrás hacer, enfocándote en el primer código:

top:150px; con un valor más alto los botones se bajarán y con un valor bajo subirán.
left:5px; es la distancia que tendrán desde al lado, “left” indica que se mostraran a la izquierda, y si los quieres a la derecha cambia el valor “left” por “right”.

Para darte una idea de como quedarían los botones, checa este Blog de pruebas de V-Junker.

Publicidad

1 Comentario en 'Colocar botones flotantes de Facebook, Twitter y Google Plus en Blogger'

  • agosto 13, 2011
    Raul:

    Hay alguna manera de poner en blogger los botones like y twitter en cada post? parecido a lo que tiene blogger por defecto, pero con una aparencia mas grande.

    Gracias!

    Responder

Deja tu comentario

  • Nombre:
    E-mail:
    URL: (opcional)