Ads 468x60px

martes, 20 de marzo de 2012

Botones para Compartir flotantes en tu Blog o Web




Usando CSS podemos poner elementos flotantes en nuestra web como indicamos en un artículo pasado. En esta oportunidad vamos a poner los botones compartir flotantes en nuestro blog.
Vamos a usar el servicio de Sharethis para nuestros botones compartir, lo usamos porque tendremos la capacidad de poner varios botones con unos simples códigos y sin problemas. También usaremos tablas para mantener alineados nuestros botones.



Para poner los botones compartir flotantes usamos:
Insertamos el siguiente código CSS en el “Head” (<head>*</head>) de nuestra web:
1
2
3
4
5
6
7
8
<style type='text/css'>
table#btnflotante{
position:fixed;
top:148px;
right:6px;
z-index:200;
}
</style>

Justo a continuación insertamos el siguiente código Javascript:
1
2
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js">
</script>
  • Si deseas que los botones salgan a la izquierda cambia right por left del css

Como ejemplo dejamos los botones de Facebook, Twitter y Google+ ya insertados en nuestro código:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table border='0' cellpadding='6' id='btnflotante'>
    <tbody>
        <tr>
            <td>
                <div class='st_plusone_vcount'>
                </div>
            </td>
        </tr>

        <tr>
            <td>
                <div class='st_facebook_vcount'>
                </div>
            </td>
        </tr>

        <tr>
            <td>
                <div class='st_twitter_vcount'>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Éste código deberás insertar en la sidebar o antes de </body> en nuestra web.

  • Debes de insertar los códigos de tus botones entre <tr><td> y </td></tr> y puedes repetir para para la cantidad de botones que deseas poner.

1 comentario:

  1. Hello! I've been reading your website for a while now and finally got the courage to go ahead and give you a shout out from Lubbock Tx! Just wanted to mention keep up the great job!
    My blog - how to make apps

    ResponderEliminar

Si No Tienes Cuenta en Ninguna de estas Plataformas,
Puedes Comentar Como Anónimo.
O tambien puedes poner tu Nombre/URL

Si publicas un comentario con mal vocabulario sera eliminado por el dueño del Blog.

Translate Blog

 

Sample Text





















AVISO
Hola "Bienvenidos" gracias por visitarnos aqui podras encontrar variedad en trucos para tu blog...