terça-feira, 21 de outubro de 2008

Banner Rotativo



 
 

Enviado para você por Penha através do Google Reader:

 
 

via Dicas para Blogs de Fabiano Roberto em 19/10/08

Para fazer aparecer banners diferentes cada vez que o blog é exibido, você terá um pouco de trabalho, não com o código pois esse é simples mas para ocultar o titulo do blog exibido normalmente e caso no seu modelo não apareça adicionar gadget entre o cabeçalho e as postagens.

Primeiro passo precisamos ocultar o título do blog. Então procure na página editar HTML por algo parecido com o trecho abaixo, não será igual porque cada blog tem a próprio estilo do titulo, mas o importante é #header h1:

#header h1 {
text-align: left;
font-size: 200%;
color: $pageHeaderColor;
margin: 0;
padding: 15px 20px 0 20px;
}


E coloque isso display: none; (inclusive o ponto e vírgula) entre as chaves { }, não importa em qual linha, mas tem que ser dentro das chaves. E clique para salvar.
Isso faz ocultar o título do blog, você não precisa mudar mais nada, ele só vai ocultar, caso resolva mostrar novamente o título basta retirar essa linha que colocamos agora.

Agora veja na pagina layout se aparece o quadro adicionar gadget entre o cabeçalho e as postagens, pois será lá que iremos colocar o código do banner rotativo caso não esteja visível, veja nossa explicação de como fazer isso aparecer essa postagem fala em adicionar elemento de página, pois quando fui publicada era assim que os gadgets eram chamados no blogspot, mas a explicação funciona normalmente. Outra coisa se usar uma imagem no titulo precisa tirar clicando para editar o cabeçalho. Depois disso clique para adicionar um gadget embaixo do cabeçalho, na página que aparece escolha a opção HTML/javascritp e cole o código abaixo:

<script language="JavaScript">
hoje = new Date()
numero_de_imagens = 5
segundos = hoje.getSeconds()
numero = segundos % numero_de_imagens
if (numero == 0){
banner = "URL DA IMAGEM"
}
if (numero == 1){
banner = "URL DA IMAGEM"
}
if (numero == 2){
banner = "URL DA IMAGEM"
}
if (numero == 3){
banner = "URL DA IMAGEM"
}
if (numero == 4){
banner = "URL DA IMAGEM"
}
document.write('<div align="center"><img src="' + banner + '" border=0></div>')
</script>

E já está pronto, mas não se esqueça de colocar os endereços corretos das imagens no código, para alterar esse código aqui tem explicado como alterar o código e adicionar imagens, nessa explicação está dizendo sobre colocar frases, mas o código é idêntico a este que usamos aqui para imagens.

 
 

Coisas que você pode fazer a partir daqui:

 
 
TwitThis
Share |

3 comentários:

Daniela Siqueira disse...

Penha, há muito tempo procuro por essa informação de ocultar o título do blog! Fui à vários blogs famosos por seus tutoriais e em nenhum eu achei uma resposta tão clara, objetiva e principalmente que funcionasse. Obrigada! Vou dar a dica no meu blog e com link para esse seu post, ok!

RitaDiedoviec disse...

oi Penha, me diz uma coisa, por acaso tu sabe como tirar akela NavBar dos blogs do blogspot???
obrigada!!!
consegui tirar o titulo do meu acompanhando teu PAP!
abraços, Rita
ritadiedoviec@hotmail.com

Unknown disse...

Oi Rita

Que bom que gostou e agradeço vou tentar e depois te digo se consegi ou não ok beijosss

Att

Penha

;

Pesquisa na WEB

assine o feed

siga no Twitter

Postagens

acompanhe

Comentários

comente também