Mostrando entradas con la etiqueta imagen de fondo. Mostrar todas las entradas
Mostrando entradas con la etiqueta imagen de fondo. Mostrar todas las entradas

26.11.12

Poner color o imagen de fondo a una entrada del blog



Color de fondo

Podemos poner un color especial como fondo de una (s) entrada(s) de nuestro blog con este sencillo código:

<div style="background:#bdbdbd; padding:10px;">
Texto de la entrada
</div>
  • #bdbdbd: es el código hexadecimal del color del fondo, que podemos cambiar.
  • 10px: es el espacio en pixeles entre el texto de la entrada y los bordes del fondo, que también podemos modificar.
  • Texto de la entrada: aquí, obviamente, ponemos el contendo de la antrada.

 

Procedimiento

Creamos la entrada con el procedimiento normal, yendo desde la página principal a Nueva entrada, o desde el escritorio a Crear entrada nueva:

Crear entrada nueva

  • La entrada la debemos crear en el editor de HTML, que es en donde ponemos el código arriba indicado y, dentro del mismo ( Texto de la entrada ), el contenido del post.

  • El título de la entrada quedará por fuera del fondo que estamos poniendo; si queremos que quede dentro del fondo lo ponemos dentro del código, como ponemos cualquier título dentro del texto de una entrada, encerrándolo dentro de las etiquetas que, por defecto, utiliza nuestra plantilla para los títulos que, generalmente son <h2>Título</h2> o <h3>Título</h3>.

  • Si no podemos identificar las etiquetas que utiliza la plantilla para los títulos de los posts, ensayamos las indicadas arriba, y miramos con la Vista previa la que quede mejor.

  • De todas maneras el título de la entrada también lo ponemos en donde corresponde y, después de que publiquemos la entrada, la editamos y le borramos el título, ya que, como también lo pusimos dentro del editor de HTML, nos quedará repetido.

Poner color de fondo a una entrada

El texto utilizado para crear la entrada de la Demo quedó así en el editor HTML (las líneas resaltadas corresponden al código que le da el color de fondo a la entrada):

<div style="background:#a9e2f3; padding:10px;">
<div style="text-align:justify;">
<h3>
Tolerancia social</h3>

La tolerancia social en las sociedades modernas se defiende penalmente y busca el respeto de los derechos y los intereses de todas las personas con independencia de sus circunstancias individuales, para la coexistencia pacífica.

A nivel individual es la capacidad de aceptación de una situación, o de otra persona o grupo considerado diferente, pero no todos los individuos están capacitados para ser tolerantes. Es la actitud que una persona tiene respecto a aquello que es diferente de sus valores. Es también la aceptación de una situación injusta en contra de los intereses propios o en contra de los intereses de terceras personas. Es también la capacidad de escuchar y aceptar a los demás.

Este comportamiento social se ha dado en todas las épocas de la humanidad y en todos los lugares del mundo como un medio para la coexistencia pacífica. Los valores o normas son establecidos por la sociedad o grupo que cuenta con el poder político y el control social, que establece el respeto o la persecución de la persona o grupo considerado diferente o problemático. En este contexto es el respeto a las ideas, creencias o prácticas de los demás cuando son diferentes o contrarias a las propias. Es también el respeto injusto de las ideas o intereses de los demás en contra de los propios.

Es distinto tolerancia de libertad, y lo más común en las sociedades humanas consiste en la opresión de un grupo minoritario por parte de una mayoría, ya que lo inverso es menos frecuente. Los valores de respeto van en menor grado desde la tolerancia hasta la libertad, pasando por la igualdad social. La tolerancia no tiene porque ser neutral o un valor positivo en sí mismo, puede ser también un medio por parte del grupo con el control social para fomentar o mantener una situación de privilegio que le es favorable.
</div>
</div>

 

Imagen de fondo

También podemos poner una imagen como fondo de una (s) entrada(s) de nuestro blog utilizando el siguiente código:

<div style="background-image:url(URL de la imagen); padding:50px;">
Texto de la entrada
</div>

  • URL de la imagen: Aquí ponemos la URL de la imagen que va a servir como fondo de la entrada.
  • 50px: es el espacio en pixeles entre el texto de la entrada y los bordes de la imagen, que también podemos modificar.
  • Texto de la entrada: Aquí ponemos el contenido de la entrada.
  • Debemos adaptar las dimensiones de la imagen que va servir de fondo, a las dimensiones de la entrada, porque:

    • si el espacio que ocupa el texto de la entrada es mayor que el tamaño de la imagen ésta se repetirá, y
    • si el espacio que ocupa el texto de la entrada es menor que el tamaño de la imagen ésta quedará recortada.

 

Procedimiento

Aplicamos exactamente el mismo procedimiento que utilizamos para poner un color de fondo a la entrada.

Poner imagen de fondo a una entrada

El texto utilizado para crear la entrada de la Demo quedó así en el editor HTML (las líneas resaltadas corresponden al código que le pone imagen de fondo a la entrada):

<div style="background-image: url(http://i50.tinypic.com/1j2mm8.jpg); padding: 50px;">
<div style="text-align:justify;">
<h3>
Tolerancia social</h3>

La tolerancia social en las sociedades modernas se defiende penalmente y busca el respeto de los derechos y los intereses de todas las personas con independencia de sus circunstancias individuales, para la coexistencia pacífica.

A nivel individual es la capacidad de aceptación de una situación, o de otra persona o grupo considerado diferente, pero no todos los individuos están capacitados para ser tolerantes. Es la actitud que una persona tiene respecto a aquello que es diferente de sus valores. Es también la aceptación de una situación injusta en contra de los intereses propios o en contra de los intereses de terceras personas. Es también la capacidad de escuchar y aceptar a los demás.

Este comportamiento social se ha dado en todas las épocas de la humanidad y en todos los lugares del mundo como un medio para la coexistencia pacífica. Los valores o normas son establecidos por la sociedad o grupo que cuenta con el poder político y el control social, que establece el respeto o la persecución de la persona o grupo considerado diferente o problemático. En este contexto es el respeto a las ideas, creencias o prácticas de los demás cuando son diferentes o contrarias a las propias. Es también el respeto injusto de las ideas o intereses de los demás en contra de los propios.
</div>
</div>

1.10.10

Imagen de fondo para blogger, plantillas nuevas



Para poner imagen de fondo a blogs diseñados con plantillas nuevas:

Vamos a Edición de HTML:

Página principal ► Diseño ► Plantilla ► Editar HTML
Sin expandir artilugios localizamos un código como el siguiente:

<Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) none repeat-x scroll top left" value="$(color) none repeat-x scroll top left"/>

Lo eliminamos y en su lugar ponermos éste:

<Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) none repeat-x scroll top center" value="#539bcd url(http://www.blogblog.com/dots_dark/bg_minidots.gif) repeat fixed top center"/>

La parte resaltada es la URL de la imagen; la cambiamos por la que queremos colocar.

Con la característica repeat hacemos que la imagen se repita horizontal y verticalmente, a todo lo ancho y largo del fondo del blog.

Con la característica fixed logramos que la imagen quede fija mientras el blog se desplaza.


Ver: Poner imagen de fondo, plantillas antiguas


Índice Edición HTML
Poner imagen de fondo a un blog Cambiar enlaces pie de página
Eliminar enlaces pie de página Eliminar 'Publicado por'
Eliminar fechas Eliminar la hora
Efecto subrayar links Eliminar barra superior
Evitar copias de blogs Ocultar o eliminar sidebar
Eliminar y reemplazar cabecera Ícono para barra de direcciones
Centrar títulos posts Ensanchar blog
Cambiar color fondo posts Color fondo sidebar
Agregar una sidebar Color fondo de comentarios
Personalizar firma pie de posts Personalizar fechas de los posts
Diseñador de plantillas de Blogger Crear página de inicio o Portada
Eliminar enlaces a autores de plantillas Cambiar de sitio la sidebar
Centrar imagen de la cebecera

8.6.10

Poner imagen de fondo en Blogger


Plantillas nuevas

Vamos a Editar HTML:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

Localizamos un código como el siguiente:

<Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) none repeat-x scroll top left" value="$(color) none repeat-x scroll top left"/>

Lo eliminamos y en su lugar ponermos éste:

<Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) none repeat-x scroll top center" value="#539bcd url(http://www.blogblog.com/dots_dark/bg_minidots.gif) repeat fixed top center"/>

La parte resaltada es la URL de la imagen; la cambiamos por la que queremos colocar.

Con la característica repeat hacemos que la imagen se repita horizontal y verticalmente, a todo lo ancho y largo del fondo del blog.

Con la característica fixed logramos que la imagen quede fija mientras el blog se desplaza.


Plantillas antiguas

Vamos a Editar HTML:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

2.- Localizamos el siguiente código, poniendo dentro del rectángulo de búsqueda (Search), una línea del mismo:

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

3.- Agregamos lo que está resaltado, y el código deberá quedar así:

body {
background: url(Aquí la URL de la imagen) fixed repeat;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

4.- Las características con las que definimos posición y repetición de imágenes de fondo, son:
  • Con el valor no-repeat la imagen no se repite.
  • Con el valor repeat la imagen se repetirá horizontal y verticalmente, ocupando todo el fondo del blog.
  • Con el valor repeat-x la imagen se repetirá horizontalmente.
  • Con el valor repeat-y la imagen se repetirá verticalmente.
  • Con el valor fixed, la imagen será fija, sin él se desplazará con el contenido.
  • El valor top define la posición de la imagen: con left la ubica a la izquierda, con right a la derecha y con center al centro.
En nuestro caso hemos utilizado fixed y repeat, para que la imagen ocupe todo el fondo del blog y permanezca fija. Un ejemplo: aquí

4.5.10

Poner imagen de fondo en un blog


Vamos a Edición de HTML:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

2.- Localizamos el siguiente código, poniendo dentro del rectángulo de búsqueda (Search), una línea del mismo:

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

3.- Agregamos lo que está resaltado, y el código deberá quedar así:

body {
background: url(Aquí la URL de la imagen) fixed repeat;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

4.- Las características con las que definimos posición y repetición de imágenes de fondo, son:
  • Con el valor no-repeat la imagen no se repite.
  • Con el valor repeat la imagen se repetirá horizontal y verticalmente, ocupando todo el fondo del blog.
  • Con el valor repeat-x la imagen se repetirá horizontalmente.
  • Con el valor repeat-y la imagen se repetirá verticalmente.
  • Con el valor fixed, la imagen será fija, sin él se desplazará con el contenido.
  • El valor top define la posición de la imagen: con left la ubica a la izquierda, con right a la derecha y con center al centro.
En nuestro caso hemos utilizado fixed y repeat, para que la imagen ocupe todo el fondo del blog y permanezca fija. Un ejemplo: aquí

Nota:

Este tutorial es aplicable a plantillas antiguas. Para plantillas nuevas ver: Imagen de fondo para plantillas nuevas

Índice Edición HTML
Poner imagen de fondo en un blog Cambiar enlaces pie de página
Eliminar enlaces pie de página Eliminar 'Publicado por'
Eliminar fechas Eliminar la hora
Efecto subrayar links Eliminar barra superior
Evitar copias de blogs Ocultar o eliminar sidebar
Eliminar y reemplazar cabecera Ícono para barra de direcciones
Centrar títulos posts Ensanchar blog
Cambiar color fondo posts Color fondo sidebar
Agregar una sidebar Color fondo de comentarios
Personalizar firma pie de posts Personalizar fechas de los posts
Diseñador de plantillas de Blogger Crear página de inicio o Portada
Eliminar enlaces a autores de plantillas Cambiar de sitio la sidebar
Centrar imagen de la cebecera