Eu costumo começar pelo Style então vamos lá:
1 - Primeiro passo, procure por:
#sidebar-wrapper {
float:right;...
ou talvez esteja apenas #sidebar
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;
}
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'>...
<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>
<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:
Util o tutorial, obrigado, :D
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.
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::