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:
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.
un buen truco que tambien yo llebaba esperando. Como siempre, tus explicaciones son las mejores.
Exelente truco Jaime :D
siempre mostrando los mejores tutoriales!
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!
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
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.
Interesante!!!! Una preguntita... esas letras dónde las consigues?.
Muchísimas gracias por tu comentario, Tromero. Con este truco se puede personalizar mucho el blog y la ventaja es su sensillez.
¡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.
Me alegra que te guste, Alejoblogger.
¡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!
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?
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!
Jaime, tengo el windows 7...
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'.
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
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.
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!
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!
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?
Aileen, ¿Podrías decirme la frase que muestra el error? Pudiéndola leer completa intentaré buscar una solución.
Muchas gracias! me sirvió mucho :)
Muy buen blog. Saludos!
Nicole, preciosa esa fuente de texto utilizada en los títulos de tus gadgets, le dan al blog una apariencia elegantísima.
¡Un abrazo!