Saiba Como Colocar 05 (cinco) colunas no footer do blog

Saiba Como Colocar 05 (cinco) 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 acima 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.










#footer-columna-contenedor {clear:both;}
.footer-columna {padding: 10px;}
#col1{
background:#cccccc;
border: 2px solid
#000;
margin: 5px;
padding: 5px;
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 */}
#col1 h2{ background: 
#808080; font-size: 16px; text-align: center;}
#col2{
background:#cccccc;
border: 2px solid
#000;
margin: 5px;
padding: 5px;
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 */}
#col2 h2{ background:
#808080; font-size: 16px; text-align: center;}
#col3{
background:#cccccc;
border: 2px solid #000;

margin: 5px;
padding: 5px;
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 */}
#col3 h2{ background: 
#808080; font-size: 16px; text-align: center;}
#col4{
background:#cccccc;
border: 2px solid
#000;
margin: 5px;
padding: 5px;
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 */}
#col4 h2{ background: 
#808080; font-size: 16px; text-align: center;}
#col5{
background:#cccccc;
border: 2px solid
#000;
margin: 5px;
padding: 5px;
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 */}
#col5 h2{ background: 
#808080; font-size: 16px; text-align: center;}

*O código na cor azul
acima, representa a cor de fundo dos widgets e a vermelha a cor da borda. Cor em verde é a cor de fundo do título do widget. Você poderá modifaca-la ou se não quiser fundo, troque o código por: transparent

Agora procure pelo código


<div id='footer-wrapper'>


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

<div id='footer-columna-contenedor'>
<div id='footer1' style='width: 20%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div id='footer2' style='width: 20%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'>
</b:section>
</div>
<div id='footer3' style='width: 20%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div id='footer4' style='width: 20%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col4' preferred='yes' style='float:left;'>
</b:section>
</div>
<div id='footer5' style='width: 20%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col5' preferred='yes' style='float:left;'>
</b:section>
</div>
</div>



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




fonte e créditos:




Postar um comentário

0 Comentários