viernes, 9 de septiembre de 2011

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!! ^^


Esta entrada es:

8 comentarios:

Buenas!!
Me pasa lo mismo, no sale nada???
Un saludo

Te falto poner que hay que expandir Artilugios!

Hola! EXCELENTE TUTORIAL!!
Me aparece el boton flotante a la mitad de la página (en medio)... ¿sabes por qué?
Saludos!!

como hago para poner em mi bloger un albun que se vea como precentacion ??

Publicar un comentario