Barra flotante de marcadores de las principales Redes Sociales para Blogger.

Barra flotante de marcadores de las principales Redes Sociales para Blogger.

Este Gadget es para instalar una barra flotante con marcadores de las principales Redes Sociales en la Columna lateral del blog.

Tutoriales Blogger Kiradober os ofrece en esta oportunidad en un Gadget que nos creará una atractiva barra con los botones de las Redes Sociales en un costado lateral de nuestro blog, con lo que ahorramos espacio y será esteticamente del agrado de los visitantes.

La instalación es muy facil y rapida ya que se realiza en un Gadget / HTML/JavaScript: .

Nos vamos a Diseño

Añadir un Gadget

HTML/JavaScript:

En la ventana que aparece, pegamos lo siguiente:

<style>
#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px
0;z-index:10;}
#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='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div>
<br/><div style="clear: both;font-size: 9px;text-align:center;">
<a href="http://www.bloggingtipsnow.com/2012/02/floating-sharing-button-with-stumble.html" target="blank"><font color="black">[Get This]<font></font></font></a></div>
</div>

Guardamos.

Por defecto esta puesto a la derecha;

Para ponerlo a la parte izquierda, solamente cambiar lo que está en color Azul por la palabra;

Para ponerlo a la parte derecha, solamente cambiar lo que está en color Azul por la palabra;

right: Derecha

left: Izquierda