Adicionar coluna Horizontal Lateral

Adicionar coluna Horizontal Lateral

Há algum tempo eu estava procurano um tutorial de como adicionar uma coluna horizontal lateral sobre as duas colunas do template. Não encontrei.

O que eu fiz? Utilizei alguns templates de teste e pesquisei no HTML dos templates como as sidebars horizontais ficavam sobre as duas colunas laterais. Então, com um pouco de paciência, descobri e vou postar aqui.

Em "Layout" e Editar "HTML", clique em "Expandir modelo de Widget". Encontre (Ctrl+F) primeira tag das sidebar do seu blog, como (no caso do meu template) no exemplo a seguir:

#sidebar {
    width:230px;
    float:left;
    text-align:left;
    padding: 5px;
    overflow: hidden;
}

Cole o seguinte código logo acima da tag encontrada. Este código abaixo é o da sidebar horizontal sobre as duas colunas.

* Se você quiser adicionar essa sidebar horizontal também abaixo das duas colunas, deverá procurar nas sequências da tag acima a que representa a última coluna e colar o seguinte código abaixo dela.

#rightsidebar2-wrapper {
  background: url() top no-repeat;
  width: 320px;
  margin-top:10px;
  margin-right:10px; _margin-right:0px;
  margin-left: 0px;
  float:right;
  word-wrap: break-word; 
  overflow: hidden;

}

A marcação em vermelho é a largura da área destina à sidebar horzontal, que deve ser a soma das larguras das colunas (cuidado com margins e paddings). Altere de acordo. Veja o exemplo:

Sidebar Horizontal sobre as colunas= 250px Coluna Esquerda= 100px Coluna Direita= 150px

A marcação de azul é a flutuação na página. Se as colunas do seu template são à esquerda da coluna do post, altere este valor para float:left;

Agora encontre a sequencia das sidebars do seu blog que indica as posições. (Mais ao final do código HTML)

Algo mais ou menos como: (Estas linhas do código representam as duas colunas do blog)

             <div id='sidebar2'>
<b:section id='sidebar2-widget' showaddelement='yes'>
<b:widget id='HTML4' locked='false' title='Your Feed Here' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Posts Recentes' type='HTML'/>
</b:section>
            </div>           
            <div id='sidebar'>
<b:section id='categories-widget' showaddelement='yes'>
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='ARCHIVES' type='BlogArchive'/>
</b:section>
            </div>

Cole o seguinte código logo acima da tag encontrada.

<div id='rightsidebar2-wrapper'> 
<b:section class='rightsidebar' id='rightsidebar2' preferred='yes'>
<b:widget id='Subscribe1' locked='false' title='Inscrever-se' type='Subscribe'/>
</b:section>
      </div>

* Vale lembrar que, se você quiser adicionar essa sidebar horizontal também abaixo das duas colunas, deverá colar o código abaixo dessa tag.

Existem outras alterações masi complexas no código HTML do template a fazer, mas essa vai ficar pra uma outra postagem.

Visualize, faça vários testes e salve o template. Agora você inseriu uma sidebar superior às duas colunas do seu blog.