Como adicionar 3 colunas no rodapé do blog | Quero Dicas


Como adicionar 3 colunas no rodapé do blog


 3 colunas no rodapé do blog
Seu blog está sem espaços para adicionar mais gadgets? ou o template que você criou ou baixou, não tem o footer adicionado no layout?  Sem problemas, hoje iremos resolver isso.

O Footer (rodapé) de um blog, é semelhante ao cabeçalho. Mas exatamente, o footer nos permite inserir o que nós precisamos ou queremos adicionar, mais não queremos muito destaque de imediato.

Sua principal finalidade é adicionar vários scripts para controlar os acessos ao blog, como por exemplo o Google Analytics, Google Webmaster Tools, etc ou até mesmo colocar um gadgets sobre o blog ou marcadores  e/ou link-me entre outros.

Acredito que você tenha entendido. Caso ainda não saiba do que falo, veja na imagem.

3 colunas no rodapé do Quero Dicas

Agora vamos ao tutorial.


   TUTORIAL

Eu sempre recomendo fazer um backup do seu template, ao instalar, qualquer tipo, de implementação de códigos dentro do HTML no blog e claro, dê preferências ao blogs de teste! Não sabe fazer Backup? Não tem problema, clique em: Como fazer um Backup ou restauração do seu blog.
Depois de fazer o backup do seu blog. Eu indico, retirar e salvar todos os gadgets e outros códigos que você tenha implantado. É melhor! Caso não tenha esta parte em seu template, tudo bem, pois iremos criar um. 

Criando 3 Colunas:

1 - Acesse o painel do blog que quer modificar (Blogger)

2 - Agora vá em "Modelo" e "Editar HTML"

3 - Procure pelo código abaixo:

 <div id='footer-wrapper'>
 

Você verá um código assim:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

4 - Substitua o código que deixei em "ROSA" acima,  pelo código abaixo:
 

<div id='footer-columna-contenedor'>

<div id='footer2' style='width: 33.3%; float: left; margin:0; text-align: left;padding:20px;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 33.3%; float: left; margin:0; text-align: left;padding:20px;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 33.3%; float: right; margin:0; text-align: left;padding:20px;'>

<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; 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 procure pelo código:

]]></b:skin>
 

6 - Guando achar, cole acima dele o código:

#footer-columna-contenedor {
clear:both; 
background-color: #263138;
width: 100%;
color: #fff;
}
.footer-columna {
padding: 20px;

}

7 - Agora, salve e visualize se deu tudo certinho.

Personalizando

• Troque a cor de fundo em "background-color: #263138;"
• Troque a cor da fonte em "color: #fff;"

• Caso você não queira a fonte em negrito, troque por "none" ou apague.

• Caso não queira trocar a cor do seu footer, retire :
background-color: #263138;

• Caso queira colocar uma imagem de fundo, troque:

background-color: #263138;
por
background: url ( 'IMAGEM' ) no-repeat;.

Mas para isso, você terá que saber o tamanho e a largura do seu footer.

Tabela de cores - Aqui

Criando crédito acima do Footer
Caso você não tenha em seu template este espaço, faça o seguinte:

1 - Acesse o painel do seu blog

2 - Vá em "Modelo" e "Editar HTML"

3 - Procure os créditos finais do seu template.
Normalmente, todos os créditos finais começam com "Copyright 2014", Veja o que aparece no seu.

Você irá encontrar, mais ou menos, assim o começo do seus créditos:

</div>
<footer id='credit' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
Copyright &#169; 2014 :  <a expr:href='data:blog.homepageUrl' expr:title


4 - Acima dessa </div> que deixei em destaque. Cole o código abaixo e salve:

<div id='footer-columna-contenedor'>

<div id='footer2' style='width: 33.3%; float: left; margin:0; text-align: left;padding:20px;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 33.3%; float: left; margin:0; text-align: left;padding:20px;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 33.3%; float: right; margin:0; text-align: left;padding:20px;'>

<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; 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>

 

É o mesmo que disponibilizei acima.
Caso dê algum erro, retire a  </div> do final do código acima e salve novamente.
5 - Agora procure por:

 ]]></b:skin>

6 - Acima dela, cole:
#footer-columna-contenedor {
clear:both; 
background-color: #263138;
width: 100%;
color: #fff;
}
.footer-columna {
padding: 20px;

}
 
Personalize como já mostrei acima e pronto. Você aprendeu Como adicionar 3 colunas no rodapé do blog

Ajudou? 
Beijinhos

COMPARTILHE :  

Comentários
0 Comentários


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por seu comentário e por sua presença!

Apenas peço que leia:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comente a vontade, deixe sua opinião, crítique, esclareça suas dúvidas e dê suas sugestões ou dicas sobre o assunto referente à postagem.


Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.