30 de abr. de 2008

Adicionar 3 colunas ao footer do Blogger

Para colocar três colunas no footer do Blogger ( parte inferior do Blogger) como AQUI neste exemplo, a primeira coisa a fazer é retirar todo e qualquer widget que lá estiver. Não é preciso deletar, basta arrasta-los para a coluna lateral. Agora vá até o HTML do seu blog, clique em "Expandir modelos de widget"  e procure pelo código:


Esse hack se aplica ao antigo Blogger. Se vc abriu seu blog depois de junho de 2010 veja AQUI como voltar ao modelo antigo. Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.




</div> <!-- end content-wrapper -->


Agora que o encontrou, coloque este próximo código acima dele.





  <div id='footer-wrapper'>
<div id='footer-columna-contenedor'>
<div id='footer1' style='width: 32%; float: left; margin:0 2px; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'>
<b:widget id='Label5' locked='false' title='Marcadores' type='Label'/>
</b:section>
</div>
<div id='footer2' style='width: 34%; float: left; margin:0 5px 0 5px; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'>
<b:widget id='Label6' locked='false' title='Marcadores' type='Label'/>
</b:section>
</div>
<div id='footer3' style='width: 32%; float: right; margin: 0 2px; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'>
<b:widget id='Label7' locked='false' title='Marcadores' type='Label'/>
</b:section>
</div>
</div>
</div>
<div style='clear:both;'/>





Salve e procure por:

  ]]></b:skin>



E cole o próximo código acima dele. Salve


/*Colunas do footer-----------------------------------------*/
#footer-columna-contenedor {
width: 99%;
clear:both;
margin:0 auto;
}
.footer-columna {
padding: 8px;
margin:0 auto;
}
#col1 .widget, #col2 .widget, #col3 .widget{
background: #fff;
  border: 1px dashed $bordercolor;/*cor da borda*/
  color: $sidebartextcolor;/*cor da letra*/
  line-height: 1px;
  padding: 10px;
  margin:0 auto;
}

#col1 .widget-content, #col2 .widget-content, #col3  .widget-content {
border:3px solid #FFB90F;
border-top: none;
margin: 0 0 0;
padding:10px;
background: #fff;
}
#col1 h2, #col2 h2, #col3 h2{/*títulos*/
font-family: 'Wallpoet', arial, serif;
  font-weight: bold;
  background: #FFB90F;
  margin: 2px 0 0 0;
  padding: 20px 0px;
  text-align: center;
  float: center;
  font-size: 18px;
  color:$sidebartextcolor;/*cor da letra*/
  text-shadow:0 1px 0 #f9f9f9;
}

#col1 ul, #col2 ul, #col3 ul{
  list-style:none;
  margin:0 0 0 0;
  padding:6px  0 4px 0;
}

#col1 ul li a:link, #col2 ul li a:link, #col3 ul li a:link{/*link cinza*/
 background:#eee;
  color:#A2B8D7;/*cor da letra cinza claro*/
  border-bottom:1px dashed #ccc;/*borda cinza claro*/
  margin: 0 0 1px 0;
  padding: 15px 0 15px 14px;
  display:block;
}

#col1 ul li a:visited, #col2 ul li a:visited, #col3 ul li a:visited{ /*links visitados ciza escuro*/
background: #ccc;
  color:#808080;/*cor da letra cinza escuro*/
  border-bottom:1px dashed #808080;/*borda cinza escuro*/
  margin: 12px 0 1px 12px;
  padding: 10px 0 5px 14px;
  display:block;
}

#col1 ul li a:hover, #col2 ul li a:hover, #col3 ul li a:hover{
background: #808080;
  color: #5B79A3;
  border-bottom:1px dashed #5B79A3;
}






Clique e veja como ficou



19 comentários:

  1. Elkeeeeee..... help!!! Não ficou igualzinho ao seu não. As colunas ficaram logo abaixo da coluna das postagens aiiiiii - o que posso fazer para consertar isso? Bjks - Eve

    ResponderExcluir
  2. Olá!! eu fiz e ficou legal, mas somente ficou um espaço branco envolta que não sei como tirar...

    alguma ajuda?

    Blog Meio Aéreo

    ResponderExcluir
  3. Elke , em caso q naum tenha na template eu procuro qual nome ?

    ResponderExcluir
  4. Oloco, nem todas templates num tem #sidebar-wrapper { o que procuro ?

    ResponderExcluir
  5. Eveline, provavelmente o que vc não está vendo são os HTMLS que aí estão. Arraste para essa área o que quiser e salve. Um abraço

    ResponderExcluir
  6. Allmyr, procure #sidebar-content

    Um abraço

    ResponderExcluir
  7. Elke, o meu não ficou igual o seu té escrito texto no quadro que apareceu, o que eu faço?

    ResponderExcluir
  8. Elke o meu tbem não ficou igual o seu apareceu uma nova caixa sim nos elementos da pagina, mas na caixa esta escrito: TEXTO. Oque é isso?

    ResponderExcluir
  9. No meu HTML não tem o primeiro código, sendo assim, nem posso seguir os proximos passos.
    Existe outro que possa ser substituido para eu poder adicionar as colunas?

    ResponderExcluir
  10. Elke
    Fiz agora e deu certinho. Obrigada!Estou personalizando um Mínima, com os teus tutoriais e aprendendo aos poucos.
    Bjs e bom FDS!

    ResponderExcluir
  11. Simplesmente PERFEITO! Adorei... obrigada! Bjus...

    ResponderExcluir
  12. Deu certo! muuuito bom!

    ResponderExcluir
  13. cara funcionou! so nao ficou igual? ao que esta em teu blog!porque ficou em baixo da postagem e nao como esta no exemplo do teu blog !mais admito a dica foi boa .

    ResponderExcluir
  14. @brazucarte o que é necessário fazer é ajustar a largura (width) das colunas, entende ? Assim de forma que caiba em seu layout. Beijos

    ResponderExcluir
  15. Olá, não consigo posicionar essas colunas no rodapé do post, porque elas ficam bem baixo da postagem, pode me ajudar por favor?

    ResponderExcluir
  16. Parabéns pelo post, mim ajudou muito, fico muito grato, veja como ficou perfeito...
    http://sucodehumor.blogspot.com/

    ResponderExcluir
  17. Eu estava com um problema no meu footer, o template não deixava eu pôr as colunas, e este blog foi o único que conseguiu resolver o problema que eu não identifiquei ;) obrigada!

    ResponderExcluir
  18. Oi, Elke
    Meu template antigo eu consegui, deu tudo certinho. Editei um novo desde o início, mas com o modelo Travel, então não há "...>
    " ...há outra opção para o primeiro passo? Espero que possa me ajudar...Agradeço desde já!

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube