Category Archives: HTML/CSS

Como ”justificar” los textos de todas las entradas de Blogger


Seguramente ustedes no justifican todas las entradas de blogger, por que aveces simplemente se les pasa por alto, algo que se ve mal si tienes un blog de alto pagerank o reconocimiento.

justificar.jpg

Una forma de justificar de manera fácil todas las entradas del blog sin tener que estar justificando una por una es como muestro a continuación:

Nota: Probado con plantillas predeterminadas Blogger, puede que no funcione en algunas modificadas

#Busca en tu plantilla Blogger el siguiente código:

  1. #outer-wrapper

#Te va a aparecer algo así (nota: puede que no aparezca exactamente igual, pero debe aparecer debajo de la linea de código que buscaste anteriormente):

  1. #outer-wrapper {
  2. margin: 0 auto;
  3. width: 760px;
  4. text-align: left;
  5. font: normal normal 100% Helvetica,Arial,Verdana,'Trebuchet MS', Sans-serif;
  6. }

#Bien, Ahora tenemos que reemplazar la palabra left de text-align: left; por justify, y quedará de esta manera:

  1. #outer-wrapper {
  2. margin: 0 auto;
  3. width: 760px;
  4. text-align: justify;
  5. font: normal normal 100% Helvetica,Arial,Verdana,'Trebuchet MS', Sans-serif;
  6. }

Eso es todo, ahora todas las entradas de Blogger estarán siempre justificadas sin tener que usar el botón de justificar.

-Si quieres que la información de la sidebar quede justificada tienes que buscar un código parecido a este:

  1. #sidebar-wrapper {

– Probablemente, verás debajo un código parecido a este:

  1. #sidebar-wrapper {
  2. display: inline; /* fixes a strange ie margin bug */
  3. float: right;
  4. margin-top: 0;
  5. margin-right: 3px;
  6. margin-bottom: 0;
  7. margin-left: 0;
  8. width: 219px;

-Y si no al interior del código anterior no encuentras la línea text-align: left; simplemente puedes agregarla debajo de:

  1. display: inline; /* fixes a strange ie margin bug */

-Quedaría de esta manera:

  1. #sidebar-wrapper {
  2. display: inline; /* fixes a strange ie margin bug */
  3. text-align: left;
  4. float: right;
  5. margin-top: 0;
  6. margin-right: 3px;
  7. margin-bottom: 0;
  8. margin-left: 0;
  9. width: 269px;

-Y nuevamente lo último que tenemos que hacer es cambiar el left por justify y está listo:

  1. #sidebar-wrapper {
  2. display: inline; /* fixes a strange ie margin bug */
  3. text-align: justify;
  4. float: right;
  5. margin-top: 0;
  6. margin-right: 3px;
  7. margin-bottom: 0;
  8. margin-left: 0;
  9. width: 269px;

Tutorial de CSS, Parte 1 “Que es el Padding, Margen, Border”, WordPress

Para que puedan seguir el orden de este tutorial que será bastante largo lo iré enumerando :D.
Todos cometemos muchos errores cuando modificamos el CSS de nuestra plantilla, incluso muchos diseñadores de plantillas hermosas, no entienden bien todas las cosas que se pueden hacer con css. La mayor parte de los errores se debe al cálculo erroneo de las dimensiones en las que irán las distintas secciones de la plantilla, como la sidebar y los post.
Uno de los cambios mas solicitados por todas las visitas, es agregar una nueva columna a sus plantillas, estos tutoriales serán la base para realizar esto en la forma correcta.

Para que vean lo delicado del asunto, seguramente mas de una vez les ha pasado que sus blogs se ven super bien en explorer, pero si lo abren en otro navegador como firefox, se ve pésimo, todo desordenado, la columna debajo de todo el blog y los margenes y todo esta corrido, esto no es porque firefox sea malo, de hecho es todo lo contrario, lamentablemente explorer, ajusta todo a su antojo, y a pesar de que tengamos muchos errores en el CSS de nuestras plantillas hace que todo se vea bastante bien. Así que para que nuestros blogs se vean razonablemente bien en ambos navegadores, debemos comenzar a aprender algunas reglas bastante simples.
He estado indagando mas en el tema de los css, asi que iré compartiendo con ustedes todos los tips que me parecen importantes e indispensables aprender.
Comenzemos:

Cuando editamos la plantilla lo primero que vemos son distintas etiquetas, algunas son fáciles de entender porque las palabras son similares al español, otras simplemente NOOO.

El CSS corresponde a todo el contenido que encontramos en el archivo style.css.

Las plantillas se podría decir que se diseñan por bloques, un bloque principal que se llama body es el que contiene todo, luego tenemos un header, que corresponde al titulo de nuestro blog (y su imagen), debajo tenemos el contenido (generalmente llamado wrapper) que es el que contiene el bloque de los post y el de las barras laterales (sidebar), y finalmente tenemos el pie de la pagina (footer), algunas paginas no lo tienen.

Primero mostraré la imagen para que no se asusten con tanta definición :D, asi pueden entender visualmente, y cualquier duda que les quede la pueden aclarar con mi explicación (espero que quede clara y no peor…jajajja)

css_parte_1_1.jpg

