Como adicionar 3 colunas no rodapé do blog | Quero Dicas | Tutoriais para seu blogs


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 (Header). Mas exatamente, o footer nos permite inserir o que nós precisamos ou queremos adicionar. Sua principal finalidade é de adicionar vários scripts para controlar os acessos ao blog, como por exemplo o Google Analytics, Google Webmaster Tools, etc. 

Acredito que você tenha entendido. Caso ainda não saiba do que falo, veja na imagem ou vá ao final do Quero Dicas e veja o que iremos criar e personalizar.

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"
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;"
Tabela de cores - Aqui
Caso você não queira a fonte em negrito, troque por "none" ou apague.

Caso não queira trocar a cor ou a imagem do seu footer já existente, retire background-color: #263138; ou até mesmo, queira colocar uma imagem de fundo, troque por background: url ( ' IMAGEM ' ) no-repeat;. Mas para isso, você terá que saber o tamanho e largura do seu footer.

Criando um Footer no Blog
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. 
O rodapé do seu blog agora está com 3 colunas. =D
Ajudou? Deixe seus comentários! Beijinhos
Me Contrate!


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

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 xingamentos entre outros, não serão publicados ou respondidos.

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

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

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