Pesquisar

MASIGNCLEAN101

Como :"Adicionar 3 colunas ao footer do Blogger "???

fonte e créditos:templateseacessorios

 

 

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. 

 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 ,
acima dele 
cole 
o próximo código :


/*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;
}



Salve!



"Clique e veja como ficou "




contato

Nome

E-mail *

Mensagem *

Translate