Cómo Instalar Botones de Subir y Bajar en Blogger

Como instalar opciones de botones Subir y Bajar dentro de blogger, los botones de Subir y Bajar son botones que sirven para dirigirse arriba o abajo dentro de una publicación en blogger, de una manera mas sencilla y rápida, el uso de estos botones son prácticos porque reemplaza al puntero del mouse. Esta es una forma de alentar a los usuarios a ver nuestro contenido fácilmente.

Los botones de Subir y Bajar  tienen un papel importante en paginas con mucho contenido. Sitios web que tienen mucha información en la página o simplemente para agregarle un detalle especial en nuestro sitio web, vamos aprender a como instalar los botones de subir y bajar en Blogger.

Se a modificado el post por contener códigos antiguos no compatibles con los navegadores modernos ahora es mas sencillo implementar el botón de subir y bajar les traemos en dos opciones para agregar en un gadget o instalarlo en el html de su plantilla blogger.

1º Primer código para instalar en un Gadget, abrir  Blogger / Diseño / Crear Gadget. En la barra lateral agregar el siguiente código y guardar. Listo ya tendría instalado el botón de subir y bajar automáticamente.

<!-- Botones Flotantes (Subir y Bajar) -->
<div class="scroll-nav">
  <button id="scrollTopBtn" title="Ir arriba" aria-label="Subir">
    <svg viewBox="0 0 24 24"><path d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
  </button>
  <button id="scrollBottomBtn" title="Ir abajo" aria-label="Bajar">
    <svg viewBox="0 0 24 24"><path d="M12 20l8-8h-5v-8h-6v8h-5z"/></svg>
  </button>
</div>

<!-- Estilos CSS -->
<style>
.scroll-nav {
  position: fixed;
  bottom: 25px;
  right: 25px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
}

.scroll-nav button {
  width: 42px;
  height: 42px;
  background-color: #000000;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s, transform 0.2s;
}

.scroll-nav button:hover {
  background-color: #bf0606; /* Mismo tono rojo que tu tabla */
  transform: scale(1.1);
}

.scroll-nav svg {
  width: 20px;
  height: 20px;
  fill: #ffffff;
}
</style>

<!-- Script para el desplazamiento -->
<script>
  document.getElementById('scrollTopBtn').addEventListener('click', function() {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });

  document.getElementById('scrollBottomBtn').addEventListener('click', function() {
    window.scrollTo({
      top: document.body.scrollHeight,
      behavior: 'smooth'
    });
  });
</script>

2º Segundo Codigo instalar en la plantilla, Abrir Blogger / Tema / Editar Html, buscas el código de cierre </body> pegar el siguiente código skript en la parte de arriba y guardar cambios. Listo ya tendría instalado el botón de subir y bajar en su blog.

<!-- BOTONES SUBIR Y BAJAR (BLOGGER) -->
<div class='scroll-nav'>
  <button id='scrollTopBtn' title='Ir arriba' type='button'>
    <svg viewBox='0 0 24 24'><path d='M12 4l-8 8h5v8h6v-8h5z'/></svg>
  </button>
  <button id='scrollBottomBtn' title='Ir abajo' type='button'>
    <svg viewBox='0 0 24 24'><path d='M12 20l8-8h-5v-8h-6v8h-5z'/></svg>
  </button>
</div>

<style type='text/css'>
.scroll-nav {
  position: fixed;
  bottom: 25px;
  right: 25px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
}

.scroll-nav button {
  width: 42px;
  height: 42px;
  background-color: #000000;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: background-color 0.3s, transform 0.2s;
  padding: 0;
}

.scroll-nav button:hover {
  background-color: #bf0606;
  transform: scale(1.1);
}

.scroll-nav svg {
  width: 20px;
  height: 20px;
  fill: #ffffff;
}
</style>

<script type='text/javascript'>
//<![CDATA[
document.addEventListener('DOMContentLoaded', function() {
  var btnUp = document.getElementById('scrollTopBtn');
  var btnDown = document.getElementById('scrollBottomBtn');

  if (btnUp) {
    btnUp.addEventListener('click', function() {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  }

  if (btnDown) {
    btnDown.addEventListener('click', function() {
      window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
    });
  }
});
//]]>
</script>
<!-- FIN BOTONES SUBIR Y BAJAR -->

• VER RESULTADO