Colocar texto y otros elementos con un fondo de color | blogsmadeinspain

Aquí encontrarás plantillas para Blogger diseñadas por mí totalmente gratuitas, conocerás como se manipulan imágenes, fondos, texto, enlaces o links, los mejores widgets o gadgets, herramientas y utilidades, etc... Y además puedo diseñarte una plantilla exclusiva para tí, totalmente a tu gusto, y solo por 38 Euros.

Colocar texto y otros elementos con un fondo de color

Desde la publicación en mi blog de esta entrada, muchos me habéis mandado e-mails solicitándome información de cómo colocar texto o elementos con un fondo de color. Por ejemplo como el cuadro siguiente, sacado de dicha entrada publicada hace poco:

Nueva suscripción por E-mail. Podrás recibir las entradas que publique en tu E-mail. Estarás informado de todas las novedades.

Esto puede hacerse fácilmente mediante una "tabla" html, colocándo un código al principio del elemento que queramos colocar con ese fondo, y otro pequeño código al final, obtendréis resultados muy profesionales, ya que podemos controlar colores, bordes, tamaños, y en general todo el aspecto gráfico que presentará la "tabla".

Leer completo...[+/-]

    Para realizar esto, como ya he comentado antes, usaremos una "tabla" html, que entre otros tiene valores de color de fondo, color de borde, grosor de borde, tamaño, etc...

    Al principio del elemento en html colocaremos este código:

    <table border="0" cellspacing="0" cellpadding="10" width="176" bgcolor="#e6e6e6" bordercolor="#000000"><tbody> <tr> <td valign="top" width="176">

    Y al final del elemento de que se trate cerramos con este código:

    </td> </tr> </tbody></table>

    (Por cierto, esta forma de presentar los códigos con ese color gris de fondo, está realizado de la forma que ahora estoy explicando)

    Podemos colocar el elemento que queramos entre esos dos códigos, desde una imagen o un texto, hasta una entrada completa de vuestro blog. Si pincháis Aquí podréis ver un ejemplo de entrada de mi blog, donde hay una tabla, con sus características de color y borde, dentro de otra tabla que enmarca toda la entrada, y con otras características.

    Es decir, podéis usar los códigos de apertura y cierre todas las veces que queráis, siempre colocándolos seguros de lo que queréis enmarcar con una tabla u otra.

    Paso ahora a explicaros cada uno de los modificadores que colocamos en los códigos del principio.

    border - Definimos con este modificador el ancho en píxeles del borde, colocamos "0" si no queremos que aparezca borde alguno.

    bordercolor - Como su propio nombre indica, es el color del borde. Debemos colocar el código hex del color que queramos usar.

    cellspacing - Este valor, para lo que estamos viendo ahora, debe permanecer en "0".

    cellpadding - Este es el margen o separación, en píxeles, que tendrán los elementos que se han colocado dentro, con el borde de la tabla.

    width - Anchura en píxeles de la tabla. Si colocáis el modificador heigth, que yo no he colocado, lo que fijaréis será la altura. Si borráis este modificador, la anchura de la tabla se adaptará al ancho total del lugar donde esté (Entrada, sidebar, footer, etc...). Cuidado que el término width aparece dos veces en el código inicial, los dos valores deben ser iguales.

    bgcolor - Código hex del color de fondo que queremos. Si borramos este modificador el fondo será transparente.

    Dejaremos para una entrada posterior el tema de colocar una imagen de fondo, en vez de un color. Este tema es un poco más complicado, pero pueden obtenerse resultados como este...




    Saludos a todos mis visitantes. Espero que mi blog os sea de mucha ayuda.
    Y sobre todo, gracias, muchas gracias por vuestra confianza.

11 comentarios:

Unknown dijo...

¡Muchas gracias! Descubrí tu blog hace unos días y he sacado tanto información como ideas de él. Seguiré visitándolo regularmente :)

Gloria dijo...

Hola, te descubrí desde el blog de Rosa con sus escaparate.
Realmente te felicito por tu blog, tenés muy buena info y además sabes como explicarlo de manera simple, para los que no entendemos de este tema como es mi caso.

Besos desde Buenos Aires

Blogsmadeinspain dijo...

Gloria, gracias por visitarme. Espero que mi blog te sea de mucha utilidad.
Muchas gracias por tu comentario y saludos desde Sevilla, en España.

Nara dijo...

Antonio, ya he aplicado los cambios y me han quedado Genial¡¡¡
(bueno, como a mi me gusta)
Lo proximo será lo que explicas en este post.
Un besazo y mil gracias.

DEBAE (Dirección de Bibliotecas Académicas y Especializadas) dijo...

Hola Antonio:

Gracias por todas las orientaciones que tan gentilmente nos das. Ya coloqué tu enlace en mi blog ysigo visitándolo ya que tiene muhca información de interés y lo mejor con una guía muy sencilla.

Nuevos saludos desde Lima-Perú.

Anónimo dijo...
Este comentario ha sido eliminado por el autor.
✿ Inmaculada ✿ dijo...

Muchas gracias por tu blog....las explicaciones son realmente claras y sencillas...hemos consultado varios blog y sib duda nos quedamos contigo, enhorabuena por tu trabajo.

Ricardo dijo...

Se pueden añadir imagenes en la lista de enlaces ? gracias por tu ayuda :)

Blogsmadeinspain dijo...

Ricardo, en Blogger puede modificarse prácticamente todo, el problema es saber como.
Yo desconozco como hacerlo, pero seguramente si buscas en google "modificar lista de enlaces en blogger" o algo parecido... Seguro que encuentras algo.

Trinidad dijo...

¡Hola Antonio!,

Te he descubierto hace unas semanas y me he suscrito a tu blog, Gracias a tus publicaciones, trucos y generosidad por compartir, aprendo un poco cada día a mejorar y darle otro "Aire a mi blog".
Soy "novata" en estops menesteres y quería hacerte una pregunta en referencia a este articulo de poner texto e imagen , ¿Donde he de pegar este código en plantillas edición HTML?. o ¿Dónde?. ¿Diseño?.

¡Muchas Gracias!

Saludos

Blogsmadeinspain dijo...

Debes pegarlo en "Diseño", como un elemento HTML. O en alguna entrada o página de tu blog, dependiendo de donde lo quieras colocar.