• Ir al contenido principal
  • Skip to secondary menu
  • Ir al pie de página
El Blog De Leonardo Muñoz

El Blog De Leonardo Muñoz

  • Home
  • Blog
  • Trading
    • Brokers de Forex
    • Brokers de Opciones Binarias
  • Ingresos Online
    • Afiliados Forex
    • Bitcoin
    • Compra y venta de dólares
    • Emprende en Internet
    • Google AdSense
    • Ingresos por Internet
    • Marketing Digital
    • Programas de afiliados
    • YouTube
  • Publicidad Digital
    • Bing Ads
    • Facebook Ads
    • Google Ads
    • Twitter Ads
  • Más
    • Actualizaciones del blog
    • Blogger
    • Crecimiento de mi canal de YouTube
    • Educación Financiera
    • Prevención del fraude
    • Procesadores de Pago
    • Recomendaciones tecnológicas
    • Redes Sociales
    • SEO
    • Sugerencias
    • WordPress
      • Dominios
      • Hosting WordPress
      • Tutorial
    • Donaciones
El Blog De Leonardo Muñoz > Blogger > ¿Cómo añadir un botón ir arriba en Blogger?

¿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 en Blogger?

Contenidos del post:

  • ¿Cómo añadir un botón ir arriba/ scrolltop en Blogger?
  • Es muy fácil incorporar un botón ir arriba en Blogger
  • Agradecimientos especiales a Mónica Lemos

¿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í.

También te puede interesar:
  • BTCClicks Review – Gana Bitcoins gratis en InternetBTCClicks Review – Gana Bitcoins gratis en Internet
  • Haz Trading con Opciones Binarias en IQ OptionHaz Trading con Opciones Binarias en IQ Option
  • Ubica apropiadamente los anuncios publicitarios en un blogUbica apropiadamente los anuncios publicitarios en un blog
  • Protege tu blog contra el spamProtege tu blog contra el spam

Mi nombre es Leonardo Muñoz y soy el autor de este blog, me gusta todo lo relacionado al marketing digital y por esa misma razón me motivo a escribir publicaciones por aquí para lectores como tú que quieren aprender acerca de las posibles estrategias que pueden usar para aplicarlo y ganar dinero en Internet y también escribo de otros temas muy interesantes.

Sígueme en las redes sociales
Sígueme en FacebookSígueme en TwitterSígueme en YouTubeSígueme en Linkedin
Footer
Usamos cookies que recogen datos sobre sus hábitos de navegación. Si continúa navegando se considerará que acepta su uso.
Política de cookies +
Advertencia de riesgos: Producto difícil de comprender, la CNMV ha determinado que no es adecuado para los pequeños inversores, debido a la complejidad y alto riesgo que implica.

Advertencia para personas de la Unión Europea: Los CFDs son instrumentos complejos que conllevan un elevado riesgo de perder dinero rápidamente debido al apalancamiento. Entre el 74-89% de las cuentas de inversores minoristas pierden dinero al operar con CFDs. Es necesario que entienda el funcionamiento de los CFD y si se puede permitir asumir el alto riesgo de perder su dinero.

Copyright © 2017-2018: El Blog De Leonardo Muñoz
 
Consulte Nuestros Términos y Condiciones y Nuestra Política de Privacidad