La unica linea que se puede ver en este diagrama es la llamada border, ni padding ni margen son lineas visibles.
Hay 2 cosas que son las mas importantes en la imagen anterior:
1.- los margenes horizontales se suman, como pueden ver con los 2 margenes de 5px
2.- En cambio los margenes verticales colapsan, es decir, queda el margen mas grande
Luego explicaré esto con mas detalle, y mostraré un ejemplo de cálculo.

Como ven el header es una caja, el post es otra caja, y la barra lateral es otra caja, por esto se llama modelo de cajas, cada una de estas cajas consta de 3 atributos, padding, border y margin.

Ahora mostraré la imagen de una sola caja, la de los post:

css_parte_1_2.JPG

Algunas definiciones simples:
width: corresponde al ancho del bloque que estamos definiendo.
height: correponde a la altura del bloque que estamos definiendo.
margen: corresponde al margen de nuestro bloque que estamos definiendo con respecto a los otros bloques que estan a su alrededor.
padding: corresponde al margen interior de nuestro bloque que estamos definiendo con respecto al borde.
border: corresponde a una linea visible que separa los bloques (se le puede asignar un color, asi que puede ser visible o invisible 😀 )

En el próximo tutorial mostraré como calcular de la manera adecuada las dimensiones de las cajas.
Si alguien experto ve algun error por favor que deje un mensaje 😀

Espero que les vaya quedando de apoco más claro, si tienen algunas dudas déjenlas en este post, asi voy agregando el material en las siguientes partes de este tutorial

Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.

Tutorial de CSS, Parte 1 “Que es el Padding, Margen, Border”, Classic-Blogger

Para que puedan seguir el orden de este tutorial que será bastante largo lo iré enumerando :D.
Todos cometemos muchos errores cuando modificamos el CSS de nuestra plantilla, incluso muchos diseñadores de plantillas hermosas, no entienden bien todas las cosas que se pueden hacer con css. La mayor parte de los errores se debe al cálculo erroneo de las dimensiones en las que irán las distintas secciones de la plantilla, como la sidebar y los post.
Uno de los cambios mas solicitados por todas las visitas, es agregar una nueva columna a sus plantillas, estos tutoriales serán la base para realizar esto en la forma correcta.

Para que vean lo delicado del asunto, seguramente mas de una vez les ha pasado que sus blogs se ven super bien en explorer, pero si lo abren en otro navegador como firefox, se ve pésimo, todo desordenado, la columna debajo de todo el blog y los margenes y todo esta corrido, esto no es porque firefox sea malo, de hecho es todo lo contrario, lamentablemente explorer, ajusta todo a su antojo, y a pesar de que tengamos muchos errores en el CSS de nuestras plantillas hace que todo se vea bastante bien. Así que para que nuestros blogs se vean razonablemente bien en ambos navegadores, debemos comenzar a aprender algunas reglas bastante simples.
He estado indagando mas en el tema de los css, asi que iré compartiendo con ustedes todos los tips que me parecen importantes e indispensables aprender.
Comenzemos:

Cuando editamos la plantilla lo primero que vemos son distintas etiquetas, algunas son fáciles de entender porque las palabras son similares al español, otras simplemente NOOO.

El CSS corresponde a todo el contenido que encontramos entre las etiquetas <style> y </style> de nuestra plantilla.

Las plantillas se podría decir que se diseñan por bloques, un bloque principal que se llama body es el que contiene todo, luego tenemos un header, que corresponde al titulo de nuestro blog (y su imagen), debajo tenemos el contenido (generalmente llamado wrapper) que es el que contiene el bloque de los post y el de las barras laterales (sidebar), y finalmente tenemos el pie de la pagina (footer), algunas paginas no lo tienen.

Primero mostraré la imagen para que no se asusten con tanta definición :D, asi pueden entender visualmente, y cualquier duda que les quede la pueden aclarar con mi explicación (espero que quede clara y no peor…jajajja)

css_parte_1_1.jpg

La unica linea que se puede ver en este diagrama es la llamada border, ni padding ni margen son lineas visibles.
Hay 2 cosas que son las mas importantes en la imagen anterior:
1.- los margenes horizontales se suman, como pueden ver con los 2 margenes de 5px
2.- En cambio los margenes verticales colapsan, es decir, queda el margen mas grande
Luego explicaré esto con mas detalle, y mostraré un ejemplo de cálculo.

Como ven el header es una caja, el post es otra caja, y la barra lateral es otra caja, por esto se llama modelo de cajas, cada una de estas cajas consta de 3 atributos, padding, border y margin.

Ahora mostraré la imagen de una sola caja, la de los post:

css_parte_1_2.JPG

Algunas definiciones simples:
width: corresponde al ancho del bloque que estamos definiendo.
height: correponde a la altura del bloque que estamos definiendo.
margen: corresponde al margen de nuestro bloque que estamos definiendo con respecto a los otros bloques que estan a su alrededor.
padding: corresponde al margen interior de nuestro bloque que estamos definiendo con respecto al borde.
border: corresponde a una linea visible que separa los bloques (se le puede asignar un color, asi que puede ser visible o invisible 😀 )

En el próximo tutorial mostraré como calcular de la manera adecuada las dimensiones de las cajas.
Si alguien experto ve algun error por favor que deje un mensaje 😀

Espero que les vaya quedando de apoco más claro, si tienen algunas dudas déjenlas en este post, asi voy agregando el material en las siguientes partes de este tutorial

Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.