SLIDER

¡Hola!

Mónica Lemos
¡Hola! Soy Mónicay quiero que empieces a crear tu blog o tu canal de youtube sin complicaciones. Aquí descubrirás cómo.
TODO EL CONTENIDO

ES GRATUITO

Por ello no puedo crear contenido
con regularidad, de hecho tengo que dejarlo por el momento
Si quieres hacerme un regalo para agradecer todo el contenido gratuito de que puedes disfrutar gracias a mi esfuerzo puedes hacerlo aquí , quizás pueda seguir creando nuevo contenido útil. Gracias!

Suscríbete

¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.


Tutorial Blogger: Instalar boton subir / up personalizado C12-P2

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


Empezamos la clase

 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:

 Plantilla

 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='http://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



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




   

18 comentarios

  1. Buenas en el video tutorial pones que para poner el ultimo codigo buscamos body pero en el post escrito pusiste que busquemos head

    ResponderEliminar
    Respuestas
    1. Cierto Mari Villen!!! ;) En el vídeo está correcto!! y y alo he modificado en el post!! Muchísimas gracias por adevertirme!! Un abrazo!! y mil gracias!! :D

      Eliminar
  2. ¡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^^

    ResponderEliminar
    Respuestas
    1. 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! :)

      Eliminar
    2. ¡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!!

      Eliminar
    3. 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!!

      Eliminar
    4. 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^^

      Eliminar
  3. Hola! ¿Qué tal? Intente hacer lo de colocar el botön pero ¡No me aparece! es decir, si entras en mi blog y le das a esa esquina en blanco cuando bajas, este sube automaticamente pero la imagen no se ve :( ayuda!

    Si quieres verlo este es mi blog http://justxcam.blogspot.com/

    ResponderEliminar
    Respuestas
    1. 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!

      Eliminar
  4. 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!

    ResponderEliminar
    Respuestas
    1. Hola Cam,

      te envío e-mail y lo solucionamos ya!!
      Muack!! :)

      Eliminar
  5. 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 :(

    ResponderEliminar
    Respuestas
    1. 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

      Eliminar
  6. Hola amiga, tengo un problema, todo funciono, pero el boton no coincide perfectamente con el boton, es decir, el boton esta a un lado de la programacion de subida, mira por ti misma https://eltecnoandroid.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola majo,
      No sé qué ha podido ocurrir, te recomiendo volver a realizar el tutorial desde cero y paso a paso.

      No debe existir problema
      Un saludo!

      Eliminar
  7. Hola Monica!

    Wow es raro eso de ser el único hombre preguntando cosas, una duda, he hecho todo lo que pones en el tutorial pero no logro hacer subir la pagina, tengo todo hecho, pero, al momento de subir no sube =( me podrías ayudar? si quieres lo puedes mirar a ver si me puedes ayudar. https://a2rodblog.blogspot.com

    Muchas gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Armando! No eres el único ;)
      Te digo lo mismo que al anterior, repasa todo porque seguro que algún código está dando errores.

      Un saludo :)

      Eliminar
    2. Muchísimas gracias, lo había repasado muchas veces, pero por unión de planetas salió, solo tenía que dejarlo ir a su aire. Por cierto, increíbles tus posts y este curso es la caña!!!

      Eliminar

© Blogger Paso a Paso • Theme by Maira G. Adaptada por Mónica Lemos, autora de este blog.
Todas las imágenes son del banco de imágenes Unsplash.com o bien de mi propia autoría.
Si quieres puedes reclamar tu autoría - Contactar con la autora del blog.