Siga os 4 passos deste tutorial para adicionar 03 colunas ao rodapé do teu blog da plataforma blogger/blogspot. O resultado será semelhante ao da imagem.
Antes de fazer quaisquer modificações no seu blogger, é essencial que você faça o backup do seu modelo existente. Então, se você fizer quaisquer erros, ou decidir que não gostou do novo visual, você pode facilmente voltar ao layout anterior.Para fazer backup do seu modelo existente, vá para o Layout > Editar HTML. No seu Painel do Blogger, e clique em "Baixar modelo completo", link na parte superior da página. Você pode então salvar o seu modelo como um arquivo XML para o seu computador.
OBSERVAÇÃO: Não sou responsável por qualquer problema que ocorra com seu blogger durante o processo, usei o Layout Minima(o mais simples e sempre indicado nestes tutorais). Boa sorte.
Mova todos os widgets existentes da seção rodapé:Na seção de Layouts seu Painel do Blogger, mova todos os elementos que estão presentes em sua seção de rodapé para sua barra lateral ou qualquer outro ponto. Isto é apenas temporário, você pode movê-los novamente mais tarde quando tivermos terminado de adicionar a sua nova seção de rodapé. Mais importante, isso garante que você não perca estas widgets durante a modificação, e torna-se muito mais fácil para se completar.
Agora vamos a modificações no código do blogger.
Vá para Modelo > Editar HTML no seu Painel do Blogger, e não marque a caixa verificar o "Expandir modelos de widgets" (isso simplifica o processo).Agora você precisa encontrar esse código no seu modelo:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>Substitua toda a linha destacada em vermelho, com o código abaixo:
<!-- footer -->
<div id='footer-wrapper'>
<div class='footer-top' id='footer-top'>
<b:section class='footer' id='footer1' preferred='yes'/>
</div>
<div class='footer-column' id='footer-column-left' style='float:left;'>
<b:section class='footer' id='footer2' preferred='yes'/>
</div>
<div class='footer-column' id='footer-column-center' style='margin-left:5px;float:left;'>
<b:section class='footer' id='footer3' preferred='yes'/>
</div>
<div class='footer-column' id='footer-column-right' style='float:right;'>
<b:section class='footer' id='footer4' preferred='yes'/>
</div>
<div style='clear:both;'/>
<div class='footer-bottom' id='footer-bottom'>
<b:section class='footer' id='footer5' preferred='yes'/>
</div>
</div>
<!-- end footer -->
Adicionando estilo a nova seção de rodapé .Mais uma vez, abra a seção Editar HTML no seu Painel do Blogger. Desta vez encontre o código ]]></b:skin> , que é onde o estilo do seu modelo termina. Localize o seguinte trecho de código abaixo:
/* ------------ Footer ------------ */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}Obs: o código acima é do layout minima, sem modificações. Se o seu footer já foi modificado ignore o trecho acima.
Imediatamente antes do código ]]></b:skin>, adicione as seguintes linhas em substituição ao antigo código footer:
/* ------------ Footer ------------ */
#footer-wrapper {
background: #ffffff;
clear:both;
width:100%;
margin:0 auto 10px;
}
.footer-column {
text-align:left;
margin:0;
padding:0px;
width:33%; /* você pode substituir este valor em % por px */
}
#footer-top {
width:100%;
text-align:left;
word-wrap: break-word;
overflow: hidden;
}
#footer-bottom {
width:100%;
text-align:left;
word-wrap: break-word;
overflow: hidden;
}
#footer-wrapper h2 {
color: $sidebarcolor;
background-color: #ffffff;
font:$headerfont;
padding: .5em;
}
#footer-wrapper ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
#footer-wrapper li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
/* end css footer */Finish, espero que deva ter ocorrido tudo perfeitamente.
Agradecimentos ao UsuárioCompulsivo, adaptei os códigos a partir de seu template.
0 Comentários