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

1 – Cole estes códigos no seu style css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
/*------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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!--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 --> |
Muito Obrigado!!
Foi de grande ajuda!!
Execelente trabalho!parabéns pelo seu site 🙂