0
You have 0 items in your cart
volver arriba en blogger

Como poner un botón para volver arriba en blogger

Hay pequeños detalles que marcan la diferencia en un blog, uno de ellos puede ser el botón para volver a la parte superior del blog, si tienes un blog que es muy largo por culpa del scroll tus lectores al terminar el artículo seguro que echan en falta o algunos links cercanos para navegar y ver otra página o poder volver a la parte superior, también facilita el acceso rápido a la barra de menús.

Si tu blog es de wordpress he realizado otro tutorial para wordpress:

Botón para volver arriba en wordpress con código o con plugin

El botón de subida a la parte superior es el ascensor de tu blog, para hacerlo te basta un poco de código y harás que gane unos puntitos de usabilidad para tus lectores.

Como casi todo en blogger lo vas a tener que hacer a mano así que manos a la obra!.

Para colocar tu botón de subida en blogger debes ir a plantilla opciones avanzadas y en css escribir este código,como siempre te recomiendo tener en cuenta estas 2 recomendaciones para que no te tires de los pelos:

6-Consejos-para-cambiar

5-editores-de-texto

.back-to-top {
    display:none;
    position: fixed;
    bottom: 2em;
    right: 0px;
    text-decoration: none;
    color: #000000;
    background-color: rgba(235, 235, 235, 0.80);
    font-size: 12px;
    padding: 1em;
   
}

.back-to-top:hover {    
    background-color: rgba(135, 135, 135, 0.50);
    text-decoration:none;
    color:#ffffff;
}

 

En blogger debes añadir esto en la plantilla html después de la etiqueta <head> esto es para incluir la libreria que Jquery, si ya hay un script igual no lo pongas, pero normalmente no hace falta, pero si no la tienes ponla.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Añade en la plantilla html el siguiente código antes de cerrar la etiqueta body </body>

<a href="#" class="back-to-top">Subir</a>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});

jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

 

Esta es la manera de poner un subir, puedes poner también una imagen especificando la ruta para que quede mas bonito.

Así poco a poco si ya has hecho algunos tutoriales vas viendo que tu blog es otra cosa, espero que empieces a notar cambios, en este caso este simple cambio de colocar un boton que vuelve a la parte superior de la página en blogger hace mucho mas cómoda la visita, además si os ocurre como a mí que acabo haciendo un metro de post y los widgets de la barra lateral estan muy arriba, lo mas fácil es que mi visitante diga… vaya me han dejado solo y abandone la página, debemos intentar que al menos cuándo entran vean dos o tres páginas para darle mas relevancia al blog.

boton para subir arriba

 

0/5 (0 Reviews)
3 Responses
  1. Hola: he probado tus sugerencias pero parece ser que en Vistas Dinámicas no funciona.
    ¿Conoces alguna manera de poder colocar el botón «ir arriba» pero que funcione en las entradas?
    Gracias anticipadas.

  2. NURIA FELIX MOMPRADE

    Buenos días:
    Tengo un blog «laesquinadenuria.blogspot.com» en el cual poco a poco y través de tutoriales como este, lo voy dejando como a mi me gusta, pero me falta bastante. Una de las cosas que me gustaría hacer es cambiarlo a vistas dinámicas., ¿Hay tutoriales para crear por ejemplo cambiar la cabecera o algún otro elemento?¿Son recomendables las vistas dinámicas?
    Muchas gracias por todo

    1. Ay Nuria no te recomiendo las vistas dinámicas porque esas plantillas son del año 2010 y dan problemas en el resto de navegadores, además el usuario no las suele tocar así que es mejor que pongas una plantilla normal, sencilla que siempre será más favorable al SEO que esas que hacen lento al blog.
      El problema para los tutoriales es que cada plantilla es de su padre y de su madre y no a todo el mundo le queda igual, quiero a ver si saco tiempo hacer una instalación completa de una de las plantillas gratuitas, creoq ue elegiré minimal que es la que más gusta para que os hagáis una idea de como se trabajan.
      Un saludo

Leave a Reply

Pin It on Pinterest

Share This