Cómo insertar el Botón Subir en la Plantilla

noviembre 18, 2013

Cómo insertar el Botón Subir en la Plantilla


Hoy te traigo un tutorial sencillito.

Poner el Botón Subir Arriba en la plantilla de Blogger.

Últimamente Blogger me ha dado problemas para añadir nuevos gadgets HTML/Javascript y moverlos desde Diseño. Puede que sea debido a las actualizaciones que están incorporando pero claro, ¡me han pillado en plena "reforma"! Y necesitaba encontrar otra manera de hacer las cosas... así que... ¡directamente desde la plantilla HTML!

Es muy sencillo mover e incorporar nuevos elementos desde la plantilla, hoy vamos a ver como incorporar el botón subir en un minuto (bueno, puede que dos).

He diseñado varios Botones Subir para Blogger, puedes elegir el que más te guste, copiar el código que hay debajo y pasar al siguiente paso:


cuadrado azul

cuadrado rosa

cuadrado verde

corazón rosa

corazón verde

corazón azul

flecha azul

flecha verde

flecha rosa





Insertar Botón Subir en la Plantilla de Blogger


1.- Una vez hayamos copiado nuestro código, vamos a nuestra plantilla HTML.

2.- Pinchamos en cualquier parte de nuestro código y pulsamos simultáneamente Control + F para abrir el buscador interno.

3.- Escribimos </body> en la cajita del buscador y damos a Intro.

4.- Pegamos el código del botón escogido justo encima de </body>


5.- Comprobamos en Vista Previa que todo está bien y guardamos los cambios.

Puedes ver el resultado de implementarlo directamente en la plantilla en el siguiente blog:

Plantilla Baby Blog


Actualización:

NOTA importante: Si quieres usar tu propia imagen, solo tienes que cambiar esta parte del código original:

<style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop">
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" alt="arriba" title="Subir"><img width="85px" height="85px" style="border:0;" src="https://lh3.googleusercontent.com/-Q2rM8uO0-0E/UojJWOF6L8I/AAAAAAAALoQ/93FOMxN9an4/s152/002.png"/></a></div>

Poniendo la URL de tu imagen en la parte marcada en violeta. Y modificando los px de la parte en cursiva:

width: ancho de tu imagen
height: alto de tu imagen

RECUERDA: Debes subir tu imagen a internet, usando dropbox, Google Photos o una plataforma de almacenamiento de imágenes, y de manera pública, para que se vea perfectamente.



Es una forma bastante rápida y sencilla de hacerlo y así, evitamos llenar nuestro panel de Diseño con un montón de elementos diferentes. Aunque estos códigos también puedes añadirlos en Diseño como elemento HTML/Javascript y funcionarán igualmente.

¿Tu sueles usar el Botón Subir en tu blog? ¿Prefieres añadirlos en Diseño o en la plantilla HTML?







Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥






Te encantará:

11 pensamientos ¡falta el tuyo! ;)

  1. Me encanta tu blog, siempre encuentro cosas muy útiles
    Me gustan muchísimo todos los botones. Ya he utilizado uno :)
    Muchas gracias!

    ResponderEliminar
  2. Adoro tu blog!!!!!
    Acabo de descubrilo ayer y ya me enamoré, gracias a ti estoy armando mi blog.
    Saludos y Felicitaciones

    ResponderEliminar
    Respuestas
    1. ¡¡Muchas gracias!! Me alegra mucho saber que te es útil ;)

      ¡Feliz miércoles!

      Eliminar
  3. Muchas gracias,te acabo de conocer y me quedo por aqui...
    Acabo de usar un botón tuyo en mi blog.
    Besitos

    ResponderEliminar
  4. Hola Celia,
    Como siempre, eres un amor. Ya lo he puesto en mi blog. Yo directamente lo he copiado en una caja html y me ha funcionado genial.
    Besos guapa.

    ResponderEliminar
  5. aaaaaagggg!! me he peleado pero lo he conseguido! con los nuevos "up" que has puesto, subiendo la imagen a internet, compartiendola, copiando la url y haciendo más pequeña la imagen ... como he puesto en el blog: la vida es más sencilla gracias a "el perro de papel" :)

    ResponderEliminar
  6. Celia tengo una duda, estaba probando el "up" para subir arriba, y no funciona con el navegador firefox, me he metido desde el explorer y no hay problemas. Pensando que lo habia hecho mal he copiado una de las flechitas que tienes arriba y me pasa lo mismo, ¿tienes idea de porque puede ser?
    Muchas gracias de antemano y un saludo!

    ResponderEliminar
    Respuestas
    1. ¡Hola Sandra!

      Pues la verdad es que no lo sé, yo siempre uso Chrome ;)

      ¡Beso!

      Eliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.