JMiur [E]

Continuando con la idea de modificar la estructura de una plantilla, hasta acá tenemos el esquema tradicional de un blog, encabezado, las entradas a la izquierda, la sidebar a la derecha y un pie de página. La ubicación de entradas y sidebar es fácilmente modificable ¿queremos invertirlas? basta invertir la flotación de ambos rectángulos.

#main-wrapper {
.......
float: right; /* cambiamos left por right */
}

#sidebar-wrapper {
.......
float: left;  /* cambiamos right por left */
}
La sidebar que hemos creado es muy ancha y eso no es casualidad ya que ahora que tenemos todo preparado vamos a agregar otras debajo de ella siguiendo el mismo esquema que explica Gem@ .

Para esto, ya no sólo tendremos que modificar el CSS sino agregar código pero, lo haremos de la manera simple, sin expandir los artilugios para que no nos de un ataque al ver tanta cosa escrita.

Si vamos hasta casi el final de la plantilla, lo que veremos es algo así:
<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
.......
</b:section>
</div>
Y allí en el medio aparecerán cosas como:
<b:widget ....... />
Que son cada uno de los elementos que tenemos en la sidebar y que no tocaremos. Lo que haremos es copiar el código sin eso y lo pegaremos dos veces debajo de </b:section> para crear dos nuevas sidebar. Luego, les cambiaremos los nombres y quedará algo así:
<div id="sidebar-area">
<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
.......
</b:section>
</div>
<div id="sidebar-derecha">
<b:section class="sidebar" id="sidebarderecha" preferred="yes" />
</div>
<div id="sidebar-izquierda">
<b:section class="sidebar" id="sidebarizquierda" preferred="yes" />
</div>
</div>
Pero, fíjense que todas está dentro de otro DIV. Es que para evitar problemas indeseados vamos a utilizar un viejo truco que siempre nos saca de apuro: cuando haya varios rectángulos flotando que no podemos o no sabemos controlar, coloquemos todos ellos en un contenedor, en otro rectángulo más grande así que "envolvemos" las tres sidebars en un DIV al que en un rapto de originalidad llamé sidebar-area.

Es muy importante tener en cuenta que a las dos angostas, aunque sean iguales, debemos colocarles atributos id con nombres diferentes ya que en una pagina web, los ids son nombres únicos, no puede haber dos iguales. Por el contrario, las clases pueden ser las mismas y por eso no la cambiaremos ya que las características de los elementos será la misma (por supuesto, si queremos que se vean diferentes, les pondremos tambien clases diferentes y deberemos definirlas).

Nuevamente, vamos al CSS y agregamos las definiciones de estilo para estas dos sidebars que serán casi iguales que las de sidebar-wrapper (la superior, la que quedará ancha). Ambas flotarán a la derecha y la suma de sus anchos no deberá superar los 390 pixeles que es el ancho de la superior así que le daremos a cada una un poco menos de la mitad para separarlas entre si con un margen:

190 + 5 + 5 + 190 = 390
#sidebar-area {
float: right; /* flota a la derecha */
width: 390px; /* es tan ancha como la sidebar superior */
}

#sidebar-derecha {
float: right; /* flota a la derecha */
margin-left: 5px; /* margen izquierdo */
overflow: hidden;
width: 190px;
word-wrap: break-word;
}

#sidebar-izquierda {
float: right; /* flota a la derecha */
margin-right: 5px; /* margen derecho */
overflow: hidden;
width: 190px;
word-wrap: break-word;
}
Guardo la plantilla y, para que se vea algo de lo modificado puedo hacer dos cosas, o le agrego elementos (es lo que se verá en el ejemplo) o bien, le agrego a lo anterior un par de definiciones:
background-color: red;
height: 300px;
Con height le damos una altura y con background-color un color de fondo; esas dos propiedades luego se pueden eliminar.

¿Y si nuevamente, en lugar de querer ese esquema, se nos ocurre poner todo del otro lado, invertimos los valores de la flotación de main-wrapper y de sidebar-area. Lo que está como left lo ponemos como right y viceversa.


¿Será posible ahora agregar una nueva sidebar ancha debajo de estas? Si a alguien le parece que esto es una telenovela por capítulos, tiene razón ...

