nstalar boton subir blogger

Instalar botón subir / up personalizado Tutorial Blogger

colocar-instalar-boton-subir-blogger

Después de diseñar nuestro botón o escogerlo, lo siguiente es colocarlo en nuestra plantilla para que se pueda usar en nuestro blog ese diseño tan chulo que hemos escogido.  

Resulta que existen varias opciones de acción en cuestión al botón de subir puesto que podemos instalarla en plan sencillo: que se vea todo el rato el botón y que suba instantáneamente, o podemos instalarlo de manera que aparezca y desaparezca cuando se necesita realmente. Esta última opción es la que he elegido porque me parece la más completa y adecuada.  

Además podemos elegir entre que haga efecto scroll, de pasar la página, o que suba de forma inmediata, pero he elegido la de scroll porque creo que le da un efecto más chulo.  

Así que sobre estas elecciones nos vamos a guiar. No te lío más y vamos allá.

 En primer lugar vamos a pegar en un bloc de notas de nuestro PC, o en un word o writer, el siguiente código, para personalizarlo con nuestro botón:

/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}
#IrArriba span {
width: 100px; /* Ancho del botón */
height: 100px; /* Alto del botón */
display: block;
background: url(URL de nuestra imagen) no-repeat center center;
}

 Vamos a cambiar lo que he marcado en azul por la dirección de imagen de nuestro botón, (si no sabes cómo mira este vídeo)

Una vez que lo tengamos preparado vamos a nuestro blog:

  •  Tema
  • Copia de seguridad
  • Editar HTML
  • Buscamos en nuestra plantilla (si no sabes cómo mira este vídeo) este código:
</head>

 y justo antes pegamos este código:

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

Este código , si no has seguido este curso desde el principio, puede que ya lo tengas, y si es así no debes volver a pegarlo. Busca googleapis.com y si no te aparece entonces sí que tienes que introducirlo de la manera que anteriormente te he expuesto.    Luego buscamos este otro código:  

</b:skin>

 y justo antes de ]]></b:skin> pegamos el siguiente código de estilo CSS:

/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}
#IrArriba span {
width: 100px; /* Ancho del botón */
height: 100px; /* Alto del botón */
display: block;
background: url(https://1.bp.blogspot.com/-SzjXddIYKpE/V1UnWXFmzXI/AAAAAAAAAEg/ZVQd42SCDGA-44M_k2AxWZPniygkuc93QCLcB/s1600/boton-subir.blog-pruebas.png) no-repeat center center;
}

 Lo siguiente es otra vez buscar en plantilla este otro código:  

</body>

 y justo antes pegamos el siguiente código:

 <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>

 Guardamos Plantilla y vemos Blog para ver los resultados.    

Vídeo tutorial instalar botón subir en Blogger

  Así de fácil y sencillo habremos conseguido nuestro botón personalizado para subir con efecto scroll y aparece/desaparece.     

¿Qué te ha parecido?¿Algún problema? Cuéntamelo en los comentarios y buscaremos una solución

Comparte

CONSIGUE

LA VIDA QUE DESEAS

GRACIAS A UN NEGOCIO ONLINE RENTABLE

Disfruta de mi curso gratuito “Cómo tener un Negocio Online Rentable no solo económicamente”, en el que comparto las áreas más importantes a trabajar para conseguir la vida que deseas con tu Emprendimiento Online.

Interacciones con los lectores

