Tuesday, February 27, 2018
Como adicionar três colunas no footer Rodapé do blog Blogger
Como adicionar três colunas no footer Rodapé do blog Blogger
Se seu blog est� faltando espa�o para adicionar Gadgets, adicione mais espa�o no rodap� e deixe seu blog com mais Gadgets e mais bonito :-)
Advert�ncias:
Apague todos os Gadgets do rodap� "Footer" "Layout"->"Elementos da p�gina"
- � indicado salvar antes os Gadgets do rodap� do blog para que n�o ocorra perdas.
Salve os Gadgets antes de come�ar! N�o s� estou pedindo ;-)1.Acesse o painel do Blogger
2.V� em "Layout"->"Editar HTML" n�o marque a "Caixa Expandir Modelos de Widgets"
3.Procure pelo c�digo abaixo "Ctrl e F" :
<div id=footer-wrapper>
<b:section class=footer id=footer/>
</div>4.Substitua o c�digo em laranja por este abaixo:
<div id=footer-columna-contenedor>
<div id=footer2 style=width: 30%; float: left; margin:0; text-align: left;>
<b:section class=footer-column id=col1 preferred=yes style=float:left;/>
</div>
<div id=footer3 style=width: 40%; float: left; margin:0; text-align: left;>
<b:section class=footer-column id=col2 preferred=yes style=float:left;/>
</div>
<div id=footer4 style=width: 30%; float: right; margin:0; text-align: left;>
<b:section class=footer-column id=col3 preferred=yes style=float:right;/>
</div>
<div style=clear:both;/>
<div id=footer-bottom style=text-align: center; padding: 10px; text-transform: lowercase;>
<b:section class=footer id=col-bottom preferred=yes>
<b:widget id=Text20 locked=false title= type=Text/>
</b:section>
</div>
<div style=clear:both;/>
</div> 5. Agora vamos adicionar a CSS ao blog para que ela controle o espa�o entre as colunas, procure pelo c�digo abaixo:
]]></b:skin>6. Acima do c�digo anterior adicione o c�digo seguinte:
#footer-columna-contenedor {
clear:both;
}
.footer-columna {
padding: 10px;
}7. Salve as altera��es e vizualize.
A area de adi��o de Gadgets ("Layout"->"Elementos da p�gina") deve ficar como esta imagem abaixo:
