Implementar un botón personalizado de subir en Blogger

¡Hola desvanero!:

¿Te apetece retocar un poco el aspecto de tu blog con un sencillo cambio que marque la diferencia? Pues, hoy te traigo la oportunidad de descargar cualquiera de estos diseños que he creado, para que decoren tu sitio y hagan más cómoda la visita a tus lectores.

Quizá mi propuesta te parezca un tanto inútil, pero créeme, este widget puede convertir tu sitio en un rincón más atractivo para tus visitantes y lo que es más importante: mejor valorado por Google. Seguro que has vivido en tus propias carnes. los problemas con la scroll de los navegadores. Es desesperante que empiece a hacer de las suyas y no te permita bajar o subir al principio de la página que estás visualizando. Y este botoncito puede ayudarte a resolver, en cierta medida, esos contratiempos, pues con él se regresa de inmediato a la parte alta del blog. Así que, como ves, no es un mero adorno.

Dicho esto, te dejo con la carpeta de descarga. Tienes dos versiones de cada modelo. Espero que alguno de ellos encaje con la estética de tu sitio y puedas implementarlo. Y no temas, si no sabes cómo has de proceder para colocarlo, pues también te explico lo básico sobre ello. Además, te dejo el enlace a una entrada anterior donde compartía contigo otros diseños. Puede que estos de hoy no encajen del todo con tu estilo y los de aquella ocasión sí. Si optas por los del 2014 (curioso la coincidencia de mes ^^), el código a añadir ya lo tienes incorporado bajo cada imagen.

Y bueno, te paso con la carpeta de descarga, ¿de  acuerdo?

¿Has escogido ya tu favorito? Pues ahora sólo has de seguir los siguientes pasos:

• Descargar el modelo que más te guste.
• Alojarlo en un hosting de imágenes. Yo uso tinypic.com (odio la publicidad tan invasiva que tiene, pero cumple con su función).
• Y ahora presta atención a este código y lo que puedes modificar en él, ¿de acuerdo?:

<a href='#' style='display croll;position:fixed;bottom:5px;right:5px;' title='volver arriba'><img src="https://i60.tinypic.com/2vn010k.png" border="0" alt="Image and video hosting by TinyPic"></a>

He divido en tres colores las "secciones" que lo componen para que sea más fácil para ti. Así que no te asustes. La morada es la que nos facilita nuestro banco de imágenes, así que es "inalterable" (en realidad se puede suprimir la descripción que es lo que corresponde a la parte de "alt=TEXTO", pero no lo recomiendo). Sea como sea, en esa zona del código se nos señala la dirección donde está alojada nuestra imagen. Cada vez que subes una a un sitio web se genera un código similar a éste. Esta parte no la tocaremos en absoluto, así que una tarea menos.

Las que nos interesan son las dos marcadas en verde, y que están relacionadas entre sí. La más extensa es la que podemos personalizar, y la última es la que cerraría la secuencia anterior.

¿QUÉ PUEDES PERSONALIZAR?

No te voy a explicar todo al completo, pero sí lo más relevante, ¿de acuerdo? Lo que sí puedes modificar es la distancia a la que quieres que esté ubicado tu botón, respecto a la parte inferior de tu pantalla (en el ejemplo: bottom:5px;) y lo mismo con la ubicación respecto a la derecha de la pantalla (right:5px;). Importante respetar el punto y coma en ambos y no poner espacio tras los dos puntos, si no el código no funcionará. También puedes modificar la parte del título. Quizá en vez de designarlo como 'volver arriba' prefieras identificarlo como botón subir, por ejemplo.

Fácil, ¿verdad? Como ves el lenguaje HTML no es tan complicado según para qué cosas je je. Te apetece instalarlo, ¿verdad? Pues nada más sencillo de hacer que eso. 

• Vete a Diseño ==> Añadir  un gadget ==> selecciona la opción HTML/Javascript, y pega en el recuadro principal de la nueva pantalla, el código completo de tu botón. Aceptar y listo.

Si has seguido mis indicaciones al pie de la letra, tu blog debería contar ya con un nuevo botón de subir, con un diseño de lo más chulo je je.

Como ves, la de hoy es una entrada de lo más breve, pero de cierta utilidad. Espero que te haya gustado.

Un besazo.