Pages

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:
tr�s colunas no footer

visit link download

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.