Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Utilizar una imagen como título en cualquier gadget de tu blog

Recuerdo que tiempo atrás, una de las primeras modificaciones que le hice a mi blog fue la de reemplazar los títulos de los gadgets por imágenes. Los lectores quedaron encantados y en la mayoría de sus comentarios me pidieron que les explicase la forma de conseguir lo mismo.

Por ello, en esta entrada quiero presentártelo y conseguir que en unos sencillísimos pasos puedas aplicarlo a los elementos de página que tengas tanto en la barra lateral de tu blog como en el pie de este mismo...



Nuestro primer pasó constará de añadir el gadget a personalizar en tu barra lateral o en cualquier sección del blog. Para ello, accede al apartado Diseño>Elementos de la página>Añadir un gadget. Seguidamente, atribúyele el título 'Mi gadget imagen'.

Guárdalo y sigue estos pasos:

Diseño>Edición de HTML>expandimos artilugios



Pulsando las teclas Ctrl y F para abrir el buscador de tu navegador, encuentra el título que acabas de introducir.

Una vez localizado, notarás que el código es muy similar a este:

<b:widget id='HTML1' locked='false' title='Mi gadget imagen' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

En mi caso, seleccioné el gadget html-javascript y por tanto el código es más corto aunque esto no tiene nada que ver con nuestro truco dado que variará según tu elección.

Ahora, reemplaza la línea resaltada en color verde por esto:

<img src="URL DE TU IMAGEN"/>

Sustituye URL DE TU IMAGEN por la dirección de la imagen que actuará como título.

Haz vista previa para comprobar el resultado y guarda la plantilla para terminar.

Tromero dice...

un buen truco que tambien yo llebaba esperando. Como siempre, tus explicaciones son las mejores.

AlejoBlogger dice...

Exelente truco Jaime :D
siempre mostrando los mejores tutoriales!

Ana Laura dice...

Excelente, me encantó la opción. La tendré en cuenta por si me decido a cambiar mi diseño... creo que si ahora además le agregara esta característica, mi plantilla quedaría muy cargada a la vista.

¡Muchas gracias por ofrecer siempre cosas novedosas!

Anónimo dice...

Estaba esperando ese truco pero como puedo poner una esa misma imagen de fondo en el tituo del gadget pero que el titulo se vea arriba de la imagen no se si me explique? saludos jaime espero me puedas ayudar

atte: EL TERRY

Cocidodesopa dice...

Muy buena idea, Jaime. Me resulta especialmente interesante lo que dices de pulsar las teclas Ctrl+F para abrir un buscador. Yo uso Mozilla, y esta opción no me funciona, y aparte, uso Mac, no sé si ésto influirá. ¿Cónoces la forma de abrir el buscador con estos artilugios?

Un saludo.

Laube Leal dice...

Interesante!!!! Una preguntita... esas letras dónde las consigues?.

Jaime Trujillo Escobedo dice...

Muchísimas gracias por tu comentario, Tromero. Con este truco se puede personalizar mucho el blog y la ventaja es su sensillez.

Jaime Trujillo Escobedo dice...

¡Laube! Puedes descargar la fuente desde esta página. Su nombre es "Katy Berry" y según tu sistema operativo dispondrás de varias opciones de descarga.

Una vez descargada, llévala a tu escritorio.

El próximo paso sería añadirla a la carpeta denominada "Fonts" pero necesito saber que sistema operativo utilizas (Windows vista, Windows XP...) para darte las indicaciones precisas.

Jaime Trujillo Escobedo dice...

Me alegra que te guste, Alejoblogger.

Jaime Trujillo Escobedo dice...

¡Hola Ana Laura! Sinceramente debo decirte que llevas toda la razón. El diseño de tu plantilla se compone por muchas imágenes y actualmente está perfecta.

Gracias a ti por comentar. ¡Abrazos!

Jaime Trujillo Escobedo dice...

Anónimo, no entendí tu comentario. Al principio pensé que querías añadir una imagen como título (para lo cual escribí la entrada) pero posteriormente me introduces un fondo.

¿Te refieres a colocar la imagen como título y además utilizar un fondopara el contenido del gadget?

Jaime Trujillo Escobedo dice...

Yolanda, accede a esta página en la que se explican los atajos de teclado para Linux, Mac OS y Windows.

Si sigue sin funcionarte avísame. ¡Saludos!

Laube Leal dice...

Jaime, tengo el windows 7...

Jaime Trujillo Escobedo dice...

Perfecto Laube. Descarga la fuente, abre la carpeta en la que se ha guardado y haciendo clic con el botón derecho, selecciona la opción que dice 'Instalar'.

Cocina dice...

Hola Jaime!utilize este truco me podrias decir como hacer para que me quede la imagen centrada en el gadget?como siempre muchas gracias!!esperare tu respuesta!
clau

Deybi dice...

Es un muy buen truco, Jaime. Ya creo que lo había visto por ahí, pero no con tanto detalle como nos lo muestras.

Saludos :D.

Jaime Trujillo Escobedo dice...

Claudia, prueba a incluir las etiquetas <center> y </center> (respectivamente) antes y después de la línea de código que inserta la imagen.

¡Abrazos!

Jaime Trujillo Escobedo dice...

Deybi, dado que es un truco algo conocido pensé que publicar un procedimiento a través del que se pueda utilizar también en las nuevas plantillas de blogger sería de mucha utilidad.

¡Abrazos!

Aileen dice...

He intentado hacer lo que dices, Jaime, pero cada vez que le doy a guardar o a vista previa me sale que entity de current debe acabar ';'

¿Alguna ayudita?

Jaime Trujillo Escobedo dice...

Aileen, ¿Podrías decirme la frase que muestra el error? Pudiéndola leer completa intentaré buscar una solución.

Anónimo dice...

Muchas gracias! me sirvió mucho :)

Muy buen blog. Saludos!

Jaime Trujillo Escobedo dice...

Nicole, preciosa esa fuente de texto utilizada en los títulos de tus gadgets, le dan al blog una apariencia elegantísima.

¡Un abrazo!

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo