Primeiro, sendo no Blogger, vá no Painel, na opção Editar HTML e troque a linha:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">por esta:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Esta é nossa primeira alteração, sem ela, nossa div fixa não funcionará. Agora, vamos ao estilo css. Só esclarecendo, teremos duas divs. uma responsável para dar a transparencia e outra para exibir nossos textos.
O porque? Simples. Quando colocamos uma div no modo Alpha Opacity com CSS, todo o conteúdo que for colocado dentro da div também ficará Opacity, ou seja, transparente, então para que isso não aconteça, trabalharemos com duas divs, ficanos assim nosso CSS (coloque isso dentro das tags do seu HTML):
#rodape /*div 1 : responsavel pela transparecia*/
{
background-color:#f9f9f9;
width:100%;
position:fixed;
bottom:0px;
left:0px;
height:30px;
filter:Alpha(opacity=35);
opacity:0.4; /*correção para Mozilla, Opera, etc...*/
}
#rodape2 /*div 2 : responsável pelos textos e/ou conteudo*/
{
border-top: solid 1px #f1f1f1;
text-align:left;
width:100%;
position:fixed;
bottom:0px;
left:0px;
}
Após isso, basta colocarmos nossas div's no lugar certo. No final do HTML, antes das tags </body> e </html>, coloque assim :<div id='rodape'/> <div id='rodape2'> seus textos/conteudo aqui </div>OBS: Coloque essas duas divs abaixo de todas, deixando o final do seu HTML assim:
<div id='rodape'/> <div id='rodape2'> seus textos/conteudo aqui </div> </body> </html>Pronto. Basta salvar e conferir como ficou. Lembrando que se ela não aparecer na página, cooque algum texto qualquer dentro dela.
[ leia mais ]
