martes, 7 de julio de 2009

MODIFICAR FONDO TITULO GADGET

A raiz del post EXPANDIR GADGET preguntaba misaani como podía cambiar el fondo del título de un gadget. Modificar el aspecto de todos los títulos y fondos es algo común pero en este caso en concreto vamos a ver como podemos modificar uno por uno, así teniendo más flexibilidad a la hora de personalizar y poder mostrar diferentes estilos en las distintas partes de la sidebar.

Los títulos en los elementos de mi sidebar se muestran de la siguiente forma:

En primer lugar tendremos que crear una imágen del mismo ancho y largo de nuestros títulos, por ejemplo:


Una vez tengamos la imágen que pasará a ser la nueva apariencia del título de nuestro gadget tendremos que seguir los siguientes pasos:

Primer paso:(Ubicar código)

Iremos a la parte de código de nuestra plantilla y realizaremos una búsqueda por el nombre del gadget que figura en nuestro panel de administrador, en este caso ARCHIVO.

Encontraremos una línea como la siguiente:
<b:widget id='BlogArchive2' locked='false' title='ARCHIVO' type='BlogArchive'/>
Nos fijaremos en la parte que se encuentra señalada en negrita, después de id, que será el identificador de nuestro gadget.

Segundo paso:(Añadir estilo)

En la parte de código de nuestra plantilla buscaremos ]]></b:skin>, será justamente encima donde tendremos que pegar una línea de código con la siguiente estructura.
#BlogArchive2 h2 {
background: url(URL IMAGEN FONDO) left top;
}

Tendréis que tener en cuenta que lo señalado en negrita será vuestro identificador, que tendrá que ser igual que en el primero paso y lo señalado en color azul será la imágen que creásteis anteriormente, podéis hacer uso de un servidor para alojar vuestra imagen como pueda ser este. Podéis hacer una vista previa antes de guardar los cambios para observar el resultado. En el caso de que el fondo sea de un solo color o tenga algún motivo no tendréis problema, en el caso de que el fondo refleje el título que es ese nuestro caso tendréis que jugar un poco con el título del gadget de forma que quede visualmente agradable sin eliminar completamente el título del gadget. Yo por ejemplo le añadí un punto :). El resultado sería algo como lo siguiente.

Tener un poco de paciencia y ir jugando un poco hasta que quede bonito, lo más seguro es que no os salga a la primera pero bueno ir probando que seguro que conseguiréis cosas muy chulas!. El procedimiento es simple pero si tenéis alguna duda no dudéis en preguntar.

11 Comentarios:

misaani dijo...

Hola y grasias por tu ayuda, ya cambié todos los títulos, aunque lo de expandir gagets, lo dejé de momento.
gracias y saludos

jhon f dijo...

Hola kiziera zaber zi ze puede modificar el ancho y el alto de un gadget... y como ???

graz...

caxitos dijo...

Jhon f En primer lugar deberías dejar un enlace a tu blog. Los gadgets se adaptan al tamaño del gadget insertado. Para ampliar el ancho de un gadget deberías ampliar el ancho de la sidebar y el alto lo puedes hacer con saltos de linea. Puedes si quieres dejar la url de tu blog y decirme exactamente que es lo que necesitas hacer.

Maga Durn dijo...

Hola. Mi problema estriba en q' de repente se me agrandaron los títulos de los gadgets y se ve horrible! Ya intenté modificarlo por "Fuentes y Colores" para reducir el tamaño, pero no me dio resultado, entonces eliminé algunos (títulos). Si pudieras ayudarme te lo agradecería infinitamente. Mi Blog es: Rumbo a la Era de Acuario. Mil gracias de antemano

caxitos dijo...

Maga Durn Entré a tu blog y creo que solucionaste el problema, si no fuera así no dudes en ponerte en contacto por aqui!! Por cierto tu blog está muy chulo :)

Maga Durn dijo...

caxitos. Sí, ya se solucionó!! El problema era de Blogger!!! De todas formas, mil gracias por tu interés y elogio. Un abrazo

Catabta dijo...

Hola quisiera saber como hago para cabiarle el tamaño no al titulo sino al cuerpo de texto d eun gadget...

agregue un gadget para texto y quisiera cambiar el tamaño de solo una parte del texto sabes que codigo debo usar?

Javier dijo...

Hola. Hice todo lo que dices en el post, y me sale todo perfecto, salvo que el título en letras no se me elimina, se me queda sobre escrito encima de la imagen, ¿Qué es lo que hago mal?

Mi blog es este, por si te quieres pasar: http://elbarco-blog.blogspot.com

Gracias por adelantado

Ekatomb Holocausto dijo...

Hola que tal veo muchos foros sobre esto me gustaría hacer esta pregunta ya encontre el gadget que quiero modificar pero el problema es que no encuentro ]]> en mi plantilla y me gustaría cambiar los titulos porfa si pudieras ayudarme te lo agradecería mi blos es http://metalmorbosis2.blogspot.com

Publicar un comentario en la entrada

Haga su comentario

Bienvenido al Rincon del Blog
Tus comentarios nos ayudan a mejorar
Muchas Gracias por Comentar.