Mostrando entradas con la etiqueta entradas. Mostrar todas las entradas
Mostrando entradas con la etiqueta entradas. Mostrar todas las entradas

28.11.20

Poner borde a imágenes de una entrada en Blogger

Para poner borde a imágenes de una entrada utilizamos, dependiendo de la ubicación, los siguientes códigos:


Imagen a la izquierda

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="clear: left; float: left; margin-top: 5px; margin-right: 10px; border: 1px solid #COLOR"/></div>


Imagen a la derecha

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="clear: right; float: right; margin-top: 5px; margin-left: 10px; border: 1px solid #COLOR"/></div>


Imagen en el centro

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="margin-left: 1opx; margin-right: 110px; border: 1px solid #COLOR"/></div>

  • En URL ponemos la URL de la imagen correspondiente.
  • En COLOR ponemos el número correspondiente al código del color que se asigne al borde.

Códigos de colores HTML aquí.



9.4.15

Poner borde a imágenes de una entrada en Blogger

Para poner borde a imágenes de una entrada utilizamos, dependiendo de la ubicación, los siguientes códigos:


Imagen a la izquierda

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="clear: left; float: left; margin-top: 5px; margin-right: 10px; border: 1px solid #COLOR"/></div>


Imagen a la derecha

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="clear: right; float: right; margin-top: 5px; margin-left: 10px; border: 1px solid #COLOR"/></div>


Imagen en el centro

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="margin-left: 1opx; margin-right: 110px; border: 1px solid #COLOR"/></div>

  • En URL ponemos la URL de la imagen correspondiente.
  • En COLOR ponemos el número correspondiente al código del color que se asigne al borde.

Códigos de colores HTML aquí.



16.3.14

Justificar textos en entradas y comentarios Blogger


Justificar los textos de las entradas

Los textos de las entradas los podemos justificar de tres maneras:
  1. Manualmente
  2. En plantilla de entradas
  3. En Edición de HTML

Justificación manual

Creamos la entrada en el editor HTML poniendo el texto de la misma entre las siguientes etiquetas:

<div style="text-align: justify;">
Aquí el texto de la entrada
</div>

Justificación en plantilla de entradas

Vamos a:

Diseño ► Configuración ► Entradas y comentarios ► Plantilla de las entradas ► Añadir

Hacemos click en Añadir y, en la caja de texto que se despliega, pegamos las siguientes etiquetas:

<div style="text-align: justify;">
</div>

Cada vez que vayamos a crear una entrada, en el editor HTML aparecerán estas etiquetas entre las cuales ponemos el texto de la misma.


Justificación en Edición de HTML

Vamos a Editar HTML:

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

Localizamos un código con el siguiente formato poniendo, dentro del rectángulo de búsqueda (Search), la primera línea del mismo:

.post-body {
yyyyyyyyyy: xxxxx;
yyyyyyyyyy: xxxxx;
yyyyyyyyyy: xxxxx;
yyyyyyyyyy: xxxxx;
text-align: justify;
}

...y agregamos, al final, la línea resaltada.

Todas las entradas se justificarán automáticamente.


Justificación de los textos de los comentarios

En las plantillas antiguas los textos de los comentarios no se justifican por defecto; podemos lograrlo así:

Vamos a Editar HTML:

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

Localizamos un código con el siguiente formato poniendo, dentro del rectángulo de búsqueda (Search), la primera línea del mismo:

.comment-body {
yyyyyyyyyy: xxxxx;
yyyyyyyyyy: xxxxx;
yyyyyyyyyy: xxxxx;
yyyyyyyyyy: xxxxx;
text-align: justify;

}

...y agregamos, al final, la línea resaltada.


2.11.13

Poner borde a las imágenes de las entradas en Blogger


Con un sencillo código podemos implementar bordes uniformes para todas las imágenes puestas en las entradas de un blog.

Vamos a Editar HTML:

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

Localizamos, poniéndola dentro del rectángulo de búsqueda (search), la siguiente etiqueta:

]]></b:skin>

...e, inmediatamente antes, pegamos el siguiete código:

.post img, table.tr-caption-container {
  padding: 0px;
  border: 8px solid #fe4a4a;
}

