7 de ago. de 2009

Colocando 5 colunas no footer do blog


Se você tem tanto, mais tanto widget em seu blog que quer dar uma aliviadinha nas colunas laterais, você poderá colocar 5 colunas no footer do blog.

Para isso copie o código e cole acime de:
]]></b:skin>


Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.











/* 5 colunas Footer
----------------------------------------------- */
#colunasfooter{
margin:0px auto;
width:990px;
}

.areacolfot{
background:#222;
margin:0px auto;
}

h3.colfothead{
font-family:Yanone Kaffeesatz;
height:30px;
font-size:20px;
padding-left:30px;
padding-top:10px;
color:#DF9545;
text-transform:uppercase;
letter-spacing:2px;
}

.colfot{
float:left;
width:160px;
padding-bottom:30px;
font-size:12px;
list-style:none;
margin:20px 0px 0px 15px;
color:#ddd;
}

.colfot ul {
list-style-type: none;
margin:  0px;
padding: 0px 5px 5px 5px ;
}

.colfot li{
list-style-type: none;
margin: 0 ;
padding: 0;
border-bottom:1px solid #333;
text-decoration: none;
padding: 5px 0px 5px 5px;
display:block;
}

.colfot ul ul  {
list-style-type: none;
margin: 0;
padding: 0px 0px 0px 0px;
background-repeat:no-repeat;
}

.colfot ul li {
height:100%;
line-height:18px;
clear: left;
width: 190px;
list-style-type: none;
}

.colfot ul li a:link, .colfot ul li a:visited  {
color:#777;
}

.colfot ul li a:hover{
color: #ccc;
}




*O código na cor azul acima, representa a cor de fundo dos widgets .

Agora procure pelo código

<!-- end content-wrapper -->


e depois dele cole o próximo código:




    <div class='areacolfot'>

<div id='colunasfooter'>
<ul>

<div class='colfot'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
<b:widget id='Label2' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<div class='colfot'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
<b:widget id='Label3' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<div class='colfot'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
<b:widget id='Label4' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<div class='colfot'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
<b:widget id='Label5' locked='false' title='Labels' type='Label'/>
</b:section>
</div>


<div class='colfot'>
<b:section class='lowerbar' id='lowerbar5' preferred='yes'>
<b:widget id='Label6' locked='false' title='Labels' type='Label'/>
</b:section>
</div>


</ul>
<div class='clear'/>
</div>
</div>



Agora á até "Elementos de página, você verá as 5 colunas. Arraste para baixo os widgets ou então, coloque novos.

6 comentários:

  1. Tá faltando um {/div} no final do código.

    Muito boa a dica, realmente é necessário, deixa o blog mais "leve".

    ResponderExcluir
  2. Olá, gostaria de saber como faço para colocar apenas 1 coluna que pegue o espaço todo...obrigado!

    ResponderExcluir
  3. muito bom gostei do tutorial e me ajudou muito...

    Acessem: www.memes-ladroes.blogspot.com e divirtao-se

    ResponderExcluir
  4. Olá, gostaria de instalar este recurso mas "no meio" do blog, acho que seria em "middle adds wrapper", mas não tenho certeza. POderia me ajudar?
    Meu e-mail é georges.e.alves@gmail.com
    Obrigado

    ResponderExcluir
  5. nao consigo copiar os codigos...em mais de um post isso ta acontecendo. bjs

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube