Category Archives: Personaliza Código

Como agregar otra barra Lateral o Sidebar a las plantillas de Blogger ?

Blogger, Personaliza Código, Plantillas, Plataformas

Primero ubicamos un codigo similar a este:

< View plain text >
css

  1. #sidebar-wrapper {
  2. width: 220px;
  3. float: right;
  4. word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  5. overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
  6. }

Como ven en el código anterior la primera sidebar esta alineada a la derecha.

Y creamos otra sidebar que estará alineada a la izquierda, osea copiamos el mismo codigo pero cambiamos el nombre por el de la nueva sidebar:

< View plain text >
css

  1. #newsidebar-wrapper {
  2. width: 220px;
  3. float: left;
  4. word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  5. overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
  6. }

Luego aumentamos el ancho de la sección que incluirá las 2 barras laterales, y los post:

El codigo original sería este:

< View plain text >
css

  1. #outer-wrapper {
  2. width: 660px;
  3. margin:0 auto;
  4. padding:10px;
  5. text-align:left;
  6. font: $bodyfont;
  7. }

Y tendríamos que dejarlo así (agregar al menos los 220 de la nueva sidebar):

< View plain text >
css

  1. #outer-wrapper {
  2. width: 850px;
  3. margin:0 auto;
  4. padding:10px;
  5. text-align:left;
  6. font: $bodyfont;
  7. }

Lo anterior depende tambien de los margenenes que existan, ahi deben ajustar el ancho hasta que quede bien.

Ahora hay que mostrar la nueva sidebar y listo.
El código que despliega la sidebar original es el siguiente:

< View plain text >
HTML

  1. <div id='sidebar-wrapper'>
  2. <b class='sidebar' id='sidebar'>
  3. <b id='BlogArchive1' title='Blog Archive' />
  4. <b id='Profile1' title='About Me' />
  5. </b>
  6. </div>

Para agregar la nueva sidebar creada, deben agregar el siguiente código justo debajo de <div id=’main-wrapper’>

< View plain text >
HTML

  1. <div id='newsidebar-wrapper'>
  2. <b class='sidebar' id='newsidebar'>
  3. <b id='Text1' title='' />
  4. </b>
  5. </div>

Eso es todo, ya tienen su nueva sidebar funcionando.

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.

Como agregar otra barra Lateral o Sidebar a las plantillas de Blogger ?, Classic-Blogger

Classic Blogger, Personaliza Código, Plantillas, Plataformas

Vamos a ir haciendo un análisis plantilla por plantilla
Primero las que mas votos tuvieron:

Minima black

< View plain text >
css

  1. /*-------- Content----------------------------------------------- */
  2. @media all {
  3.   #content {
  4.     width:660px;
  5.     margin:0 auto;
  6.     padding:0;
  7.     text-align:left;
  8.     }
  9.   #main {
  10.     width:410px;
  11.     float:left;
  12.     }
  13.   #sidebar {
  14.     width:220px;
  15.     float:right;
  16.     }
  17.   }

Creamos algo así:

< View plain text >
css

  1. /*-------------- Content------------------------------------- */
  2. @media all {
  3.   #content {
  4.     width:880px;
  5.     margin:0 auto;
  6.     padding:0;
  7.     text-align:left;
  8.     }
  9.   #main {
  10.     width:410px;
  11.     float:center;
  12.     }
  13.   #sidebar1 {
  14.     width:220px;
  15.     float:right;
  16.     }
  17.   #sidebar2 {
  18.     width:220px;
  19.     float:left;
  20.     }
  21.   }

Y abajo en la plantilla la llamamos de la misma manera que se ha llamado la sidebar inicial, excepto que la inicial (llamada sidebar) ahora se llamará sidebar1 y la otra sidebar2.

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.

Mas Templates Para Blogger, Classic-Blogger

Classic Blogger, De Todo, Plantillas, Plataformas

http://www.ehsany.com/
http://www.bloggueiro.cjb.net/ (tiene un menu pequeño que dice templates, hay que pinchar ahi)
Con las siguientes categorias:

Animes e mangás (15)
Desenhos & comics (7)
Animais (7) [up!]
Seres místicos (10) [up!]
Cantores (3) [up!]
Doados & Sem categoria (5) [up!]

http://bloggertemplatesbycaz.blogspot.com/
http://www.expressaofeminina.com.br/templates/ (para niños)
http://www.diaphaneity.com/layouts/page1.php
http://dragonfly.just-magic.net/templates.htm (para los fanaticos de series y peliculas)
http://dragonfly.just-magic.net/templates4.htm (fotografias)
http://dragonfly.just-magic.net/templates3.htm (son 2 mas)
http://dragonfly.just-magic.net/templates2.htm (son de musica)

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.