39 comentarios

  1. María Coll (Cazadores de Libros)

    ¡Holaaaa!
    En primer lugar gracias por el tutorial^^ Me salió todo perfecto, pero quería ponerle un título con (title='subir'), para que al poner el ratón encima apareciera, pero lo intentado en todos lados y no me sale D: ¿Podrías ayudarme con eso, por favor? ¡Gracias!

    En el blog que lo estoy haciendo es este, http://pruebaskrazybookobsession.blogspot.com.es/ , es el de pruebas que estoy comenzando de cero para un nuevo diseño 🙂

    Besos^^

    • Mónica Lemos

      Hola María!!! Vaya, qué sorpresa, tu blog de pruebas tiene mucho trabajo! enhorabuena!! sigue así! 😉

      Para conseguir lo que quieres basta con añadir title='Subir' después de <a href='#Arriba' y te quedaría tal que así:

      < a href='#Arriba' title='Subir'

      Lo pruebas y me dices.
      Un besazo! 🙂

    • María Coll (Cazadores de Libros)

      ¡Hola Mónica!
      Nada, no hay manera D: Digo, ahora sí que me sale pero me sale arriba de la imagen y tal cual (title='subir') y no solamente al pasar el ratón por encima D:
      Igual como no da error que simplemente sale como quiere, lo he dejado para que puedas verlo, cosa que te agradecería a ver si me puedes decir donde está el error.

      Muchas gracias!!!
      La verdad es que muchas cositas las he aprendido por aquí, así que enhorabuena también para ti, jeje

      Besos!!

    • Mónica Lemos

      María, he visto que has puesto el código title='Subir' después de esta pestaña de cierre de código > y no es así, es antes de ella. Ponlo tal como te he comentado en el comentario anterior y luego pon > esa etiqueta de cierre, y ya lo tendrás, estoy segura, no puede darte error 🙂

      Si vuelves a tener problemas envíame un e-mail y abriremos expediente equis, jajaja, Muack!!! Estoy encantada de ayudar!!

    • María Coll (Cazadores de Libros)

      Ay Dios pero que burrita soy! /_. jajaja Tenías toda la razón, yo lo había colocado así, pero ya me fijé bien y lo rectifiqué y ahora sale todo correcto, vamos a dejar el expediente x para otro momento que conociéndome seguro que logro abrirlo y todo! jejeje

      Muchas gracias por tu ayuda guapísima!!!
      Besos^^

    • Mónica Lemos

      Hola Cam,
      qué extraño… Te recomiendo que elimines todo lo que has añadido con respecto a este caso y que vuelvas a repetirlo paso a paso desde el principio.

      Cuida mucho las comillas y los códigos, si no se respetan no funcionará. A mi no me sale ninguna imagen, ni siquiera el código.

      Espero que se solucione! Un saludo!
      Muack!

  2. Cam M.

    Hola de nuevo Mónica, hice lo que dijiste y volví a repetir el procedimiento siendo cautelosa con los detalles de las comillas y eso pero aun así… sigue igual u.u

    Ayuda! Again!

  3. Samantha Garcia

    Hola monica me estan ayudando demasiado tus post, pero tengo un problemilla con este lo he insertado y todo pero solo esta ahi como imagen no me funciona como boton y he hecho todo como el video no se que hacer 🙁

    • Mónica Lemos

      Hola Samantha,

      lo siento mucho, qué rabia cuando algo no sale!! Pero te invito a repetir con cuidado el tutorial, paso a paso, ya que debe funcionar a la perfección. ¡No olvides ni un solo código, ni comas ni nada! 🙂

      Suerte y espero que realmente te funcione

  4. Pienso y coloreo

    Hola Mónica!

    Me llamo Miguel. He puesto el botón en mi blog de blogger y funciona a la las mil maravillas. Un millón de gracias.

    Te quería preguntar cómo podría poner otro botón igual en la parte de arriba de la página para bajar. Es decir, justo lo contrario, pero con el mismo efecto scroll y que aparezca y desaparezca a la vez que el otro.

    Gracias de antemano, porque he empezado con este nuevo blog hace unos días y todo esto es nuevo para mí. Te dejo la dirección de mi blog por si tienes un minutillo para echarle un vistazo y ver que te parece en cuanto a diseño y tal, que cuando uno empieza, cualquier consejo es bien recibido.

    http://www.piensoycoloreo.com

    Un saludo, y gracias por tu trabajo, que se nota que le dedicas mucho tiempo y esfuerzo,

    Miguel.

    • Mónica Lemos

      Hola Miguel,
      muchísimas gracias por tu comentario. He visto tu blog y está bastante bien! poco a poco encontrarás tu personalización.

      Pues con respecto al botón… probaría a cambiar "top" por "bottom" en el último código que os comento , y habría qeu cambiar el #irArriba en todos los códigos… Tendría que realizar otro tutorial. Pero sería básicamente eso. Si entiendes el significado de cada código css lo podrás hacer, cambiando en el último código el top por el bottom.

      Espero haberte ayudado , un saludo!

  5. Guillermo López Díaz

    Hola. He estado intentando seguir los pasos de tus tutoriales pero me resulta bastante difícil, ya que en mi blogger cambia el formato de ciertas cosas, por ejemplo, al intentar añadir el botón de subir, en httml no tengo la opción de buscar. ¿Qué podría hacer?

    Un saludo.

    • Mónica Lemos

      Hola Guillermo,

      en todas las plantillas si no son las básicas de blogger, cambian cosas… para buscar un código en tu plantilla tienes que hacer clic en el código de plantilla y luego pulsar CTRL + F y luego te sale una caja a la derecha arriba y es donde pegas el código para buscar. En mi canal de youtube tengo un tutorial para eso.

      No deberías tener ningún problema con este tutorial.

      Un saludo!

  6. Words of love

    Hola, he seguido todos los pasos y por más que lo intento no me sale nada. La verdad es que no estoy segura que estoy haciendo mal porque sigo todos los pasos del video y nada 🙁
    Te agradecería si me ayudaras a saber que estoy haciendo mal o que pasa con mi plantilla… ¡ay! 🙁
    Gracias por el tutorial, un abrazo.

  7. MJ RU1Z

    Hola, acabo de seguir todos los pasos del tutorial y, sí, ya lo he comprobado al menos dos veces, pero no me funciona correctamente. El botón está situado a la izquierda del blog y no aparece a medida que avanzamos bajando en el post. Se ve solo al acabar la página. Mi plantilla es la Emporio de blogger. Lo digo porque ya he intentado meterle cositas y he desistido porque no hay manera de que funcionen y he leído que es bastante pejiguera.

    El link es este por si quieres comprobarlo tú misma: https://arquitectizada.blogspot.com.es/

    Un saludo!

  8. barbara manzanares

    ¡hola, Mónica! Maravillosas clases, antes que nada, tengo un problemita, al buscar el codigo "body" no me aparece nada, como si no lo tuviera ¡No se que hacer! ¿Hice algo mal?
    Gracias de antemano. Saludos desde México.

  9. Staff Steff Interior Design

    Hola Mónica! He seguido muchos tutoriales tuyos para personalizar mi Blog. Y al final he encontrado lo que buscaba reflejar en el. No soy una experta en esto pero estoy aprendiendo mucho. Gracias por compartir todo lo que haces.
    Espero que le des el aprobado si lo visitas y si no, coméntame si quieres lo que cambiarías 😉

    En cuanto al tutorial del botón subir. Creo que me sale pixelado porque al crearlo en la aplicación que recomiendas, lo guardé en 1000x1000px y ahora al modificarlo se me despixela… Si no se puede cambiar el tamaño directamente en el html seguiré peleándome para intentar reducirlo sin despixelar jajaja

    Un saludo y gracias 😉
    Estefania.

  10. I DID IT

    no se si todavia respondes aqui. tengo una pregunta. hice la flecha, funciono perfecto. despues agregue un Slider Carrusel, que sea automatico con las ultimas entradas, y algo choca. cuando pongo el carrusel, mi flecha se ve todo el tiempo y no responde )no va para arriba cuando apreto). cuando saco el carrusel,mi flecha vuelve a funcionar.
    gracias!

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *