Tips para Blogger! Botón “Ir Arriba” + Tutorial

9:00:00 Princess Aleka 2 Comentarios

tuto0

Entre los consejos que me han dado mis compañeras bloggers, está el de añadir un botón para ir al principio de la página para así facilitar la navegación. Después de buscar maneras que me gustaran, conseguí un tutorial muy bueno en Ciudad Blogger. Todo el código que les comparto en esta entrada, les pertenece a ellos. Vamos a ver cómo se hace:

Paso 1: Inicia tu sesión en Blogger. Haz click en el apartado Plantilla y luego en el botón Editar HTML

tuto1

Paso 2: La interfaz de Blogger cambió un poco, así que ahora nos muestra el código HTML de nuestra plantilla en una cajita más grande. Haz click en ella, y luego presiona Ctrl+F para abrir el cuadrito de búsqueda (resaltado en la imagen)

tuto2

Paso 3: Este paso es el más importante: en el cuadro de búsqueda coloca lo siguiente:

</head>

Justo antes de esa línea, pega el siguiente código para agregar jQuery a tu plantilla:

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

Si esta línea ya estaba en tu plantilla, omite este paso para evitar errores de compatibilidad.

Paso 4: Ahora añadiremos los estilos. Busca lo siguiente:

]]></b:skin>

Y antes de esa línea, pega este código:

/* Botón Ir Arriba ----------------------------------------------- */

#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}

#IrArriba span {
width: 60px; /* Ancho del botón */
height: 60px; /* Alto del botón */
display: block;
background: url(http://lh5.googleusercontent.com/-luDGEoQ_WZE/T1Ak-gta5MI/AAAAAAAACPI/ojfEGiaNmGw/s60/flecha-arriba.png) no-repeat center center;
}

Paso 5: Después, busca esta etiqueta de cierre:

</body>

Y coloca esto antes de ella:

<div id='IrArriba'>
<a href='#Arriba'><span/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
// Botón para Ir Arriba
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#IrArriba").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#IrArriba').fadeIn();
} else {
jQuery('#IrArriba').fadeOut();
}
});
jQuery('#IrArriba a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
//]]>
</script>

Paso 6: Guarda los cambios al terminar

tuto3

Ahora ve a tu blog y prueba los cambios. El botón sólo aparecerá cuando bajes en la página y desaparecerá cuando vuelvas al tope. Espero que les sea útil este tutorial. Cualquier duda, no duden en dejarla en los comentarios. Mucha suerte,

Denise
Twitter

2 comentarios:

  1. mi niña esta genial el tutorial creo que te voy a dar acceso a mi blog para ver si le haces todo eso porque yo lo intento y no me sale pero bueno creo que volveré a intentar

    ResponderEliminar
  2. Ya este comentario es viejo, pero te lo digo una y mil veces: Tú puedes hacerlo. Sigue trabajando. Éxito.

    ResponderEliminar

Deja tu huella en este Universo

Populares de la semana