Feeds RSS
Feeds RSS

Adicionar colunas na sidebar

3 comentários

Como adicionar outra coluna ao sidebar (menu lateral do blog)
Eu costumo começar pelo Style então vamos lá:
1 - Primeiro passo, procure por:

#sidebar-wrapper {
float:right;...
ou talvez esteja apenas #sidebar

Logo abaixo destes códigos acima cole os novos.


#sidebar-duplo {width: 220px;
float: $endSide;
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 */
}
#coluna-left {
width: 48%;
float: left;
}
#coluna-right {
width: 48%;
float: right;
}

Dê estilo as duas colunas criadas:

#sidebar-duplo h2 {
background: #ECE0EC;
color: #000000;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
text-transform: uppercase;
margin: 0px 0px 5px 0px;
padding: 3px 0px 3px 10px;
border-bottom: 0px solid #CC0066;
}

#sidebar-duplo p {
padding: 0px 0px 0px 0px;
margin: 0px;
line-height: 20px;
}

#sidebar-duplo ul {
list-style: none;
margin:0 0 10px 0;
padding:0;
}

.sidebar-duplo ul li {
list-style: none;
margin: 0;
padding: 0;
border-bottom:1px dotted #DFDFDF;
padding: 0 0 4px 17px;
background: url("http://sites.google.com/site/newlecca/Home/past01.png?attredirects=0") no-repeat 0 2px;
}

.sidebar-duplo {
list-style-type: none;
margin: 0px;
padding: 0px;
}



2 - passo procure agora nos códigos, estes abaixo:

div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Quem sou eu' type='Profile'>
<b:includable id='main'>...

No final dos códigos desta sidebar cole os novos códigos abaxo.

<div id='sidebar-duplo'>
<b:section class='sidebar' id='coluna-left' showaddelement='yes'>
</b:section>
<b:section class='sidebar' id='coluna-right' showaddelement='yes'>
</b:section>
<div style='clear: both;'/>
</div>

Outra coisinha dê uma verificada no espaço da area total do seu template que que é a div:

#outer-wrapper {
font-family:arial;...

ou as vezes está assim, #wrap...


É logico que as medidas estarão de acordo com o tamanho do seu template.
Dica: para localizar melhor essas divs nos códigos, faço em um blog de teste deleto todas as gadgets dai fica fácil localizar as sessões.

3 comentários:

Guga disse...

Util o tutorial, obrigado, :D

Angellαh disse...

Não posso fazer isso em modelos XML ou XHTML? Tenho o template da Tinker Bell que você mesmo criou e tentei fazer isso mas não da certo.

Victória M. disse...

Oii o meu não sidebar - wrapper e entaõ não consigo achar me ajuda pf! www.triangleofame.blogspot.com

Postar um comentário

::Pessoal gosto de responder aos comentários, porém quando não houver identificação, não responderei a perguntas de anônimos::