sábado, 8 de febrero de 2014

Cómo crear botones para el Blog (y III)

Lo de los botones es un mundo, ya he dicho que buscando por Google, hay muchos blogs, y webs, que te ofrecen distintas soluciones. Voy a cabar, al menos de momento, con el tema, con dos alternativas más:
a) Crear tus propios botones
b) usar un menú desplegable (para incluir en él muchos enlaces)
Crear tus propios botones
Es relativamente sencillo crear tus propios botones, y usar esas imágenes para incrustar los enlaces, o scripts, que te apetezca.
Te voy a Ahora te explico cómo lo hago yo: 
Debo comentar, de entrada, que yo soy usuario de Linux (Debian) y por tanto los programas que menciono son los que uso en ese entorno, pero hay equivalentes en Windows).
Lo primero que hago es diseñar el botón, para lo que uso Impress, de LibreOffice (que es el equivalente al PowerPoint). Por poner un ejemplo, es muy fácil crear estos que presento aquí, (los creo ajustándolos a un tamaño de letra de unos 18 o 20 pt)
Lo segundo que hago es exportarlos 'como imagen'. Y además, en formato PNG, que me va a ser útil para lo que viene a continuación.
Ahora 'recorto' la imagen de un botón ('a lo bruto', sin afinar) y con algún editor de imágenes, la reduzco hasta una altura (height) entre 32 y 60 px y el ancho (weight) que, proporcionalmente, le corresponda. Así conseguiré que el tamaño del botón encaje bien en el Blog.
Solo queda hacer que la imagen tenga un fondo transparente (para que solo se vea el botón). Esto lo hago, con el Gimp (equivalente al Photoshop), de una manera muy sencilla: abro la imagen recortada con el Gimp y voy a Capa-Transparencia... 'Añadir canal alfa'
Ahora, con la herramienta 'Varita mágica', voy seleccionando las zonas blancas del fondo que quiero suprimir y, con Editar-Limpiar (o, simplemente, con la tecla Supr) las voy borrando. Verás que en esas zonas aparece unos cuadraditos grisáceos (señal de que es un fondo vacío)
Y lo que queda es exportar esa imagen como archivo PNG (importante que sea así, las imágenes JPG siempre salen con un fondo) y guardarla con el nombre que quiera... y ya tengo hecho mi botón, listo para usar, como decía aquí
Por cierto, recordar que el código a añadir para lanzar un script (como en de 'Imprimir', incrustado en un botón, y sin texto alguno, sería este:
<a href="javascript:window.print()"><img border="0" src="URL de la imagen" /></a>


Usar un Menu desplegable
Esta es una alternativa que encontré, en mis 'buceos' por Google, en el interesante (aunque sospecho que ya abandonada) web PazosBlogger.com.
Y es una solución muy elegante, y además muy sencilla de aplicar, para enlazar con algunas páginas, o webs, que te interese. Con cuantas quieras. Y sin ocupar excesivo espacio.
Tanto me gusta que la voy a adoptar para mis blogs. La puedes poner dentro de cada artículo que escribas (la forma más fácil, añadiéndola a la plantilla de las entradas).
El código es este:
 <form> <select NAME="links" onChange="top.location.href=this.form.links.options[this.form.links.selectedIndex].value">
<option SELECTED>Elije la sección o lugar deseado</option>
<option VALUE="URL del enlace">texto que quieres que aparezca</option>
(puedes repitir esta última línea cuantas veces quieras, cambiando los datos en verde)
</select>
</form>

También puedes añadirla como un gadget, a pie de las entradas, o donde quieras. Esto tiene la ventaja de que así aparecerá automáticamente en todas, y es muy fácil editar y modificar, o añadir, cosas (el inconveniente es que, así, me parece que queda un poco demasiado 'a desmano')
(En este caso, hay que crear un gadget, donde quieras, con Diseño-Añadir un gadget, añadir el que se llama 'HTML/JavaScript' y, ponle un nombre (por ejemplo ¿Y ahora donde quieres ir...?) y añadir el código de arriba.

Así que... te toca experimentar...


¿Quieres imprimir este artículo? ¿O guardarlo en PDF?


Y ahora... ¿Donde quieres ir...?

Etiquetas:

0 comentarios:

Publicar un comentario

Nota: solo los miembros de este blog pueden publicar comentarios.

Suscribirse a Enviar comentarios [Atom]

<< Inicio