Category Archives: Barra Lateral

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

Aprende lo Básico, Barra Lateral, Barra Lateral, Blogger, HTML/CSS, Personaliza Código, Plantillas, Plataformas, Post, Post, Texto, Tutoriales, ,


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:

< View plain text >
HTML

  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):

< View plain text >
HTML

  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:

< View plain text >
HTML

  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:

< View plain text >
HTML

  1. #sidebar-wrapper {

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

< View plain text >
HTML

  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:

< View plain text >
HTML

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

-Quedaría de esta manera:

< View plain text >
HTML

  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:

< View plain text >
HTML

  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;
joseluis

Por que se baja la columna lateral o sidebar ?

Aprende lo Básico, Barra Lateral, Blogger, Classic Blogger, Consejos, Plataformas, Wordpress

Esta explicación es útil para cualquier plataforma de blogs, wordpress, blogger, ..ya que el error es el mismo.
Esto es besico muchos ya lo saben, pero como cada vez llega más gente con sus blogs nuevecitos, voy a dejar este post.
Esta es la explicacion que da la propia ayuda de blogger y que yo he repetido probablemente unos cientos de veces en el chat…jajaja…agregue unas cosas para que quedara mas claro.

En ocasiones, una columna (normalmente la lateral) se desplaza cuando el contenido (accesorios, reloj, chat, imagenes o cualquier otro codigo) de un menú lateral o una entrada (post) supera el ancho que se le ha asignado (generalmente a la sidebar width=220px y el main o espacio donde van los post aproximadamente width=400px).
Este comportamiento varía en función del navegador (firefox, explorer, incluso entre las versiones de explorer), por lo que no siempre se produce cuando un usuario visita su página (ya que depende del navegador con el cual accede a tu blog).
Para resolver el problema, le recomendamos que revise el contenido de ambas columnas a fin de identificar los elementos que pueden provocar la expansión de la columna. En la mayoría de los casos, un vínculo demasiado largo o una imagen demasiado ancha son la causa del problema.

Esta es la ayuda de blogger, con algunos retoques.
Aqui les dejo una lista de las cosas que generalmete bajan la sidebar (en todo caso la mayoria es de sentido comun):
1.-Videos de youtube en los post(se debe ajustar al ancho, width a unos 380 para probar, luego aumentan hasta lo que que quieran)
2.-Reproductores de video y musica en la sidebar
3.-Imagenes muy grandes en la sidebar
4.-Mascotas en la sidebar, hay algunas demasiados alimentadas, jajajjaja.

Eso es todo, si me acuerdo de otro lo agrego aqui mismo.

patriram
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.

Donde debo pegar el codigo de algo, para que quede en la sidebar, Classic Blogger??

Aprende lo Básico, Barra Lateral, Classic Blogger, Plataformas, , , , ,

Ver Para Blogger:Post para Blogger
Ver Para WordPress:Post Para WordPress

Como quieran llamarla, la barra lateral, o sidebar, o columna lateral, es una de las principales cosas que deben identificar en su Plantilla o Template.

Como la mayoria de las complicaciones empiezan cuando queremos agregar accesorios(imagenes, reloj, calendarios, contador) al blog en la sidebar, en este post, dejare los archivos de todas las plantillas de blogger, con una explicacion que muestra en donde deben pegar el codigo. Al menos para las plantillas que mas votos tienen en la encuesta.

Primero una que me solicitan ahorita mismo..jajaja
PLANTILLA DOTS

PLANTILLA DOTS DARK

PLANTILLA HARBOR

PLANTILLA MINIMA

MINIMA BLACK

MINIMA BLUE

THISAWAY ROSE

TICTAC

TICTAC BLUE

SAND DOLLAR

y para alinear deben agregar alguno de los siguientes codigos:
En este caso es para centrar, pueden usar cualquiera de estas 3 formas:

< View plain text >
HTML

  1. AQUI VA EL  CODIGO DEL ACCESORIO
  2. <p align="center">  AQUI VA EL  CODIGO DEL ACCESORIO </p>
  3. <div align="center">  AQUI VA EL  CODIGO DEL ACCESORIO </div>

Si quieren izquierdo entonces reemplazan el center por el = left
Si quieren derecho entonces reemplazan el center por el = right
De ahi continuo con el resto… 🙂
El resto de las plantillas serán agregadas en este mismo post.

patriram
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.