Un botón ir arriba conocido también como scrolltop ayuda a que las personas no tengan que hacer scroll en su navegador para subir a la parte superior del blog después de que hayan bajado bastante. En este sentido el botón solo debe aparecer cuando las personas han bajado lo suficiente dentro del contenido del blog ya que no es necesario que dicho botón aparezca en la parte superior.
Los botones scrolltop son muy populares y en su mayoría se pueden encontrar en blogs diseñados en WordPress ya que es más fácil añadirlos allí por PHP, en mi caso yo tengo ocho blogs cinco de ellos están en WordPress y tres en Blogger, los que tengo en WordPress todos tienen estos botones ya que los incorpore rápidamente con un plugin sin la necesidad de tocar el archivo functions.php.
En Blogger este botón es necesario añadirlo con javascript usando librerías, en lo personal no me gusta hacer uso de librerías externas, pero he probado la velocidad de esta y es bastante buena por lo que supone que no habrá ningún problema y por tanto la velocidad del blog no se verá tan afectada, si acaso puede bajar uno o dos puntos la velocidad de carga según Pagespeed Insight de Google.
Contenidos del post:
¿Cómo añadir un botón ir arriba/ scrolltop en Blogger?
Bueno el procedimiento para añadir este botón en Blogger es sencillo por lo que no te perderás al hacerlo, además este botón funciona para cualquier plantilla clásica de Blogger, no sé si para las más recientes funcione ya que no lo he probado allí pero puede que también te sirva:
Primero que nada tienes que ir a “Tema”, creas una copia de seguridad de la plantilla de tu blog y después vas a “Editar HTML”
Luego busca la etiqueta de cierre </head> y antes de ella pega el siguiente código:
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’ type=’text/javascript’></script> (Este es el script que se encuentra en una librería externa).
Después debes buscar la etiqueta de cierre </body> y antes de ella debes pegar:
<div id=’Botonirarriba’>
<a href=’#IrArriba’><span/></a>
</div>
<script type=’text/javascript’>
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(“#Botonirarriba”).hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery(‘#Botonirarriba’).fadeIn();
} else {
jQuery(‘#Botonirarriba’).fadeOut();
}
});
jQuery(‘#Botonirarriba a’).click(function () {
jQuery(‘body,html’).animate({
scrollTop: 0
}, 800);
return false;
});
});
});
//]]>
</script>
(Este es el script interno que se ejecuta dentro del propio blog y permite el funcionamiento del botón)
Ya por último busca la etiqueta de cierre ]]></b:skin>, si editas los estilos por tu cuenta como hago yo en mi blog la etiqueta de cierre seria </style> y antes de ella pega los estilos del botón:
#Botonirarriba {
position: fixed;
bottom: 30px;
right: 30px;
}
#Botonirarriba span {
width: 45px;
height: 45px;
display: block;
background: url(URL de la imagen que preferiblemente sea de 45×45 píxeles como máximo) no-repeat center center; }
Recuerda que debes colocar entre los paréntesis la imagen que usaras y la misma no debe exceder los 45px de largo y ancho, en lo personal te recomiendo que en vez de elegir cualquier imagen uses la que yo tengo en el botón que se encuentra en mi blog:
#Botonirarriba {
position: fixed;
bottom: 30px;
right: 30px;
}
#Botonirarriba span {
width: 45px;
height: 45px;
display: block;
background: url(https://3.bp.blogspot.com/-j9nZtR9DgtE/XB-L0qyXPMI/AAAAAAAAJ3k/Wc2LS-lkO7EShcLMtcLuhcPP2yMqdAx_wCLcBGAs/s1600/boton-ir-arriba.png) no-repeat center center;
}
Por último das clic en “Guardar Tema”.
Es muy fácil incorporar un botón ir arriba en Blogger
Como te debiste de haber dado cuenta incorporar un botón ir arriba en Blogger es muy sencillo y no hay margen de error en esto, si no te llega a funcionar es porque no has seguido las instrucciones como debe ser y en tal caso tienes que repetir el proceso nuevamente. Si tienes algún error puedes restablecer tu plantilla, por eso mismo es importante hacer una copia de seguridad.
Agradecimientos especiales a Mónica Lemos
Le doy gracias a Mónica Lemos de Blogger Paso a Paso por crear la base para yo poder hacer este pequeño post, le cambie ciertas cosas para simplificar un poco más las líneas de código y añadir contenido diferente y de valor a esta entrada, así como también cambie la imagen que se usa para el botón, en caso de que quieras visitar su blog hazlo desde aquí.
