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:

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim4OuZbnuXadp2iC5mAWT7_gh_nFR9b8HPBcArXbOkILTTulbGYyQheCxbp63Ha_HkBJOn_Prs_I6lcGzNiKIgM3hTzAZYDQUEBtakJ5eJRM-YwSI_x-u3Siiv0djtJkBNHQgluNIrmjKP/s150/001.png"/></a></div>	<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXu8mPV0wOCleG1qlElGwGZ2IRAiVXxKMEV0_uH89iNwuKPkd-btZEOCUXQyOF5wPaamA5pxJRA4KouubTb7fLzEhJhxeZFE39O2nv-J0BwqZywIHiVf4OPZfBpa6Ot-rkYnUIXoh_Jk1p/s152/002.png"/></a></div>	<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGSsueSPVsrVodaJFP8U5iNo85ONlQ-LrwWwNg36K_IL0H7Mpqu-MYZuSPMRCFuk_gUszJOxHXFrqoIohrlHFoe6_cIIvi3DkVsxkBHx8tnUX1SOa5gRe3hWKwToTK0suG-Pbu-bjF2nze/s152/003.png"/></a></div>
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHbS3NXmQkPw11rf2rkprDzLdDsyAN1FFb0all8dhR17KHi1qBgBBdSe6xomzyZab7otnEeAQ9q5L9KZf0IlCiXFDPsMyOJqXttAq5HsEbQmErQYHYQ5LagGsxvwNIvkXnhhR0oWsdvq3D/s157/004.png"/></a></div>	<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzpgQ-yyqBhh47edT5Mlo0mX12NzaCz_2LSlPsUh-Z_JR1cAwF8idD0MC6WHn8_P1TqZd_b_b43O9ZP_Zdcne71ViuGv5iQUxDvw_W1mttdXCIsk8gCHjLycN-faCsjUmUy3a-FPk9BORq/s157/005.png"/></a></div>	<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0odqgsICFsN4nu0nQQak_NLJp8nSB8__u0Helr-MPRlTg1wLaZNc1BRCcfLsc3J7j2P2FiQGoFJWxDwBSzDnqhPKD88Z9xJWIhau0n_YsnAlG65HwQcNuPHFhmiqrEnycIPBSOWsViX4h/s157/006.png"/></a></div>
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizywO6Zh1_jAj5FuRA3aFLdWpWVoZmaJ_gldYTdPFWEYDGszRolfq2fzeC04JZaeZ7VCzgvX9pBx20Vl-V84ggo7nZqx0iQQMPZrfFqviPcFYIgliHaS1iUM0j-IwDttlkNjmGZAGigj44/s126/007.png"/></a></div>	<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilRaJvMZj5eckEdQJGs41Ax6X_AlV2aUrS-1U-QqWxxIYdA5X1ia2RE7RW76X_bsODdGzORWoktMbAddEv8TSyCEKsqaDVUqsHDpmod6olwmKmxnpYEHBIazPEsKWVc7G8nAgCbgEx4oVF/s126/008.png"/></a></div>	<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgjp3XEoF7fzmczbHRE2gfC1oIo1Q5cwdqOzkfqtKIC0N-juIaNJN65Nilvtc06Z6YISK-QdRbTbGbvyKHZWMD5q_6-H42hf7L-FGxfgyEYRV2dNfUGj8D87ytbDIdYU4u_so49EgWGnHP/s126/009.png"/></a></div>

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXu8mPV0wOCleG1qlElGwGZ2IRAiVXxKMEV0_uH89iNwuKPkd-btZEOCUXQyOF5wPaamA5pxJRA4KouubTb7fLzEhJhxeZFE39O2nv-J0BwqZywIHiVf4OPZfBpa6Ot-rkYnUIXoh_Jk1p/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 ♥