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

.backtotop a:hover {background:none;}

cuadrado rosa

.backtotop a:hover {background:none;}

cuadrado verde

.backtotop a:hover {background:none;}

corazón rosa

.backtotop a:hover {background:none;}

corazón verde

.backtotop a:hover {background:none;}

corazón azul

.backtotop a:hover {background:none;}

flecha azul

.backtotop a:hover {background:none;}

flecha verde

.backtotop a:hover {background:none;}

flecha rosa

.backtotop a:hover {background:none;}

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

The following two tabs change content below.

Celia

Diseñadora, Mentora y Formadora Online at El Perro de Papel
Mamá y emprendedora a tiempo completo. Ayudo a otras mujeres y madres soñadoras a emprender un negocio online de éxito para conciliar su vida personal y profesional.Si este artículo te ha gustado, sigue aprendiendo conmigo en mi reto gratis de 14 días para conectar con tu mejor versión CLICK AQUÍ.Y AQUÍ tienes mi curso premium para mamás emprendedoras que quieren hacer realidad su idea genial, mano a mano, conmigo.¡Que tengas un feliz día, soñadora!

¿CANSADA DE TRABAJAR TANTAS HORAS SIN VER LOS RESULTADOS ESPERADOS?

Te regalo mi CURSO GRATIS DE 5 DÍAS para mamás emprendedoras que quieren conciliar su vida personal y profesional sin volverse locas ni renunciar a sus sueños.

¡Bienvenida! Ahora revisa tu correo ;)

Pin It on Pinterest

Share This