REFERENCIAS:
  • Modificando las plantillas (Tutorial 1: Anchos)

  • 85 comentarios:

    Gem@  

    Claro que puede agregarse ;)
    Me gusta esta telenovela jajaja

    Responder
    Anónimo  

    J estás viendo alguna??? jajaja, por lo poco que he aprendido y dejas así picando la pregunta ES POSIBLE: CORRECTO!!! jajaja, me has hecho reír, saludos!!!

    Responder
    Anónimo  

    jaja


    no se pierdan el proximo capitulo.


    me esta quedando muy claro =D

    gracias por el tuto

    Responder
    JMiur  

    Será la semana próxima. A la misma hora y por el mismo canal :D

    Responder
    S. C. P.  

    Hola, amigo.
    Estoy siguiendo paso a paso el tutorial, y creo que es una de las cosas más productivas que he visto (y seguido).
    Pero no te escribo para alabarte, que ya tienes bastantes alabanzas, ja ja. Lo hago, porque cuando fui a hacer el "flípiti flópiti y cámbiense las columnas", zácate: no encontré el código tal como lo planteaste. Pero no me amilané, puse lo que dijiste y me quedó una a continuación de la otra... en fin.
    Que mi plantilla no dice "float: right" o left, sino $endside$ y $startside$, más bien al revés. Primero start y luego end. El outer-wrapper también dice startside.
    Doctor, ¿estoy muy grave?

    salú

    silvia

    PD: Tenía otra plantilla y la cambié por la mínima para seguir el tutorial, capaz que algo quedó de antes... Te dejo el link, por las dudas http://laboratoriodepruebasdeesecepe.blogspot.com/

    Responder
    Admin  

    Ya que estás hablando de sidebares, he leído por allí que una sidebar a la derecha (como la tenés vos) carga mas rápido que si estuviera a la izquierda, que opinás al respecto??

    Y otra cosita ya que estamos, yo también he visto que lo primero que cargan los blogs es la sidebar, (sobre todo si están a la derecha) me pasa con todos, menos uno: Te Propongo..., que tarda una eternidad en cargar los post, que crees que pueda ser y si sabés como solucionar eso??

    Han traducido el suscribirse viste?

    Responder
    Admin  

    Hablando del suscribirse no me había suscripto ;)

    Responder
    Eulalia  

    Respuesta para S.C.P.
    En las plantillas modernas de blogger, el right y el left tienen una variable que las redefine, así en lugar de right has de poner $endSide y en lugar de left $startSide.
    Al ser una definición de variable has de poner el simbolo $ para que funcione y lo interprete.
    Saludos.

    Para JMiur:
    Sigo atentamente estos capítulos, pues, aunque he modificado casi todos los modelos de plantillas que hay en blogger, creando modelos que se pueden descargar y usar y que quien aún no conozca puede encontrar en este blog, se que contigo aprenderé mucho más.
    Un abrazo.

    Responder
    JMiur  

    Silvia:
    Justo estaba escribiendo sobre ese detalle. No, no es grave. Te doy la explicación resumida:
    $startSide equivale a left
    $endSide equivale a right
    Sugiero cambiarlas por left y right. No modificará nada pero será más sencillo de entender cualquier cambio.

    k_nelita:
    No, eso no e cierto. La posición en la página es indiferente. El código fuente se ejecuta de manera secuencial, de arriba hacia abajo, línea por línea aunque los navegadores pueden ir haciendo varias cosas al mismo tiempo asi que ciertas cosas aparecen antes que otras.

    Que la sidebar se muestre al a izqueirda o a la derecha no importa tanto como en que parte de la plantilla se ejecuta. Puede estar antes de los posts pero flotando al otro lado y se ejecuta primero, por ejemplo. Personalmente, creo que los posts deben mostrarse primero, sin importar donde esté la sidebar.

    Complicado de explicar :D

    Responder
    Admin  

    Perfecto, entonces era un mito eso del lugar de la sidebar, me quedó clarito.
    Pero ahora bien, la otra parte de la pregunta era porque en Te Propongo tardan tanto en cargar los post??
    Cuando generalmente lo que mas tarda es la sidebar, en todos los blogs que tengo,(y que visito) salvo en ese.

    Hay alguna manera de corregirlo? O hay algo que está mal en mi plantilla o blog??

    Responder
    Anónimo  

    "Ya que estás hablando de sidebares, he leído por allí que una sidebar a la derecha (como la tenés vos) carga mas rápido que si estuviera a la izquierda, que opinás al respecto??"

    Lo importante de la sidebar, como comenta el joven JMiur, es que no debe ralentizar la carga. ¿Cómo la ralentiza? Pues, cuando la saturas con imágenes, widgets y scripts.

    El siguiente punto importante, es la diagramación. Se supone que a la derecha, es más fácil para los usuarios hacer click y verla (como en los periódicos). Sin embargo, en la web, es común ver que los menues estén a la izquierda. La usabilidad es distinta.

    Y más allá de ambas observaciones, la sidebar, a mi entender, no es más que un complemento del sitio, que a lo sumo debe dar accesos directos y por tanto, no debe tener nunca más información que la zona de posts (ni en términos de más colores, ni en términos de más relevancia).

    Responder
    JMiur  

    k_nelita:
    Es por la distribución del código en la plantilla. Si mirás sin expndir nada vas a aver, primero el header, luego la sidebar y luego los posts. en otro verás el header, luego los posts y por último la sidebar. El bnavegador hace eso, lee en orden y lo va mostrando. No importa si está a la derecha o a la izquierda sino si está antes o después.

    Myself:
    Es cierto. La web tradicional siempre tiene los menues a la izquierda porque leemos de izquierda a derecha y "los vemos" antes. Los blogs, en cambio, colocan la sidebar (tradicionalemtne) a la derecha justamente por lo contrario, porque es un elemento accesorio y menos relevante.

    Responder
    Admin  

    JMiur, no me queda nada claro mirando la plantilla, me da la impresión de que estuvieran mezclados partes de sidebar y main, no se como podría arreglar eso.
    En el css está en el orden que dices, pero expandiendo, es como que está todo mezclado...
    Me voy a fijar como está en el otro blog pero me parece haberlo visto igual y sin embargo carga antes los posts...

    Responder
    Admin  

    Ahhhh, ahora releí lo que escribiste y volví a revisar la plantilla, claro, era sin expandir, había entendido al revés...
    Mirá sin expandir tengo las cosas en este orden:
    outer-wrapper
    header-wrapper
    sidebar-wrapper
    main-wrapper
    footer-wrapper
    El main y el footer están al final, como arreglo eso?
    Tiene arreglo? Yo no hice nada, venía así con la plantilla, es una modificada...

    Responder
    JMiur  

    En principio, sólo cambiando de lugar las cosas, en lugar de:
    sidebar-wrapper
    main-wrapper

    que estén:
    main-wrapper
    sidebar-wrapper

    Aparentemente, no veo que la flotación influya pero es fácil de comprobar usando la Vista Previa antes de guardar.

    Responder
    Admin  

    Ya lo hice JMiur!! En el blog de pruebas lo cambié de lugar subí el main antes de la sidebar, sin expandir, lo miré en vista previa y funcionó se cargan primero los posts!!

    Voy a hacerlo en el blog original ahora, al fin!!

    Me estoy avivando un poco viste? Mientras vos me contestabas yo estaba probando ja ja :D

    Responder
    Admin  

    Listo!! No puedo creer, tanto tiempo sufriendo con lo que tardaba en cargar el main, y ahora carga al toque.
    Si no fuera por vos que me abrís los ojos, no se que sería de mi :D

    Sabés que? estaba mirando en esa plantilla, los emoticones los tengo abajo y no me causan conflicto con nada, te acordás que los tuve que subir en el otro blog?
    Aca no molestan... ;)

    Responder
    JMiur  

    Me alegro que todo se solucionara.

    l ode los emoticones puede ser cualquier cosa, muchas veces, la ubicación influye cuando hay varios scripts dando vuelta.

    En lo personal, si algo funciona, creo que lo mejor es no tocarlo :D

    Responder
    Anónimo  

    Hola:
    Estoy siguiendo con mucho interés este Curso. Podrías crear una categoría o un índice y así te pongo un link. Gracias!!

    Responder
    S. C. P.  

    Gracias! Gracias a los dos, a ti, Jmiur ya Eulalia!!!

    abrazos


    silvia

    Responder
    JMiur  

    Voy a ver si puedo hacerlo, Boloo; no es mala idea.

    Responder
    Anónimo  

    Es que es un Cursazo que valdrá la pena seguir

    Responder
    Azuel Firguilera  

    gran telenovela con final feliz...

    sigue así

    Responder
    Anónimo  

    oye mil gracias... yo abri mi blog el año 2005 pero nunca lo pesque... ahora me estoy reenamorando de esto... y gracias a tu blog e logrado entender mas a mi pagina.....
    la cosa es que igual cuesta un poco.... pero ya me esta quedando como quiero...
    gracias.. por esta pagina

    Responder
    JMiur  

    Saludos claudizio. Es verdad, cuesta pero no es tan complciado como parece; me alegro que te haya sido útil.

    Responder
    Gem@  

    Me ha gustado esa frase de Claudizio se está reenamorando ...
    Yo también suelo decir que todo esto entra poquito a poco y termina enamorando y es que no hay mejor definición.

    Responder
    JMiur  

    Jajajajaa. Es una buena definición sin duda. La constante del amor/odio :D

    Responder
    Anónimo  

    Jmiur además de claro como el agua me encantan los toque s de humos que le pones sino esto se vuelve más aburrido que chuparse un clavo. vos logras que lo tedioso se vuelva agradable.
    saludos

    Responder
    JMiur  

    Gracias por el comentario, Insomnya :D

    Responder
     ~    ĸiĸi cullen  

    Hola :) aai tengo una duda, vi que ya alguien la habia puesto por ahi, pero ya no la encontre...puse los codigos tal y como esta ahi pero me sale esto: Se ha encontrado más de una sección con el ID: sidebar. Los ID de sección deben ser exclusivos.
    hice algo mal?

    Responder
    JMiur  

    Cada seccion debe tener un ID diferente. En el ejemplo hay tres i cada uno tiene un nombre distinto. Si en tu plantilla ya existía alguno, simplemente, cámbiale el nombre:

    <b:section class="sidebar" id="NOMBRE" preferred="yes">

    Responder
    El blog de Lucy  

    JMiur, cambie de posición el sidebar en mi blog, me gusta mas como esta, sin embargo, en los laterales se desborda el color y en la parte de abajo hay una linea que me parece es la división inicial, como puedo solucionar esto?
    Te edejo la direccion de mi blog para que veas el error: http://lblogdelucy.blogspot.com/

    Responder
    JMiur  

    Eso es porque la imagen es muy grande, al estar del otro lado la sidebar, no se nota.

    Podrías agregarle una propiedad de color de fondo a las entradas para que tapen lo que sobra de la imagen. Busca esta parte y agrega eso en negrita:

    #main-wrapper {
    ................
    background-color:#F9F2EA;}

    Responder
    Escuintleca  

    hola tengo un gran problema no se que paso que aunque ya le cambie varias plantillas a mi blog de blogger la sidebar siempre sale abajo y yo quiero que salga a la derecha como antes pero no se que paso que ahora siempre sale hasta abajo si ya borre la plantilla y le puse ora y siempre da lo mismo solo cambia el fondo pero la sidebar siempre abajo que paso a mi blog porque esta asi ayuda porfabor se ve orrible

    http://mirinconguatemalteco.blogspot.com/

    Responder
    JMiur  

    Eso pasa porque hay algo erróneao. La sección de la sidebar está dentro del div main-wrapper y debe estar afuera.

    main-wrapper son los posts
    sidebar-wrapper es la sidebar

    Es difíicl de explicar sin ver la plantilla. Me imagino que tienes algo así:

    <div id='main-wrapper'>
    <b:section class='main' id='main' ....... >
    ........
    </b:section>

    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
    ........
    </b:section>
    </div>

    </div>

    Cuando debería ser algo así:

    <div id='main-wrapper'>
    <b:section class='main' id='main' ....... >
    ........
    </b:section>
    </div>

    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
    ........
    </b:section>
    </div>

    Responder
    Unknown  

    Jmiur lo he intentado pero sale error en la plantilla.
    Primero coloco lo que nos ofrece Gem@, luego lo que nos cuentas???
    Otra pregunta: en la parte del título del post, por qué será que no quedan los 4 bordes??? el derecho no aparece...muchas gracias y chauuuuuuuuuu
    PD: parece que por IE no funciona el coments incrustado, esta mañana una amiga me dijo y ahora me pasa con vos.

    Responder
    JMiur  

    Graciela: ¿qué clase de error? Suele ocurrir si olvidamos cerrar una etiqueta o si están mal las comillas, etc. Debería ver l oque estás intentando para responde. Cualquier cosa me mandas un mail y lo vemos.

    Responder
    Unknown  

    hay que susto, Graciela que clase de error!!!!!!!! :)
    Estaba cambiando lo de las etiquetas, algo personal para no tener problems

    Bien aquí voy: cuando pones doble comilla, solo vá ' es así no?
    Traté de varias maneras incorporar lo de Gem@, eso sale sin problemas, luego lo de las sidebar más pequeñas...allí me dá error...esto lo hago sobre el blog, no probando en otro me cansa hacerlo así y como no tienes inconvenientes porque trabajas sin expandir...
    Solo 1 comilla?

    Responder
    JMiur  

    ¿Te referís a algo así?

    <b:section class='sidebar' id='sidebarderecha' />

    Los valores (lo que está luego de igual) siempre va entre comillas, Simpels o dobles no importa ya que Blogger las cambiará a simples. Pero siempre mirá si están cerradas: comilla valor cierro comillas.

    Responder
    Unknown  

    bien lo haré y luego te explico donde me dá error. Mira qué cosa doble o simple, no lo sabía :)

    Responder
    IDEAZENCILLAS  

    hola
    exelente el blog y este tutorial..
    Estoy intentando hacer un plantilla y algo he avanzado...
    pero quiero agregarle una sidebar siguiendo tus instrucciones
    pero cada vez que lo hago me envia este mensaje:

    No hemos podido guardar tu plantilla
    Por favor, corrige el siguiente error y envía la plantilla de nuevo.
    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "div" must be terminated by the matching end-tag "

    que ocurre???
    espero tu respuesta porfiiii...
    desde ya gracias...

    xauU

    Responder
    JMiur  

    Tendría que ver el código que quieres agregar para decirte. El error que te indica es que una etiqueta está mñla cerrada. Cualquier cosa, si lo envias por mail me fijo y te digo.

    Responder
    deibys  

    hola me puedes dar un ellase para descargar la plantilla agosto de template novo de blogger
    porfa la necesito

    Responder
    JMiur  

    Ve Templates para novo Blogger coloca la palabra agosto en su buscador y ahí tendrás el enlace a la entrada y sus expicaciones.

    Responder
    Oliveros  

    Muchas gracias por tu gran tutorial y felicidades por tu blog

    Responder
    SOLOMOCHILA  

    Buen post.. me ayudó bastante a entender un poco más el formato de blogger..

    Hice un par de cambios con una plantilla nueva en este blog que uso para probar http://h-l-t.blogspot.com

    Le agregué dos sidebar más abajo de la ancha se puede ver acá... http://www.blogger.com/html?blogID=2201303180090446956

    Pero cuando le agrego gadgets, estos se ven cortados...

    supongo que debe tener algo que ver con .sidebar { ...

    pero no estoy seguro donde ni como.. alguna idea??

    Responder
    JMiur  

    piXel:
    Efectivamente, en la clase .sidebar hay un paddigng que hace que el ancho sea mayor y por lo tanto, se corte porque no hay espacio suficiente. Allí, lo definiría así:

    .sidebar {
    ..........
    padding:0 0 10px;
    }

    Y, las otras dos también deberían modificarse porque el ancho que usas es excesivo:

    #sidebar-der {
    float:left;
    margin-left:0;
    margin-right:10px;
    margin-top:10px;
    overflow:hidden;
    width:195px;
    word-wrap:break-word;
    }

    en esa pongo un ancjo menor y le doy un pargen apra separarla de la otra que, en lugar de hacerla flotar a la derecha, también se la hace flotar a la izquierda para que queden una al lado de la otra.

    #sidebar-izq {
    float:left;
    margin-left:0;
    margin-right:0;
    margin-top:10px;
    overflow:hidden;
    width:195px;
    word-wrap:break-word;
    }

    Responder
    SOLOMOCHILA  

    sisi con el padding estuve probando... pero creo que hay algunos gadget que no se pueden comprimir en ancho tanto como uno quiera, necesitan si o si un ancho mínimo...

    lo digo por na nube de tags la logro comprimir pero al "archive", llega a una medida y se comienza a cortar...

    Creo que voy a tener que ensanchar un poco más las sidebar..

    Gracias.

    Responder
    JMiur  

    Si, hay gadgets que requieren un ancho mínimo. Al usar una sidebar muy angosta, deberás ver biien cuales son los que puedes usar y cuales no.

    Responder
    Carpe Diem  

    Guau! Esta genial! Muchisimas gracias!!!

    Responder
    Informe Alpha  

    ola, soy guille, de Informe Alpha, un blog, y me encanta tu blog, es muy útil.

    ¿Una pregunta, se pueden poner esas dos sidebars debajo de las entradas?
    no se muy bien como hacerlo :$
    muchas gracias :)

    Responder
    JMiur  

    Se puede hacer cualquier diseño. Deberás probar y ver.

    Responder
    Xhinis_Sere  

    Hola como vas spero y bn!!!

    Stoy siguiendo tu tutorial y m he kdado estancada en el siguiente paso

    Aki:

    #sidebar-area {
    float: right; /* flota a la derecha */
    width: 390px; /* es tan ancha como la sidebar superior */
    }

    #sidebar-derecha {
    float: right; /* flota a la derecha */
    margin-left: 5px; /* margen izquierdo */
    overflow: hidden;
    width: 190px;
    word-wrap: break-word;
    }

    #sidebar-izquierda {
    float: right; /* flota a la derecha */
    margin-right: 5px; /* margen derecho */
    overflow: hidden;
    width: 190px;
    word-wrap: break-word;
    }

    *********************

    En mi Editor en dond encuentro esa parte para modificar o tngo q ponerla yo ????

    Responder
    JMiur  

    Debes agregarla junto con el resto del CSS que verás que se encuentra entre <b:skin> y </b:skin>

    Responder
    Ariadne Ch.  

    Hola! He seguido paso a paso tu 1r tutorial y me ha ido de fabula, lo he entendido perfectamente y ahora ya se como cambiar rapidamente el ancho de mi blog.
    El problema es que en este tutorial me he perdido. Es decir, donde tu dices que ha de aparecerne algo parecido a esto:
    Si vamos hasta casi el final de la plantilla, lo que veremos es algo así como 'sideber-wrapper' seccion class preferred 'yes' o algo asi.


    A mi no me sale nada de lo que dices...y entonces cuando avanzo y ago los otros pasos no me aparecen 2 columnas en la sidebar...estoy hecha un lio. El programa de comentarios no me deja copiar todo lo que pone en mi plantilla, pero esto es lo que me sale en el comienzo de la zona que habla de la sidebar al final de la plantilla:


    pone algo como: id=sidebar1 y id=sidebar 2 pero en realidad solo tengo 1 sidebar..es algo raro....





    Te estaria agradecida si pudieras ayudarme. Gracias!

    Responder
    JMiur  

    Como no se ven los códigos que has colocado, no entiendo el problema, Cualquier cosa, envíalo en un mail a ver si podemos resolverlo.

    Responder
    Karolina cookiss  

    hola yo he intentado hacer esto, pero me dice que la etiqueta no esta bien cerrada, si revisas lo que pusiste con los div y b section, a ver si hay algun codigo que falte, porque hasta lo he copiado y nada, me dice qu no esta bien la plantilla, gracias

    Responder
    JMiur  

    Karolina:
    No; no veo que allí haya errores de sintaxis. Deberías mostrarme tu código para chequearlo.

    Responder
    colmilloBlanco  

    buscando como hacer algunos cambios en la plantilla de mi blogger.
    me encontre con este sitio.espero que me puedan ayudar mi problemas es
    que estoy tratando modificar el tamaño del wraper que tengo a la derecha.es que solo quiero una sola linea de texto.pero el widget no me esta cambiando.aqui les dejo mi blog.soy novato en esto
    http://www.obraspoemas.blogspot.com

    Responder
    JMiur  

    No comprendo muy bien la pregunta.

    Allí, por lo que veo, la sidebar derecha tiene unas imágenes de fondo que son las que mandan y miden 145 pixeles así que, si aumentas el ancho de la sidebar, también deberás modificar las imágenes para que tengan ese mismo ancho; deberás editarlas, volverlas a subir y cambiar las URL.

    Por otro lado, si quieres aumentar el ancho de una sidebar, deberás aumentar el ancho total del blog que ahora es el definido en el width que ves en #outer-wrapper {}

    Responder
    colmilloBlanco  

    ok Jmiur.Eso are ahora mismo.una pregunta.hey puesto unos codigos asi como siga leyendo .para que me aparescan varias entradas .el problema es que tengo algunos anuncios de adsense.y eso me aparece en las entradas junto con los titulos de los libros que publico.yo quisiera que me aparesca los anuncios despues de hacer clic en siga leyendo.Aqui mi blog para que lo veas.gracias
    http://www.obraspoemas.blogspot.com

    Responder
    JMiur  

    No sé cómo es el código que tienes en la plantilla pero, en todo caso,, deberías condicionarlo:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    ... y aqui va el código de adsense
    </b:if/>

    Responder
    colmilloBlanco  

    si ya me funciona.gracias jmiur.Ya que estoy empezando me podrias ayudar en esto.lo que pasa es que estoy tratando de poner algo asi como siguenos en facebook.y que te muestre los seguidores que tienes.no se si me explique bien.bueno hey tratado de poner pero no logro hacer eso hasta ahora.no se si me puedas explicar esto.

    Responder
    JMiur  

    Para eso debes usar algunos de los plugins sociales que provee el mismo Facebook.

    Responder
    A.C.  

    Hola JMiur soy nuevo en los blogs y tengo un problema, no sé a lo que te refieres con lo de la "id" porque pego los códigos y al poner "vista previa" me sale:"No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "b:section" must be terminated by the matching end-tag "".

    Error 500"
    Además cuando dices que pege los códigos debajo de (/b:section) me encuentro con 3 (/b:section) y no sé cual es.
    No tengo ni idea de cual es el problema, no sé que hago mal.Gracias!!

    Responder
    JMiur  

    No sé dónde l oestás intentando colocar ni que estás intentando colocar.

    Responder
    A.C.  

    Perdón por mal expresarme, intento colocar los códigos para crear las dos nuevas sidebar que dices que van después de (/b:section).

    Responder
    JMiur  

    No sé qué es lo que estás cambiando. Por el mensaje de error que te meustra Blogger, estás cerrando mal alguna etiqueta pero es imposible decirte si no se qué es lo que estás cambiando y qué código estás usando para cambiarlo.

    Responder
    A.C.  

    Yo estoy colocando el codigo:
    (div id="sidebar-wrapper")
    (b:section class="sidebar" id="sidebar" preferred="yes")
    .......
    (/b:section)
    (/div).
    Que está casi al final de la plantilla, en el post dices que lo coloque dos veses más después de (/b:section)y también dices que le cambie la ID a los dos códigos que repito porque no se pueden repetir las ID.
    Se supone que quedaría algo así:
    (div id="sidebar-area")
    (div id="sidebar-wrapper")
    (b:section class="sidebar" id="sidebar" preferred="yes")
    .......
    (/b:section)
    (/div)
    (div id="sidebar-derecha")
    (b:section class="sidebar" id="sidebarderecha" preferred="yes" /)
    (/div)
    (div id="sidebar-izquierda")
    (b:section class="sidebar" id="sidebarizquierda" preferred="yes" /)
    (/div)
    (/div)
    Ahora mi problema es:Hago lo que acabo de explicar pero me sale al poner vista previa:"No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "b:section" must be terminated by the matching end-tag "".

    Error 500"
    ¿Que debo hacer?¿Y que es eso de cerrar mal las etiquetas?
    Espero ahora si explicarme mejor :)

    Responder
    JMiur  

    L oque dice el post es que cambies esto:

    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
    <!-- acá están los gadgets -->
    </b:section>
    </div>

    por esto:

    <div id="sidebar-area">
    <div id="sidebar-wrapper">
    <b:section class="sidebar" id="sidebar" preferred="yes">
    <!-- acá están los gadgets -->
    </b:section>
    </div>
    <div id="sidebar-derecha">
    <b:section class="sidebar" id="sidebarderecha" preferred="yes" />
    </div>
    <div id="sidebar-izquierda">
    <b:section class="sidebar" id="sidebarizquierda" preferred="yes" />
    </div>
    </div>

    Y eso, no tiene errores de sintaxis, cada etiqueta está debidamente cerrada.

    Responder
    A.C.  

    Al final lo logre, tenías razón los códigos los puse en el lugar equivocado, había entendido mal la explicación del post.
    Muchas Gracias JMiur!!.:D

    Responder
    Cêz  

    Hola JMiur, estuve leyendo del 1er al último comentario en busca de algo parecido al mi problema, resulta que en mi blog
    Asicious, tengo la widebar o area-sidebar como dice en tu entrada la tengo desubicada, es decir, esta situada entre Main y la 1ra sidebar, para ser mas claro, hice una captura desde Blogger (aquí ) y desde Vista previa se ve así y no he podido acomodar esta area-sidebar en medio de las dos sidebares como tu penúltima imagen. Revisé los float, los width y no entiendo qué me esta fallando? serías tan amable de regalarme una aspirina? :S

    Gracias

    Responder
    JMiur  

    Las imágenes nada dicen porque lo que se ve en la ventana de diseño sólo es una representación del blog epro nada más. Podrían verse invertidas ahi y derechas en el blog.

    Básicamente, tu codigo fuente tiene esta estructura:

    newsidebar-wrapper float:right
    widebar-wrapper float:right
    main-wrapper float:left
    sidebar-wrapper float:left

    Son cuatro rectángulos dentro de content-wrapper y eso es justamente el error y lo que explica esta entrada. Eso que llamas area-sidebar no es una columna ancha sino que debe ser un contenedor de todas las sidebars.

    Dentro del content-wrapper debería haber dos grandes DIVS:

    main-wrapper float:left
    contenedor-sidebars float:left o right es insistinto

    Ese último es el que debe contener als 3 sidebars:
    widebar-wrapper float:left o right es insistinto es doble ancho
    newsidebar-wrapper float:right ancho simple
    sidebar-wrapper float:left ancho simple

    Responder
    Cêz  

    Oh con razón, después de leer tu explicación con detenimiento (4 veces jejeje) y no tenía idea de la complejidad de mi error. Justamente estaba probando (cuando no llegaba tu respuesta) a ver si lograba crear un area-sidebar con los códigos de tu entrada y como era de esperarse, me falló.

    Según entiendo, para la solución de mi problema debo dividir el content-wrapper en dos areas, el primero para entradas y el otro para las sidebars sin afectar al footer.
    Pero no sé cuál es el código y en qué parte de la plantilla para crear y cerrar un div para mi main-wrapper y otro div para contenedor-sidebars? Ahí estoy estancado porque no encontré una entrada acerca de divs.

    Gracias

    PD. Mi blog es Asicious

    Responder
    JMiur  

    Ese es el punto exactamente.

    Lo otro, no puedo decirte, es algo que debes ver en tu plantilla (sin expandirla) y cer la forma en que está armada para saber donde comienza y termina cada DIV.

    Responder
    Cêz  

    Hola JMiur, gracias a una amiga, me dio la idea acerca de poner divs necesarios en la plantilla de mi blog Asicious donde al parecer esta funcionando normal, sin embargo el area-sidebar se fue hasta el fondo del mismo mientras la main-wrapper permanece en el lugar indicado; me ha sugerido revisar el número de pixeles de cada elemento con tal de no sobrepasar la suma o el ancho del header, es decir 980px incluyendo margenes. Mi imagen de medidas es aquí Algo me dice que no son los pixeles sino otra cosa pero no sé qué es, tú tendrás alguna solución para ubicar la sidebar-area al lado derecho del main-wrapper, por favor? :((

    PD. Incluso probé otra idea, quitar algunos px a la widebar-wrapper y las dos sidebares de la sidebararea y no se ha movido de ahí.

    Responder
    JMiur  

    El DIV sidebar-area dice tener 140 pixeles y dentro de ese DIV esta todo esto:

    widebar-wrapper
    main-wrapper
    sidebar-wrapper
    newsidebar-wrapper

    Eso es un error ¿cuál es el el uso que tiene ese DIV? Si me guio por tu imagen, debería contener a widebar-wrapper, sidebar-wrapper y newsidebar-wrapper pero no a main-wrapper. Indudablemente, está mal colocado.

    Un detalle más, si debe contener a esos otros DIVs no puede medir 140 pixeles ya que sus contenidos son más anchos.

    Responder
    Hernan Vallejo  

    Muy buen articulo lo aplique en mi blog y quedo genial, gracias por el aporte

    JMiur  

    Me alegra que sirviera, Hernán.

    Responder
    Anónimo  

    Como veo esta entrada es muy antigua, sin embargo hasta ahora no me había dado por añadir una sidebar dividida en dos o tres partes y en la parte inferior, alguien me ha dicho que aquí lo podía encontrar pero no veo donde dice como añadir esos como se llamen en la parte inferior del blog. ¿Cual es la solución?.

    JMiur  

    Tendrías que explicar más porque "esos como se llamen" es bastante confuso.

    Anónimo  

    Es que no se como se llaman los rectángulos en los que dice añadir un gadget o HTLM/javascript. No se si ya sabes a que me refiero.

    JMiur  

    Supongo que te refieres a una sección: 1 | 12 | 3 | 4

    Todo dependerá del sitio y de que quieras hacer con exactitud.

    Responder
    Anónimo  

    Supongo que será una sección y el lar a colocar seria el inferior dividida en 2 rectángulos. Lo de poner la ID diferente tampoco se como se hace por más que no debe ser ninguna cosa del otro mundo.

    JMiur  

    El código es tan simple como esto:

    <div id="un_nombre">
    <b:section class="" id="una_seccion_cualquiera" />
    </div>

    El resto, depende de lo que quieras hacer, del tipo de contenido que vayas a agregar y de las reglas de estilo que definas.

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR