Varios botones para volver a arriba (FREEBIES)

¡Hola a todas! Aquí estoy de nuevo con mucha ilusión, porque tras pasarme unas cuantas horas del día 12 trabajando, borrando y reintentándolo de nuevo, he logrado crear algunos botones up o de "subir" para compartir con vosotras, y si os gustan, para que los coloquéis en vuestros blogs; sería un auténtico honor para mí. He de admitir que la inspiración surgió a raíz de un antiguo post leído en el blog de Blanca, personalización de blogs, porque quería poner una flechita de ésas y tunear un poquillo mi rincón. De hecho, me descargué uno de los diseños y lo estuve usando por unos días, pero quería ir más lejos, y quise crear el mío.

Para crearlo recurrí a mi plataforma fetiche: www.canva.com, luego caí en la cuenta de la necesidad de eliminar el fondo y hacerlo transparente. Como en paint no supe hacerlo, he tenido que recurrir a un editor de imágenes online gratuito que se llama pixlr, uno de mis inseparables a partir de ahora. Para almancenar las imágenes he recurrido a un hosting gratuito llamado Tinypic, que me parece una auténtica maravilla. Os recomiendo vivamente los tres sitios.

El código HTML para la creación de estos botones, lo he aprendido en este vídeotutorial (la voz me ponía nerviosa, así que directamente me fui al enlace del blog y lo leí). Luego, lo de siempre: copiar y pegar. Por supuesto, como el enlace que facilita Tynipic añade una frase de código para derivar a su página y no me interesaba, lo he suprimido, puesto que además en el código del modelo, hecho en el tutorial, tampoco figuraba una frase similar.

La verdad es que inicialmente sólo iba a hacer un modelo, pero una vez en pixlr, metida en faena y viendo lo fácil que resultaba alterar los colores, mi impulso creativo se disparó y acabé haciendo 11 modelos diferentes (sólo comparto 10 de ellos). Admito que si se miran con detalle, el ribete en la parte superior presenta algún que otro fallo, pues al recortar la imagen con el editor se me ha ido un poco la mano y ya eran muchas intentonas fallidas. Como el primero de los diseños que os planteo hace de plantilla, ese mismo defecto se traslada al resto de botones propuestos. En alguno además, para destacar las letras, he querido intencionadamente, dejar en el centro de la "u" del "up" pequeño, en la parte inferior de la imagen, el color original del fondo. En fin, puede que no os parezca un trabajo muy profesional y lo entiendo, pero por otra parte, para llevar menos de un mes con esto de la edición de imágenes, y estar aprendiendo por mi cuenta a partir de tutoriales, etc... no considero que el resultado sea del todo malo. A ver si dentro de poco me confirman ya la admisión a un curso de edición digital en el que he hecho la prematrícula, a través de mi empresa, y pulo esos fallos. Al usarlo me dí cuenta de que había de reducir el tamaño de todos ellos, pero por unos días he usado el primero con su tamaño original. Ahora ya están a una medida adecuada todos ellos, y confío en que os gusten.



En fin, no me extiendo más. Vosotras mirad los diseños y juzgad si son suficientemente bonitos y apropiados para vuestros sitios. En caso de que decidiérais ponerlos en vuestro blog, ¿me haríais el enorme favor de compartirlo en vuestros sitios? Gracias de antemano.

Bueno, como sé que estáis impacientes, me dejo de preámbulos y continúo con los códigos que habréis de colocar en un nuevo gadget de código HTML para poder insertar el que más os guste y convenza, en vuestras bitácoras y darle uso. Os recomiendo que coloquéis el gadget al final, en vuestra disposición de gadgets del menú diseño (insisto en que siempre hago referencia al proceso a seguir en la plataforma de Blogger, pues otras ignoro cómo funcionan). Comienzo con los diseños de colores más intensos.




DISEÑO 1:



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



 DISEÑO 2:



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






 DISEÑO 3:



 <a href='#' style='display croll;position:fixed;bottom:5px;right:5px;' title='volver arriba'><img src="http://i58.tinypic.com/339u6o9.jpg" border="0" alt="Image and video hosting by TinyPic"></a>





DISEÑO 4:
 <a href='#' style='display croll;position:fixed;bottom:5px;right:5px;' title='volver arriba'><img src="http://i57.tinypic.com/dwzvy1.jpg" border="0" alt="Image and video hosting by TinyPic"></a>


 DISEÑO 5:


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





DISEÑO 6:

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







 DISEÑO 7:


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











 DISEÑO 8:


<a href='#' style='display croll;position:fixed;bottom:5px;right:5px;' title='volver arriba'><img src="http://i61.tinypic.com/20gefsk.jpg" border="0" alt="Image and video hosting by TinyPic"></a>





 DISEÑO 9:


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






DISEÑO 10:


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



Espero de corazón que os gusten y que aparte de colocarlos en vuestros blogs difundáis el enlace a este post. Un abrazo.
 




Image and video hosting by TinyPic













Os invito a que conozcáis mis otras aficiones en: www.mimundomiburbuja.blogspot.com

4 comentarios

  1. Respuestas
    1. ¡Qué pasada! ¡Qué subidón tenerte por aquí, Kumy! Eres una de las personas que menos esperaba encontrarme por aquí. Muuuuuuuuchas gracias de corazón. Un besazo.

      Eliminar
  2. Que buena tu explicación!!! La verdad es que yo estoy muy pez en el tema blogs. Quiero actualizarlo desde hace tiempo... a ver si me pongo a ello...he aprendido un montón de cosas con tu post. Besos.

    ResponderEliminar
    Respuestas
    1. Me alegra que te haya sido útil. Lo bueno es que como estoy empezando, puedo saber cuáles son las dificultades a las que cualquier novato como yo se enfrenta jeje. Anímate, mujer, lleva su tiempo remodelar el blog y yo lo voy haciendo muy poquito a poco, pero es una gozada ver los propios avances. Además un buen contenido siempre ganará seguidores si el envoltorio es bonito. Un besazo y muuuuuuuuchas gracias por visitar mi desván.

      Eliminar

Me encanta tenerte por aquí, desvanero. Es un placer conocer tu opinión. Si quieres que te visite, indícame el nombre de tu sitio, pero no me dejes el enlace, por favor. No quiero que Google me penalice. Gracias y un abrazo enoooooooorme.