Botones sociales en vertical para Blogger


Todos los blogs necesitan de botones sociales para compatir los posts, además de ayudar en el SEO de tu blog e incrementar el tráfico. Si utilizas Blogger, hay una forma muy sencilla de añadir los botones verticales.

Sigue estos pasos:

  1. Entra en tu blog
  2. Ve a Diseño
  3. Añade un nuevo gadget HTML/Java Script
  4. Copia el siguiente código 
  5.    
    <style>
    
    #pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid #000000; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#ffffff;padding:0 0 2px 0;z-index:10; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);}
    
    #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
    
    .fb_share_count_top {width:48px !important;}
    
    .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
    
    .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
    
    .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
    
    </style>
    
    <div id='pageshare' title="Share This With Your Friends">
    
    <div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
    
    <div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
    
    <div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
    
    <div class='floatbutton' id='linkedin'>
    
    <script type="text/javascript" src="http://platform.linkedin.com/in.js"></script>
    
    <script type="in/share" data-counter="top"></script>
    
    </div>
    
    <!–sidebar floating share buttons code end–></!–sidebar></div> 
     


  6. Guárdalo sin nombre para que no aparezca vacío. 
Los botones aparecerán en la parte izquierda de la página. Puedes personalizar los colores para que estén acorde con los de tu blog.

No hay comentarios:

Publicar un comentario