Botones flotantes de redes sociales

Hola! Os traigo un nuevo tutorial de blogger, que me habíais pedido hace tiempo... :P Os voy a enseñar cómo colocar en vuestras entradas un botón flotante (con las redes sociales de twitter, facebook y google plus) que se vaya desplazando a medida que subís o bajáis en la página. El botón es éste:

Para colocarlo haremos lo siguiente: 

• Iremos a Diseño/Edición HTML y antes de nada guardaremos una copia de nuestra plantilla (por si acaso!) y buscaremos la siguiente línea de código con ayuda de Ctrl+F:

<data:post.body/>

• Justo encima de esta línea vamos a pegar lo siguiente: 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='cajaflotante'>

<div class='boton'>
<a class='twitter-share-button' data-count='vertical' data-lang='es' data-via='NOMBRE-TWITTER' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </div>

<div class='boton'>
<div><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=53&amp;height=65&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;send=false&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:65px;'/></div> </div>

<div class='plusbutton'>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone expr:href='data:post.url' size='tall'/>
</div>

</div>
</b:if>

**NOTA: Si tienes twitter, hay que reemplazar lo que está en rojo por tu nombre de usuario. Como yo no tengo twitter, ni me interesa para nada, eliminé esa parte del código :) 

• Ahora vamos a buscar con Ctrl+F la siguiente línea: 

]]></b:skin>

• Justo encima de esto pegaremos el siguiente código:

#cajaflotante {
float: right;
margin-left: -92px;
background: #fff;
position: absolute;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px #C0C0C0;
-webkit-box-shadow: 5px 5px 5px #C0C0C0;
}
#cajaflotante .boton {
margin:0px auto;
padding: 5px;
}

#cajaflotante .plusbutton {
margin:0px auto;
padding:0 15px;
}

**NOTA:  Si no tienes el JQUERY instalado en tu blog, tal vez no te funcione el botón flotante. Para instalar el JQUERY sigue estos pasos: 

• Busca con Ctrl+F la siguiente línea: 

]]></b:skin>

• Justo después de esta pega el siguiente código: 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script>

• Ahora busca esta otra línea: 

</head>

• Encima de esta pega el código: 

<script type='text/javascript'>
$(document).ready(function() {
var $sidebar = $("#cajaflotante"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 65;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
</script>

Y por último guarda los cambios. Listo, ya tendrás el botón flotante de redes sociales en tu blog ;) Besos!! ^^

Posted in: tutoriales blogger