Creación de una UserBar Personalizada

En éste post vamos a ver cómo crear una Userbar de manera sencilla y fácil y sin tener que usar ninguna aplicación que tengamos que instalar o bajar a nuestro ordenador.

¿Qué es una Userbar?
Según el término en wikipedia: Las Userbars son imágenes usadas frecuentemente en las firmas de los foros de discusión con las que los usuarios muestran sus gustos y aficiones.
Por ejemplo, ésta de la propia wikipedia:

Podemos encontrar páginas donde buscar éstas userbars y así no tener que crearlas.Por ejemplo http://www.userbars.be/ en la que podemos encontrar algunas de las que fácilmente yo usaría, como éstas:

Incluso existen userbars en formato gif mostrando movimiento dentro de ellas:

Y en la mayoría de los casos éstas imagenes además poseerán un enlace que nos podrá llevar al sitio que eligamos, por ejemplo:

Google en Español

Hay veces que no encontramos la userBar que necesitamos o simplemente no nos gusta y queremos realizar una por nosotros mismos. Pues bie, vamos a aprender a Crear una UserBar.

Vamos a usar un servicio que he encontrado ésta misma tarde y es la razón para crear éste post.
La página en cuestión se llama: “Designer User Bars” y antes de ver la aplicación en sí nos aconsejan ver éste vídeo sobre su uso:

Observamos la vista de ésta aplicación:

Bien, vamos a comenzar a usarlo, yo para éste ejemplo realizaré una userBar para ésta misma página:

1 -Vamos a “Selected Logo Layer Editor” y hacemos click en el botón “Import Image from Url“, éste:

Aparecerá una ventana como ésta:

2 – En el campo “Logo Image URL” introduciremos la URL de la imagen sobre la que nos basaremos para hacer nuestra UserBar. Yo usaré ésta (la imagen de fondo de mi blog)

3 – Hacemos click en el botón “Import/Refresh” y la imagen pasará al apartado “Selection“.

4 – Podemos distinguir en éste apartado lo que será nuestra UserBar, y podremos modificar el tamaño y proporciones de la imagen desplazando la esquina inferior derecha de la imagen (un punto azul). Una vez que lo tengamos donde queremos (yo lo he dejado como en la imagen anterior) haremos click en el botón de abajo del todo llamado “Commit Selection To Current Userbar Logo layer

5 – Podemos ver entonces, que la imagen que preseleccionamos como Userbar ya se encuentra en el apartado “Selected Logo Layer Editor“.

6 – Si queremos añadir un texto a ésta Userbar iremos al apartado “Userbar Text” y en el campo Text introduciremos el texto en cuestión. Disponemos aquí de otras opciones, como la alineación del texto, color y sombra.

7 – En el apartado “Userbar Shine” podremos modificar o quitar el brillo que se le aplicará a la barra.

8 – En el apartado “Logo Layers” podremos ver las distintas capas aplicadas a la barra, modficar, crear y borra éstas. Tambien disponemos de un par de flechas con las que podremos mover la capa hacia izquierda y derecha, muy útil cuando el texto no se ve o cabe adecuadamente debido a la imagen.

9 – La sección “Scroller Layer” no la veremos en ésta parte. Os adelanto que es para realizar barras con movimiento, tal y como veiamos al principio de ésta entrada.

10 – El apartado “Gradient” sirve para colorear la barra en función de los colores que le indiquemos, sabiendo y manejando además los botones que podemos encontrar en “Selected Logo Layer Editor” y con los que podremos borrar el fondo y hacerlo transparente, dibujar y pintar de determinados colores.

11 – En el apartado “Userbar Preview” y tras dar al botón “Generate Preview” podemos ir viendo nuestra barra en función de los cambios aplicados.

12 – Existe tambien una opción “Premium Options” donde si somos Premium tendremos alguna que otra opción más.

Tras éstos pasos mi barra se ve así:

13 – Una vez tengamos la barra tal y como queramos, haremos click en “Done, Upload to Image Host“, se abrirá una ventana indicando que se va a subir nuestra imagen y a generar código para poder insertar ésta barra allá donde queramos. Tras subirse ésta imagen nos mostrará una ventana parecida a ésta:

Aquí nos indica tres tipos de código, la URL de la imagen, en mi caso ésta:

Y dos tipos de código: BBCode y HTML Code.Son dos tipos de lenguaje que aceptarán unos sitios u otros, dependiendo de dónde queramos subir dicha barra. Para Blogger por ejemplo, nos basta con el HTML. No cerramos ésta ventana todavía ya que aunque ésto pensaba añadirlo en otra entrada, vamos a ver cómo poder agregar ésta barra a nuestro blog de Blogger por ejemplo:
Acudimos a Personalizar Diseño y agregamos un widget/gadget haciendo click en “Añadir gadget“.

Buscamos y agregamos el que se llama “HTML/JavaScript” y en la ventana que surge, en el campo “Contenido” pegaremos el código HTML que se nos proporcionó para nuestra barra, tal y como vemos en la imagen:

Como veis en la imagen, he seleccionado un texto concreto. Este texto (que se trata de una dirección URL) la deberemos sustituir por la URL a la que queremos que nos lleve dicha barra. Además si os fijais en la otra URL que hay en éste código, se trata de la URL de la imagen de nuestra barra, que está alojada en ImageShack. Seleccionamos “Guardar” y listo.

Deja un comentario

Maximum 2 links per comment. Do not use BBCode.