Herramientas para Webmasters de Blogger: cambiar de sitio la sidebar

Mostrando entradas con la etiqueta cambiar de sitio la sidebar. Mostrar todas las entradas

1.1.13

Cambiar de sitio la sidebar, plantillas antiguas

Índice
Para plantillas Denim
Para plantillas Rounders
Para plantillas Minima
Para plantillas Herbert
Para plantillas Harbor

◄Anterior | Siguiente►

8.7.10

Cambiar de sitio la barra lateral (sidebar)

Índice
Para plantillas Denim
Para plantillas Rounders
Para plantillas Minima
Para plantillas Herbert
Para plantillas Harbor

◄Anterior | Siguiente►

6.7.10

Cambiar sitio sidebar - Plantillas Rounders

La sidebar de la plantilla Rounders está al lado derecho. La pasaremos al lado izquierdo.

Vamos a Edición de HTML:

Página principal ► Diseño ► Plantilla ► Edición de HTML

Localizamos los siguientes códigos:

 #main-wrap1 {

  width:485px;

  float:$startSide;

  background:$mainBgColor url("http://www1.blogblog.com/rounders/corners_main_bot.gif") no-repeat $startSide bottom;

  margin:15px 0 0;

  padding:0 0 10px;

  color:$mainTextColor;

  font-size:97%;

  line-height:1.5em;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

  }

#main-wrap2 {

  float:$startSide;

  width:100%;

  background:url("http://www1.blogblog.com/rounders/corners_main_top.gif") no-repeat $startSide top;

  padding:10px 0 0;

  }

#sidebar-wrap {

  width:240px;

  float:$endSide;

  margin:15px 0 0;

  font-size:97%;

  line-height:1.5em;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

  }

En ambos códigos hacemos las soguientes modificaciones:

En donde está:

float:$startSide;

...lo cambiamos por:
float:$endSide;

Y en donde está:

float:$endSide;

...lo cambiamos por:

float:$startSide;

copiamos el código del sector de las entradas, que es como éste:

   <div id='main-wrap1'><div id='main-wrap2'>

    <b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

  </div></div>

Lo pegamos inmediatamente después de este código:

   <div id='sidebar-wrap'>



    <div id='sidebartop-wrap'><div id='sidebartop-wrap2'>

      <b:section class='sidebar' id='sidebartop'>

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>

</b:section>

    </div></div>



    <div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>

      <b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>

</b:section>

    </div></div>



  </div>

...eliminándolo del lugar que ocupaba anteriormente, para que no nos dé error por repetición.

Vista previa, guardamos y tendremos la sidebar en el lado izquierdo.

◄Índice	◄Anterior	Siguiente►

Cambiar de sitio la sidebar - Plantilla Denim

La sidebar de la plantila Denim está al lado derecho. La pasaremos al lado izquierdo.

Vamos a Edición de HTML:

Página principal ► Diseño ► Plantilla ► Edición de HTML

Localizamos estos códigos:

 #main-wrapper {

  margin-$startSide: 14px;

  width: 464px;

  float: $startSide;

  background-color: $mainBgColor;

  display: inline;      

  word-wrap: break-word;

  overflow: hidden;      

}

#sidebar-wrapper {

  margin-$endSide: 14px;

  width: 240px;

  float: $endSide;

  background-color: $mainBgColor;

  display: inline;      

  word-wrap: break-word;

  overflow: hidden;      

}

En ambos códigos hacemos las iguientes modificaciones:
- En donde está start lo eliminamos y en su lugar ponemos end.
- En donde está end lo eliminamos y en su lugar ponemos start.

copiamos el código del sector de las entradas, que es como éste:

       <div id='main-wrapper'>

        <b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

      </div>

Lo pegamos inmediatamente después de este código:

       <div id='sidebar-wrapper'>

        <b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>

</b:section>

      </div>

...eliminándolo del lugar que ocupaba anteriormente, para que no nos dé error por repetición.

Vista previa, guardamos y tendremos la sidebar en el lado izquierdo.

◄Índice	Siguiente►