Con el anterior código lograremos que todas las imágenes que pongamos en las entradas del blog adquieran un borde con las características indicadas en el mismo código. Veamos:

  • El resaltado en este color adjudica un espacio entre el borde y la imagen, que en este ejemplo no existe ya que es de cero pixeles. Si queremos que haya ese espacio cambiamos el cero por el número de pixeles que le dé el espacio deseado.
  • El resaltado en este color adjudica el ancho al borde.
  • El resaltado en este color es la propiedad que le da un estilo al borde. Ese estilo puede ser:
    • dotted: borde en línea punteada.
    • dashed: borde en línea discontinua.
    • solid: borde normal o en línea continua.
    • double: borde en línea doble.
    • groove: borde con efecto ranura o acanalado.
    • ridge: borde con efecto cresta, rugosidad o cordoncillo.
    • inset: borde con proyección o perspectiva hacia adentro.
    • outset: borde con proyección o perspectiva hacia afuera.
  • El resaltado en este color es el código hexadecimal del color adjudicado al borde.

Veamos bordes con cada uno de los estilos arriba indicados, y sus respectivos códigos, puestos a la siguiente imagen (en cada uno se le ha dado un ancho apropiado para poder apreciar claramente cada estilo):

Imagen sin borde
Código
Borde
.post img, table.tr-caption-container {
  padding: 0px;
  border: 5px dotted #fe4a4a;
}
.post img, table.tr-caption-container {
  padding: 0px;
  border: 5px dashed #fe4a4a;
}
.post img, table.tr-caption-container {
  padding: 0px;
  border: 8px solid #fe4a4a;
}
.post img, table.tr-caption-container {
  padding: 0px;
  border: 8px double #fe4a4a;
}
.post img, table.tr-caption-container {
  padding: 0px;
  border: 8px groove #fe4a4a;
}
.post img, table.tr-caption-container {
  padding: 0px;
  border: 8px ridge #fe4a4a;
}
.post img, table.tr-caption-container {
  padding: 0px;
  border: 8px inset #fe4a4a;
}
.post img, table.tr-caption-container {
  padding: 0px;
  border: 8px outset #fe4a4a;
}

5.4.13

Añadir gadgets arriba y debajo de las entradas



Podemos añadir pares de gadgets encima o debajo de las entradas, habilitando las secciones correspondientes, ya que, por defecto, Blogger nos permite poner gadgets encima o debajo de las entradas, arrastrándolos desde otra sección, pero únicamente de a uno.

Si vamos a:

Página principal ► Diseño ► Diseño

...veremos la sección correspondiente a las entradas así:

Sección entradas de Blogger

Y habilitando la opción para añadir pares de gadgets encima y debajo, la veremos así:

Añadir pares de gadgets encima y debajo de las entradas


Habilitar la opción Añadir un gadget, por pares

1.- Vamos a:

Diseño ► 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:

      <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>


3.- Para habilitar la opción Añadir un gadget, por pares, encima de las entradas, pegamos, antes del anterior código, el siguiente:

<div id='BlogGadget1' style='width: 50%; float: left;'>
<b:section class='sidebar' id='gadget-1' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget2' style='width: 50%; float: right;'>
<b:section class='sidebar' id='gadget-2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>


4.- Para habilitar la opción Añadir un gadget, por pares, debajo de las entradas, pegamos, después del código indicado en el punto dos, el siguiente:

<div id='BlogGadget3' style='width: 50%; float: left;'>
<b:section class='sidebar' id='gadget-3' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget4' style='width: 50%; float: right;'>
<b:section class='sidebar' id='gadget-4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>


5.- Guardar plantilla.

Entrada con un par de gadgets arriba y otro par abajo, todos del tipo Imagen:

con pares de gadgets arriba y abajo

6.- Para añadir tres gadgets (respuesta para Cris García), el código es el siguiente:

<div id='BlogGadget1' style='width: 33%; float: left;'>
<b:section class='sidebar' id='gadget-1' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget2' style='width: 33%; float: right;'>
<b:section class='sidebar' id='gadget-2' preferred='yes' style='float:right;'/>
</div>
<div id='BlogGadget3' style='width: 33%; float: right;'>
<b:section class='sidebar' id='gadget-3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>