Revista Blog

Botones dinámicos flotantes para socializar

Por Aizum Blog @aizumblog

descripción
Las redes sociales son un gran recurso que han tomado una gran importancia para generar tráfico de calidad a tu blog o página web. Para ello, debemos de ser muy activos y poseer cuentas presenciales, en las redes sociales. Cuantos más fans y seguidores obtengas, más tráfico producirás hacia tu sitio. Es muy importante, que el contenido específico de tu blog, sea de la mejor calidad posible.
El diseño también toma mucha relevancia a la hora de obtener más seguidores y la velocidad de carga, entre otros muchos elementos. Aunque no soy un experto para dar consejos sobre está cuestión. El motivo de está entrada es para añadir unos botones para que tus lectores o usuarios de tu blog o web, puedan hacerse fan o seguidor fácilmente mediante unos iconos, que al hacer click, el lector pueda hacerse seguidor, y para aumentar el gentío que siguen tu blog o web. Para ver una demostración haz click a continuación o seguidamente en el botón de la demo!
Demo botones flotantes!
Sí te gustan los botones dinámicos flotantes para socializar y que se posicionan en la parte izquierda del blog demostración, y qué acabas de ver, y que bajan mediante bajas con el scroll, de la pantalla. Pues bien, añade lo en Blogger, de la siguiente manera que te voy a explicar a continuación, ya verás que es muy sencillo, enjoy:
Botones dinámicos flotantes para socializar

Demostración del gadget social en modo de imagen

  1. Ves a Blogger 
  2. Ingresa en plantilla
  3. Ahora en Editar Html
  4. Y busca con Ctrl+F la etiqueta </head>
  5. Y antes de dicha etiqueta, es decir; </head>
  6. Copia y pega el siguiente Script.
  7. Nota: Si ya tienes jQuery no vuelvas a implantar, es la primera línea.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js'/>
/* Botones dinámicos flotantes para socializar en www.aizumblog.com */
<script language='javascript'> 
var name = "#floatMenu";
var menuYloc = null;
$(document).ready(function(){menuYloc = 
parseInt($(name).css("top").substring(0,$(name).css 
("top").indexOf("px")))
$(window).scroll(function () { offset = menuYloc+$(document).scrollTop()+"px";$(name).animate({top:offset},{duration:1000,queue:false});});}); 
</script>
<style>
#floatMenu {
position:absolute;top:150px;float:left;width:45px;}
#floatMenu ul {list-style: none;}
#floatMenu ul li a {-webkit-transform:scale(0.6);-moz-transform:scale(0.6);-o-transform:scale(0.6);-webkit-transition-duration: 0.5s;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;opacity: 0.8;}
#floatMenu ul li a:hover {-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);opacity: 1;}
</style>
  1. Ahora busca con Ctrl+F la etiqueta </body>
  2. Y antes de dicha etiqueta es decir; </body>
  3. Copia y pega el siguiente HTML
  4. Y finalmente remplaza todas las # por las URL de tus redes sociales.
<div id='floatMenu'>
<ul>
<li><a href='#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/-Ubv5ytQgQKg/Usn0tyimlXI/AAAAAAAASQk/0L5LRFSYd6U/s1600/1388988382_facebook.png' style='margin-bottom: 3px;' title='Hazte fan en  Facebook'/></a></li>
<li><a href='#' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-Yr0j6-NAtBA/Usn0vD_vr6I/AAAAAAAASQs/_pi_1noeE4U/s1600/1388988391_twitter.png' style='margin-bottom: 3px;' title='Sígueme en Twitter'/></a></li>
<li><a href='#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/-GZlmTdhTk4g/Usn3ZqvHG9I/AAAAAAAASRI/uP5YpEc7Wz0/s1600/1388988419_pinterest.png' style='margin-bottom: 3px;' title='Sígueme en Pinterest'/></a></li>
<li><a href='#' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-mYcsvizaxOY/Usn0wBJTqfI/AAAAAAAASQ0/i78CCya4drw/s1600/1388988397_google-plus.png' style='margin-bottom: 3px;' title='Añadir a circulo'/></a></li>
</ul></div>

Volver a la Portada de Logo Paperblog