By Lecca – Letícia Pontes » Arquivo » Rodapé

Rodapé (footer) com 3 coluns para blogs e também para wordpress :

1 – Cole estes códigos no seu style css

/*------NOVOS CÓDIGOS DO FOOTER ( RODAPÉ) --*/
#footercolumns {
background-color:#FFE6F2; 
background-position:bottom; 
border:0px;
margin:10px 0px 0px 0px; 
padding:0px; clear:both; 
width:100%; 
height:181px; 
text-align:center;}
#footercolumns .block {
font-size: 11px;
float:left; width:30%; 
margin:0 0 0 2.5%; 
text-align:left;}
#footercolumns .first, 
* html #footercolumns .
first{

clear:both;

margin:0; 
text-align:justify;}

#footercolumns h3 {
font: normal 14px "Trebuchet MS", Tahoma, Arial;
color: #000;
margin: 20px 0px 2px;
border-bottom: 1px solid #000;
}

#footercolumns ul{
margin: 0;
padding: 0;
}
#footercolumns li{
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1px dashed #C27B3B;
padding: 0 0 4px 17px;
background: url(http://templatesbylecca.googlepages.com/folder.gif) no-repeat 0 2px;
}

a:footercolumns, a:visited {
color: #535151;
text-decoration: none;
}

a:hover {
color: #C734A3;
text-decoration: underline;
}
/*---------Fim dos códigos do rodapé-------------------*/

/*------NOVOS CÓDIGOS DO FOOTER ( RODAPÉ) --*/

#footercolumns {

background-color:#FFE6F2;

background-position:bottom;

border:0px;

margin:10px 0px 0px 0px;

padding:0px; clear:both;

width:100%;

height:181px;

text-align:center;}

#footercolumns .block {

font-size: 11px;

float:left; width:30%;

margin:0 0 0 2.5%;

text-align:left;}

#footercolumns .first,

* html #footercolumns .

first{

clear:both;

margin:0;

text-align:justify;}

#footercolumns h3 {

font: normal 14px "Trebuchet MS", Tahoma, Arial;

color: #000;

margin: 20px 0px 2px;

border-bottom: 1px solid #000;

}

#footercolumns ul{

margin: 0;

padding: 0;

}

#footercolumns li{

list-style: none;

margin: 0;

padding: 0;

border-bottom: 1px dashed #C27B3B;

padding: 0 0 4px 17px;

background: url(http://templatesbylecca.googlepages.com/folder.gif) no-repeat 0 2px;

}

a:footercolumns, a:visited {

color: #535151;

text-decoration: none;

}

a:hover {

color: #C734A3;

text-decoration: underline;

}

/*---------Fim dos códigos do rodapé-------------------*/

Abaixo do < div id=”footer” > cole os seguintes códigos para as colunas aparecererem, ai é só usar de criatividade, estes códigos esta configurado como a imagem acima:

<!--INICIO DOS CODIGOS FOOTER 3 COLUNAS -->
<div id="footercolumns">
<div class="inside">
<div class="block first">
<h3>1º coluna</h3>
<ul>
<li>texto 1</li>
<li>mais </li>
<li>outro </li>
</ul>
</div>
<div class="block">
<h3>2º coluna</h3>
<ul>
<li>texto 1</li>
<li>mais um</li>
<li>outro </li>
</ul>
</div>
<div class="block">
<h3>3º coluna</h3>
<ul>
<li><a href='http://http://templatesbylecca.blogspot.com'>by lecca</a></li>
<li><a href='http://http://templatesbylecca.blogspot.com'>by lecca</a></li>
<li><a href='http://http://templatesbylecca.blogspot.com'>by lecca</a></li>
</ul>
</div>
</div>
<br clear="all" />
<!--FIM DOS CODIGOS FOOTER 3 COLUNAS -->

<h3>1º coluna</h3>

<ul>

<li>texto 1</li>

<li>outro </li>

</ul>

</div>

<h3>2º coluna</h3>

<ul>

<li>texto 1</li>

<li>outro </li>

</ul>

</div>

<h3>3º coluna</h3>

<ul>

<li><a href='http://http://templatesbylecca.blogspot.com'>by lecca</a></li>

</ul>

</div>

Vídeo: Diário da ortognática – Pós-opertatório

Receita: Ratatouille

Dica de série: Unbreakable Kimmy Schmidt

Comprei na china: Pincéis de maquiagem

Rodapé – footer para blogs (wordpress)

Comentar

Comentários