¿Te gusta esto?... Entonces que no se te olvide compartirlo ;)

¿C贸mo a帽adir un bot贸n ir arriba en Blogger?

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.

¿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 45x45 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铆.
Usamos cookies propias y de terceros que recogen datos sobre sus h谩bitos de navegaci贸n. Si contin煤a navegando se considerar谩 que acepta su uso. OK M谩s informaci贸n aqu铆