Imagem aleatória no cabeçalho do Blogspot
Quando publiquei o tutorial Como exibir uma descrição aleatória abaixo do título no Blogspot, prometi mostrar também como fazer o mesmo com imagens. Ou seja, como exibir uma imagem diferente no topo (ou cabeçalho) do Blogspot, a cada carregamento da página.
Para felicidade geral da nação, digo ao povo que exibir uma imagem aleatória no cabeçalho do Blogger é tão fácil quanto exibir uma descrição aleatória.
Antes de começar, a primeira coisa que você precisa fazer é checar no painel de controle do Blogger, dentro das opções de Elementos da página, se o seu template permite a inclusão de novos elementos no cabeçalho. Feito isso, vamos ao que interessa:
Como exibir uma imagem aleatória
no cabeçalho do Blogger
Prepare as imagens que pretende usar, elas devem ter exatamente o mesmo tamanho entre sí e a mesma largura total do seu template. Hospede-as e anote a URL de cada uma delas.
Nas opções de Elementos da página remova o cabeçalho original do seu template. Em seu lugar inclua um novo Gadget do tipo HTML / JavaScript com o conteúdo abaixo, adaptando as informações destacadas em vermelho conforme o caso:
<script language="JavaScript"> var quotes=new Array() quotes[0]='<a href="http://SEU_BLOG.blogspot.com"><img alt="NOME DO BLOG" src="http://URL_DA_IMAGEM1.jpg"/></a>' quotes[1]='<a href="http://SEU_BLOG.blogspot.com"><img alt="NOME DO BLOG" src="http://URL_DA_IMAGEM2.jpg"/></a>' quotes[2]='<a href="http://SEU_BLOG.blogspot.com"><img alt="NOME DO BLOG" src="http://URL_DA_IMAGEM3.jpg"/></a>' var whichquote=Math.floor(Math.random()*(quotes.length)) document.write(quotes[whichquote]) </script>Basicamente é isso... Imagem: knippo is waiting for MNC (^_^)
ÓTIMA POSTAGEM!
ResponderExcluirIREI UTILIZAR NO MEU PROXIMO TRABALHO!!
....
VALEU BRIGADÃO!
DiGO
Humm tô querendo mudar o template lá do blog e vou usar essa dica, valeu...
ResponderExcluirótimo final de semana.
Abraços
Com certeza esse artigo fez a felicidade de todos, pois tem uma grande utilidade, eu mesmo serei um dos que vão usar...
ResponderExcluirAbraços
Show!!! Isso vai me ajudar muito. Vlw!
ResponderExcluirEle só altera quando da refresh, certo?
ResponderExcluirVai ser uma grande utilidade pra mim, principalmente no meu blog.
Funcionou aqui, mas não ficou no mesmo lugar que o banner fixo. Algum modo de arrumar?
ResponderExcluirEu já havia conseguido um hack como esse uma vez. Mas acabei perdendo em uma daquelas formatações de emergência que vez ou outra se apresentam como necessárias.
ResponderExcluirJá tenho até algumas fotos selecionadas pra isso. :)
Essa dica é muito boa, eu sempre ví em fóruns, mas nunca soube como fazer, pena que não uso imagem no cabeçalho. =/
ResponderExcluirAbçs!
Valeu pela dica (post) e pelo comentário lá no 'Cultivando'. Beijos.
ResponderExcluirOi Compulsivo, passei aqui pra agradecer todas as dicas que você e a Juliana nos dão, pois graças a isso pude dar um "tapa" no meu blog, agora ficou bem bacana, aprendi e ainda estou aprendendo bastante com vocês. Grande abraço!
ResponderExcluirFaz tempo que estou procurando um tutorial desse...
ResponderExcluirVlw!
Compulsivo, cada vez mais me surpreendo com as dicas que posta. Já acompanho tudo pelo grupo do Google, mas confesso que seu blog é o sonho de consumo de todo blogueiro... Tudo bem, viajei, mas que suas dicas são uma maravilha, isso é verdade.
ResponderExcluirFaz um tempo que eu procura va por isso
ResponderExcluirValeu Compulsivo
Ótima postagem compulsivo. Muito bom mesmo.
ResponderExcluirAbraços,
Olá,
ResponderExcluirEsse hack tambem pode ser usado para inserir banners de outros sites.
Ex.: Se voce quiser indicar varios sites mas nao quer deixar o seu template feio basta usar esse hack para trocar de banner toda vez que o visitante acessar a pagina.
Abraços
@DicaCs, tem razão. Este código pode ser usado em qualquer lugar onde se queira alternar uma imagem e não só no cabeçalho...
ResponderExcluir[]'s
Compulsivo
Olá! Muito interessante! Eu estava atrás de imagens rotativas, pois eu gostaria de colocar banners de patrocinadores em meu blog... Muito Obrigado! Já coloquei até em meu blog... Abraços
ResponderExcluir.
ResponderExcluirMuito bom...
o q mais procuro são elementos personalizáveis q dão uma cara mais profissional ao meu blog. Essa dica é excelente.
vou tentar usar em breve, mas antes quero elaborar bem as imagens q vou usar.
Valeu pela ajuda!
Marcos Lemos
Compulsivo, excelente essa dica.
ResponderExcluirVou colocar com certeza no meu blog!!
Você como sempre arrazandooooooo nas dicas!!
Conheci sua cidade, simplesmente maravilhosaaaaaaaaaaaaaaaaaaaa!!!
Sucesso sempre!!
Abraços
Luka
Saberia dizer porque nada acontece quando tento configurar a cor de fundo do cabeçalho da página? Obrigado.
ResponderExcluir@Igor, Não.
ResponderExcluir[]'s
Compulsivo
Olá! Este artigo é muito útil, porém, não consegui remover o cabeçalho, pois não tem o botão "excluir". Você poderia me informar como removo? Obrigado.
ResponderExcluirJá usando em meu blog, como disse o Dicacs não somente no Topo mas onde for necessário :D
ResponderExcluirCompulsivo, coloquei no meu blog mas o tamanho fica incorreto, alguas vezes fica com o tamanho certo, mas outras fica um espaço a mais em branco, o que faço?
ResponderExcluirCompulsivo!
ResponderExcluirAdorei suas dicas, já fiz até algumas alterações (com sucesso) no blog do meu filho.
Agora, me tira uma dúvida: quero retirar a "barra verde" que está acima do banner do meu blog... não consigo! Help me please?
http://miguelayan.blogspot.com/
Obrigada!
Sorry @Cris, para serviço personalizado só mediante orçamento.Solicite através do formulário de contato de tiver interesse...
ResponderExcluir[]'s
Compulsivo
Otima dica compulsivo...
ResponderExcluirCompulsivo voce poderia fazer um post de como colocar parceiros aleatorios... tipo links e banner aleatorios de parceiros??
se puder cara vlw...
@Choujitops, use exatamente o mesmo script, porém com imagens menores. Inclua também os links, além das imagens, no código.
ResponderExcluir[]'s
Compulsivo
Cara, valeu, tava procurando por uma dica dessas faz tempo. Se soubesse que era tão fácil tinha colocado antes no meu blog.
ResponderExcluirEi compulsivo,
ResponderExcluirgostei da dica, mas qdo coloco ela... ela nao funciona, sabe dizer pq ?
- antes estava travado pra remover o cabeçalho, ai usei sua dica 'inclusão de novos elementos no cabeçalho.'
ai consegui remover.., dps abri um html coloquei o codigo, e nao aparece a figura...
qdo eu usei essa dica aqui, la embaixo...
http://usuariocompulsivo.blogspot.com/2007/01/imagens-no-topo-do-blogger.html
deu certo., mas como faço pra ela ficar alterando?
vlw compulsivo.
@AllFaiLz.N, proceda conforme o tutorial acima...
ResponderExcluir[]'s
Compulsivo
bom
ResponderExcluirMuito bom compulsivo, suas dicas valem ouro!
ResponderExcluirSei que pode ser pedir muito, mas quando eu coloco as imagens aleatórias com o nome do blog (no código html), o nome do blog continua clicável? (link de home ou inicio da página).
Dá pra fazer isso?
Cara meu temple não tem a opção de add Elementos da página para o cabeçario...ai gostari a de saber um codigo para instalar direto no html do blog...entende...
ResponderExcluir@Raposa, no post tem um link que mostra como permitir a inclusão de novos elementos no cabeçalho do seu template... Mas se você quiser também pode colar este código diretamente no seu template, creio que funcione...
ResponderExcluir[]'s
Compulsivo
Compulsivo, como faz para deixar códigos javascript aleatórios.
ResponderExcluirPor exemplo: Vamos supor que eu queira coloca no topo do meu blog banner do UOL e do buscape. Mas se eu utilizar esse seu código acima, não vai funcionar.
Sabe algum modo que funcione?
@jc, vc testou?
ResponderExcluir@Compulsivo, testei.
ResponderExcluirAcontece o seguinte, o banner aparece mas o resto do código depois dele aparece junto, ou seja, ele executa o banner dentro do array e não na saída (document.write).
Compulsivo, como faço para deixar as imagem sem link nenhum? Porque memso que no espaço para o link eu deixe sem nada ele fica a página inicial.
ResponderExcluirIrei UTILIZAR no meu blog
ResponderExcluirvo tentar usar o código de outra forma, para mostra um menu ^^
ResponderExcluirvlww pelo post!
muito bom!
Vlw ae kra.. e c eu quiser colokar + q 3 fotos como eu faço?
ResponderExcluirContinuo 3,4,5,6..?
Posso colokr qntas eu qro?
Vlw!
Oi compulsivo, tudo bem?
ResponderExcluirPrimeiro quero agradecer mais uma vez por este maravilhoso blog e com dicas ótimas, sempre!!
Agora eu tenho uma dúvida:
Eu já tinha usado esse código antes com sucesso. Mas no meu novo blog ele em algum banner dá um erro "undefined". já revisei o código, já revisei pra ver se todos os banners estão abrindo corretamente, e já tentei ver o código fonte, pra ver qual banner tá dando erro, mas só que não aparece a imagem, ou lista todos, lá em baixo nos widgets..
Aí a minha dúvida é: o número de imagens pode interferir? eu coloquei 107 imagens por enquanto... eu imagino que não, mas, não custa perguntar.
Se não for isso, o que eu posso mudar neste código para que ele não seja aleatório, mas siga uma ordem certa, assim eu onseguiria ver onde está esse erro.
Ou tem alguma outra ideia?
Abraço.
Camila.
Camila, infelizmente não tenho uma solução para o seu caso, a não ser diminuir bastante o número de imagens que você está usando...
ResponderExcluirP.S.: Adorei seu site e já sssinei os feeds ;-)
[]'s
Compulsivo
Oi Compulsivo, obrigado pela Resposta, vou tentar diminuir um pouco a quantidade de imagens.
ResponderExcluirAh, já corrigi os feeds, para completo. Não tinha visto que estava resumido, também não gosto de feed parcial.
Abraços!
Olá, nossa primeiro muito bom seu blog, já está nos meus parceiros :), bom esse Post é muito bom e útil mas queria saber como usar esse mesmo truque para imagens, por exemplo ao carregar o Site, cada vez ao entrar tem uma Imagen, diferente tem como? Um abraço! ;)
ResponderExcluirAssim, tipo no Gadget, tem como alterar as fotos quando carrega o site toda vez que entra tem uma imagem nova!
ResponderExcluirFeliz dia Do Amigo! :)
N consegui fazer oO
ResponderExcluirOlá , eu queria saber se tem como colocar esse codigo no html ?
ResponderExcluirUsei esse também no meu blog, que tá ficando bem legal graças as "dicas".
ResponderExcluirÓtimo trabalho, parabéns!
Massa ! O negócio é ter paciência pra criar vários cabeçalhos... :D
ResponderExcluirEu não tava querendo fazer isso no meu, mas vim aqui por curiosidade, mas acho que essas dicas vão acabar me ajudando a fazer algo que eu já pretendia faz um tempo: centralizar a imagem.
ResponderExcluirValeu! Gostei dos tutorias, tudo bem explicadinho.
Apesar de ser um pouco cansativo para aqueles que já entendem certas coisas, mas o importante é que todos aprendem.
Simplesmente perfeito.
ResponderExcluirParabens compulsivo.
Muito boa dica. Em breve estaria a utilizando.
ResponderExcluirAbraço e sucesso.
muito massa... parabéns mesmo!
ResponderExcluirmuito boa dica.
ResponderExcluirestou a dias procurando como fazer pra mudar a cor do template do blog a cada vez que a página é carregada.
um exemplo disso esta no site www.vivo.com.br
se puder ajudar, estarei muito agradecido.
otimo blog! parabéns.
Mto bom o pos eu estava a procura para por em meu blog!
ResponderExcluirEu não consigo remover o cabeçalho no meu blogger. Só aparece a opção Cancelar e Salvar quando clico em Editar.
ResponderExcluirComo eu faço para remover e no lugar colocar o elemento HTML/Javascript ?
@Siga as instruções do tutorial, ora bolas....
ResponderExcluir[]'s
Compulsivo
Aqui o abnner nao mudoui, só ficou o p´rimeiro
ResponderExcluirOla tenho uma duvida. Exemplo um site que tenha 10 patrocinadores, e eu disponibilize espaço de 5, ou seja, gostaria de saber como faço para exibir de 5 em 5 mais de forma randomica, e de forma tbm que nenhuma das 5 imagens seja repetidas sera que alguem poderia me ajudar?
ResponderExcluirMais uma vez o Compulsivo tornando meu blog cada vez melhor!!!
ResponderExcluirMuito obrigado!