Twitter Delicious Facebook Digg Stumbleupon Favorites More

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.

7 comentários:

HerzL - Dotaisfun Blog disse...

e como eu faço so tenho uma coluna
ve ai meu blog
http://dotaisfun.blogspot.com

GutoMengo disse...

esse foi o mais dificil, tenho um template que
é igual o seu anterior eu quero colocar abaixo mais não vejo as tagas para por em baixo só consigo por na parte de cima!

Willian Coutinho disse...

GutoMengo, vc consegui colocar? deu tudo certo? qualquer coisa pergunte que te dou mais dicas.
Valeu.

JL Martinns disse...

"de graça recebestes, de graça dái" palavras de Jesus Cristo.

então vou dar o que aprendir aqui atravez deste tutorial veja abaixo:
-------
Muito Dez este blog... Das dicas sobre coluna horintal na lateral do blog, banners rolando, dividir colunas... ects,,, este blogs aqui foi que funcionou... veja a coluna horizontal que eu inserir abaixo das duas laterias: http://amigosemdebate.blogspot.com/

lembrando aos moderadores deste blog que para completar as configuações da coluna horizontal inseriada eu tive que acrescentar muitas coisas que não estão no tutorial, pois está incompleto...

mas aqui abaixo eu disponibilzo para voces como ficou depois umas mexidas:
Observem: Os pontinhos estão representando as demais sidebars sequenciais:

/* ----- SIDEBAR ----- */
#.................... {

#rightsidebar2-wrapper {
background: url() top yes-repeat;
width: 358px;
margin-top:10px;
margin-right:10px; _margin-right:0px;
margin-left: 1px;
color: $textColor;
font: $textFont;
font-weight: bold;
font-size: 13px;
float:right;
word-wrap: break-word;
overflow: hidden;

}

esta acima foi a nova coluna que eu adicioneie. E para configurar pra ficar do mesmo jeito que as outras sidebars eu acrescentei após a sequencia abaixo, assim:

#sidebar1 .widget {
margin: 0px 0px 4px 0px;
padding: 15px 15px 15px 15px;
background: $sidebar1bgColor;
border: 1px solid $sidebar1BorderColor;
}

#.........2. (representando as demais sidebars)
#.........3. ( '' '' '' '' '' '')
}

#rightsidebar2-wrapper .widget {
margin: 0px 0px 4px 0px;
padding: 15px 15px 15px 15px;
background: $sidebar1bgColor;
border: 1px solid $sidebar1BorderColor;
}

essa eu coloquei abaixo da sequencia que sucede do mesmo modo como eu fiz com a de cima. (isto é: se vc quer colocar em baixo das duas laterais é, claro.. vai do seu gosto)

Mais embaixo você vai encontrar esta outra sequencia. veja:

/* sidebar heading ----- */

#sidebar1 h2, #sidebar2 h2, #sidebar3 h2, #sidebar4 h2 {
margin: -15px -15px 10px -15px;
padding: 4px 15px 2px 15px;
text-align: center;
color: $sidebar1HeaderColor;
font: $sidebarHeaderFont;
text-transform: none;
text-decoration: none;
background: $sidebar1HeaderBgColor;
border-bottom: 2px solid $sidebar1HeaderBorderColor;
}

no final dessa você acrescenta esta que é a nova, na mesma sequencia:

#rightsidebar2-wrapper h2 {
margin: -15px -15px 10px -15px;
padding: 4px 15px 2px 15px;
text-align: center;
color: $sidebar1HeaderColor;
font: $sidebarHeaderFont;
text-transform: none;
text-decoration: none;
background: $sidebar1HeaderBgColor;
border-bottom: 2px solid $sidebar1HeaderBorderColor;
}

e após a de cima, mais esta:

#sidebar1 a, #sidebar2 a, #sidebar3 a , #sidebar4 a, #rightsidebar2-wrapper a {
color: $sidebar1LinkColor;
text-decoration: none;
}
no caso, eu acrescentei a nova sidebar na sequencia das demais.... dá pra notar né que ela, a #rightsidebar2-wraper a { está lá na sequencia das demais..

e assim acrescente ela sucessivamente até findar as sequencias de todas as sidebars como está abaixo:

#sidebar1 a:hover, #sidebar2 a:hover, #sidebar3 a:hover, #sidebar4 a:hover, #rightsidebar2-wrapper a:houver {
text-decoration: none;
color: $sidebar1HoverLinkColor;
}

#sidebar1 a:visited, #sidebar2 a:visited, #sidebar3 a:visited, #sidebar4 a:visited, #rightsidebar2-wrapper a:visited {
text-decoration: none;
color: $sidebar1VisitedLinkColor;
}

.sidebar a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px solid $profileBorderColor;
}

fim das sidebars

/* ----- PROFILE ----- */

não deixe de visitar meu blog http://amigosemdebates.blogspot.com/ só pra ver como foi que ficou as colunas inseridas, lembrando que voce pode inserir quantas colunas quiser...

abraçoss...

JL Martinns disse...

quero ver meu comentário no blogs... rarsrsrss

BeRo disse...

Muito bom tutorial, me ajudou muito.

DADAUCHIP disse...

ola eu me chamo Adailton gostaria de uma ajuda com meu blog eu tentei adicionar emu coluna acima das duas colunas a direita do meu blog mais ñ conssigo se ra que vc ou qual quer um conssegue me ajudar veja com é meu blog
http://fiisbanners.blogspot.com/
muinto obrigado
ficarei muinto feliz se cosseguir ajuda
depois entro aqui para ver

Postar um comentário

Envie um comentário!

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates