Uma boa maneira melhorar seu blog é fazendo parcerias, mas às vezes colocar muitos banners na pagina inicial do blog fica pesado demais, faz demorar muito para carregar, uma boa alternativa é usar um código que mostra banners aleatoriamente, o script para fazer isso é assim:
<script language="JavaScript">
hoje = new Date()
numero_de_imagens = 3
segundos = hoje.getMilliseconds()
numero = segundos % numero_de_imagens
if (numero == 0){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
if (numero == 1){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
if (numero == 2){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
document.write('<p align="center"><a href="' + site +'"target="_blank"><img src="' +imagem + '"border="0"><a></p>')</script>
Você só precisa colocar os links e endereços das imagens nos lugares indicados. Para aumentar o numero de opções, copie e cole esse trecho da ultima opção e cole logo abaixo dela, apenas continuando a contagem, ou seja, troque o numero 2 por 3, 4, 5 e assim por diante para quantos banners quiser usar. Depois que terminar de colocar os banners veja nesta linha:
numero_de_imagens = 3
O numero 3 que está aqui é o numero de opções, quer dizer uma a mais que o numero do ultimo banner, afinal começamos a contagem do 0, então se o ultimo banner das opções for numero 10, coloque 11 no lugar do 3. Por exemplo se fosse colocar 8 banners com links neste código, ele ficaria assim:
<script language="JavaScript">
hoje = new Date()
numero_de_imagens = 8
segundos = hoje.getMilliseconds()
numero = segundos % numero_de_imagens
if (numero == 0){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
if (numero == 1){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
if (numero == 2){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
if (numero == 3){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
if (numero == 4){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
if (numero == 5){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
if (numero == 6){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
if (numero == 7){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
document.write('<p align="center"><a href="' + site +'"target="_blank"><img src="' +imagem + '"border="0"><a></p>')</script>
Tenha muito cuidado com os números, pois se repetir algum nas opções de banner ou não modificar o numero total o código não funcionará corretamente. Depois de pronto coloque esse código pela página layout, adicionar gadget, html/javascript e cole o código, e já está pronto, cada vez que alguém visitar seu blog irá ver um banner diferente sorteado aleatóriamente. Veja também como colocar imagens normais(sem link) ou frases aleatórias no blog.
Excelente recurso e irei começar a usá-lo no meu site mentalidade.com. Mentalidade
ResponderExcluirGostei desta ideia, mas tenho uma pergunta: existe como colocar de maneira que apareçam 3 ou 4 imagens de cada vez em lugar de só uma?
ResponderExcluirExplicando: no meu blogue eu tenho uma secção que vinha no actual template para colocar manualmente imagens de posts anteriores, está preparado para colocar 4 posts mas e se eu quisesse implementar este script no lugar, seria possível de fazer aparecer mais que uma imagem de cada vez?
Até agora nunca pensei muito em parcerias, mas talvez não seja má ideia. ;)
Abraço. :)
OCP
ResponderExcluiraté vou procurar um código assim, já achei um mas ele não funciona no blogspot
Eu uso o código...coloco a imagem e a url mais....a url aparece como texto...não redireciona ...tem como ajudar?
ResponderExcluirtente colocar novamente o código, veja se os endereços estão completos com http://
ResponderExcluirjá testei e funcionou normalmente.
AKI APARECE ASSIM SOMENTE O LINK DA FOTO MAS A FOTO NAUM APARECE!
ResponderExcluirrafael, talvez o endereço da imagem que está colocando esteja errado
ResponderExcluirTem um pequeno erro no codigo a parte ali no final tem q fica assim
ResponderExcluirimg border="0" src="' +imagem + '"
fiz a correção, obrigado por avisar
ResponderExcluirPerfeito por aqui!
ResponderExcluirOlá Fabiano queria saber brother se tem como muda o tempo de exibição de cada banner,eu coloquei em meu blog mais nao ta fazendo a troca dos banners.E Tbm essa ideia do nosso parceiro ai de coloca mais imagens pra aparecer de uma so vez é interesante aguardo resposta,abç...
ResponderExcluirta ai meu blog http://marilax.blogspot.com
vou procurar um código que mostre todos os banners.
ResponderExcluirMuito bom, parabens! me audou bastante ! http://euqueropromocao.blogspot.com/
ResponderExcluirMuito legal!
ResponderExcluirEu já estava querendo saber como fazer isso e minha dúvida está respondida ;D Obg!
E dá uma passadinha no meu blog sobre Club Penguin,
www.mundodepinguins.com
Olá Fabio.
ResponderExcluirEu tentei usar este codigo em meu blog, mas infelizmente não está aparecendo nem a imagem e muito menos link algum. fica um espaço como se não houvesse nada.
*Seria o tamanho da imagem?
*O que pode ser?
Olá Fabio.
ResponderExcluirEstou tendo um problema com este codigo.
Fiz tudo direitinho como você diz no post, mas infelizmente não aparece absolutamente nada no gadget, nem a imagem nem o link.
Seria o tamanho da imagem?
O que pode está acontecendo?
Matheus Santana
ResponderExcluirtestei o código e está funcionando, talvez você usou o endereço errada das imagens ou apagou algo no código as aspas fazem parte do código.
Cara a imagem aparece , somente a primeira , mas ela nao muda ! Não sei porqe , tem como configurar os segundos ? Ou algo do tipo ?
ResponderExcluirFelipe
ResponderExcluirprecisa colocar uma imagem diferente em cada linha, claro que quanto menos opções tiver maior será a chance de repetir as imagens cada vez que o blog é carregado.
CAra que inveja eu fiz mas nao apareceu nada, pode me ajudar?
ResponderExcluirAnônimo, veja aqui sobre as imagens
ResponderExcluirImagem não aparece
Alo amigo, obrigado pela sua reposta cara, mas acho que o problema nao é iamgem, acho que o problema é meu blog memso, porque não funciona o seu codigo aqui no meu, nao quero fazer porpaganda, mas de uma olhada no meu blog
ResponderExcluirhttp://manualdoclicker.blogspot.com
Abaixo das noticias existe banner rotativo, mas acima do SLIDE, bem no alto, no headre não aparece banner nenhum, só se eu por um banner normal como o que está lá, mas rotativo não funcioan...
Desculpe o texto grande.
Abraço.
Manual do Clicker
ResponderExcluirsempre usei esse código e funciona perfeitamente, envie o código do jeito que tentou colocar para meu email(veja no menu ao lado) e vou procurar onde está o erro.
Fiz tudo certinho, apareceu a imagem mas ela não muda de jeito algum, fica estática.
ResponderExcluirO que aconteceu?
Já vi e revi os erros e não nenhum...
Obrigada!
Garota Antenada
ResponderExcluircolocou imagens diferentes no códigos, veja se alterou o numero de imagens no inicio do código, se quiser envie o código para meu email e vou procurar o erro.
Você pode me dizer como eu faço para mostrar mais de 1 imagem? Como uso o código para muitas imagens, a exposicao de apenas 1 nao é suficiente...gostaria de no minimo 2 ou 3 por vez...
ResponderExcluirobrigada
NÃO CONSEGUIR,NÃO APARECEU A IMAGEM.ENTÃO O QUE É O ENDEREÇO DA IMAGEM E A URL DO SITE?
ResponderExcluirendereço da imagem é o lugar onde hospedou a imagem, veja aqui Miniaturas das Imagens não aparecem
ResponderExcluirurl do site é o endereço do seu blog
como fasso imagem aletoria no cabeçalho do blog?
ResponderExcluirvocê tem que usar o código que publicamos nesta postagem e colocar esse gadget embaixo do titulo do seu blog.
ResponderExcluirentão pode usar uma fonte pequena no titulo assim a imagem aleatória ficará com mais destaque servindo de titulo do blog
bgadão :D estou adorando o site
ResponderExcluirAí Fabiano Roberto As imagens que eu hospedei no www.imageshack.us estão todas certas: Url Exemplo: http://img406.imageshack.us/i/Exemplo.png/, e nenhuma das 4 imagens aparecem, apenas os links que aparecem, mas as imagens nenhumas fica apenas 1 quadradinho com url, se souber responder oque é isso, vou linkar vc ;). http://gamesofkeyboards.blogspot.com/.
ResponderExcluirNauan
ResponderExcluirveja aqui sobre Imagem que não aparece
Sim tudo bem, agora ainda não entendi este código.
ResponderExcluirDevo mecher alguma coisa aqui??
document.write(' < p align = " center " >< a href= " ' + site +' " target="_blank"> < img src=" ' +imagem + '" border = " 0 " > < a > < / p > ' ).
E as imagens devo apenas colocar só o link? ou preciso colocar as tags < img scr=' http://img406.imageshack.us/i/Exemplo.png ' / >
???
if (numero == 7){
< -- Devo colocar aqui? --> imagem= " http://img406.imageshack.us/i/Exemplo.png/ "
site="URL DO SITE"
}
Tem como explicar por favor, gostei muito deste código, o usuariocompulsivo usava um desse e procurava tanto este código e agora que achei não estou consiguindo colocar.
pode ser colocar a barra no final do link da imagem que faz o código não funcionar
ResponderExcluirDiscubri EUREKA! O código não pegava porque eu sou burro, kkkkk..., copíei os links errados. Vlw msm aí Fabiano.
ResponderExcluirOlá!
ResponderExcluirÉ possível definir tempo de exbibição de cada imagem diferentemente, ou só tem como definir um tempo para todas?
Não conheço muito de Javascript, se tiver como, tem como me passar o código? :)
Obrigada!
Karen Costa
ResponderExcluiresse código não usa tempo, ele sortea uma das imagens cada vez que sua pagina é carregada
Muito Bom. www.blogdobiel.vai.la
ResponderExcluirnão uso o Blogger, tenho que colocar manualmente no código HTML do meu site, mas em que lugar do código eu coloco ?
ResponderExcluirCarla Alves Castelamare
ResponderExcluirsim. esse código funciona perfeitamente em sites...
mas sobre onde colocar depende de como faz para editar suas paginas(qual programa usa)... mas pode ser diretamente no html da pagina
Ola...
ResponderExcluirSeria possível usar esse código no EDITAR HTML do blog para que os banners aparecessem dentro de todas as postagens? e que fossem mostrados apenas nas páginas individuais?
Emerson
ResponderExcluirveja esse tutorial: Conteúdo diferente nas paginas do blog
lá mostra como fazer um gadget aparecer somente nas paginas individuais, então pode usar esse código dos banners em um gadget de html/javascript e usar o outro código para deixar somente nas paginas das postagens
Li o outro tutorial, mas ainda assim não consegui usar esse código no Editar HTML. qdo vou salvar ou visualizar da erro.
ResponderExcluirSerá que vou ser preciso inserir o código em cada uma das postagens?
deve ter apagado alguma letra ou sinal por engano, por exemplo aspas ou < > /
ResponderExcluirMuito legal,
ResponderExcluirVou testar no nosso Blog, é um dos recursos que precisamos.
Conforme falado, este código escolhe aleatoriamente (em função do momento que o blog é acessado) um imagem e ela é exibida. As imagens trocam cada vez que se recarrega a página.
Para exibir mais de uma imagem me parece que basta repetir o código no final, fazendo vários document.write.
Outra idéia interessante é, em vez de usar os segundos da data para sortear a imagem, usar o dia, ou dia/mês, e então teríamos algo como a imagem do dia no Blog. Também vou testar esta ideia.
Abraços!
Carlos Henrique
ResponderExcluirsua idéia é interessante, certamente se alterar o código usando como base os dias e colocar 30 opções ele exibirá uma diferente por dia...
só precisaria trocar no código esse linha:
segundos = hoje.getMilliseconds()
por:
segundos = hoje.getDay()
a palavra segundos não há necessidade de alterar pois é um nome de variavel...
testando comenario kkkkkkkkkkkkkkkkkkkk
ResponderExcluirLegal! funcionou beleza.
ResponderExcluirSó por causa desta postagem vou inserir um link para esse site no meu blog. http://nemersia.blogspot.com
ResponderExcluirBem Legal coloquei no meu site www stihl master.com e ficou beleza nos banner dos parceiros coloquei Destaque do Dia troquei a palavrasegundos = hoje.getMilliseconds()
ResponderExcluirpor:
segundos = hoje.getDay()
e nos banner pequenos 50x50 coloque para mudar quando carega a pagina fuciona perfeitamente quem quizer comferir como fica visitem o site.
Fabiano, estamos de volta aqui!
ResponderExcluirComo sempre, achamos o que procurávamos. Só uma dúvida: queríamos fazer exatamente isso, mas definindo o tamanho da imagem, colocando um título e uma pequena descrição. É possível?
Abraços, contamos com você!
@Eu Amo Cães...
ResponderExcluirno trecho <img width="120" height="60" src="....
você poderia colocar qualquer valor e fazer a imagem aparecer neste tamanho, mas provalemente perderá qualidade da imagem dependendo do tamanho original, por exemplo se transformar uma imagem quadrada em retangulo ela ficar com uma qualidade ruim
muito bom, esse tutorial salvou a minha vida, aproveitando, visitem esse blog ai galera tem muito mais>
ResponderExcluirhttp://portaldomundoteck.blogspot.com/
Olá, Fabiano!
ResponderExcluirMais uma vez, encontrei aqui no Dicas para Blogs o código exato que eu precisava! Ficou perfeito para fazer a publicação de banners solicitados por um anunciante.
Obrigado por compartilhar!
Um abraço!
Adelson (Gerenciando Blog)
ResponderExcluirrealmente esses códigos que são simples ajudam muito.
Olá amigo coloquei em meu blogger mas fica aparecendo a chavinha de edição mesmo eu estando deslogado, oq poderia ser? Obrigado..
ResponderExcluiresse código não muda o tamanho das imagens, por isso elas aparecem diferentes
ResponderExcluiré assim, ótimo post, mas eu fiz tudo como deve ser, no blogger dá, mas no weebly quando chego ás 601 imagens fica estupido, sabem me resolver?
ResponderExcluiracho que não tem como resolver isso para tantas imagens
ResponderExcluirPessoal, tem como fazer para trocar as imagens em um determinado tempo? Tipo... de 5 em 5 segundos?
ResponderExcluirQuem souber ajuda aí.
Obrigado!!
vou procurar um código que as imagens alterem com tempo marcado e assim que conseguir vou fazer um tutorial sobre isso
ResponderExcluirEstarei aguardando essa promessa↑
ResponderExcluirGostaria de colocar uma do lado da outra, e cada um com imagens diferente, como faço?
ResponderExcluirAnonimo veja aqui Organizar Banners ou Pagina de Parcerias entre Blogs
ResponderExcluirVou utilizar na minha loja virtual! Ótima Dica!!
ResponderExcluirFuncionou muito bem, gostei bastante dessa opção
ResponderExcluirmuito bom
ResponderExcluirLegal! funcionou beleza.
ResponderExcluirMuito bom... mas eu queriia saber como eu faço uma lista como por exemplo, só de depoimentos... Tem como ?
ResponderExcluirBruna Rafaela
ResponderExcluiraltere a linha final do código desta forma:
document.write('<p align="center"><a href="' + site +'"target="_blank">' +imagem + '<a></p>')</script>
e no código onde está escrito ENDEREÇO DA IMAGEM coloque o texto
Ola gostaria de saber se ja encontrou algum codigo pra mostrar mais de uma imagem que funcione no blogspot
ResponderExcluirvou publicar logo sobre imagens aleatórias..
ResponderExcluirboa meu irmão. isso aí, parabéns conseguir fazer.
ResponderExcluirhttp://infortenda.blogspot.com.br/
Está tudo OK e funcionando, porém, não há meios de eu arrancar a chavinha no canto inferior esquerdo de todos os banners. Isso já tá me tirando o sono. Se puder me ajudar, estou desesperado, já tenho publicidade vendida e um cliente não quer a chavinha. Meu blog é www.revistapulpito.com.br. Muito obrigado, renato. Se puder me mandar por email, me comprometo inclusive a te pagar, porque estou desesperado. Valeu.
ResponderExcluirchavinha? está falando desta imagem: http://img1.blogblog.com/img/icon18_wrench_allbkg.png
ExcluirJá tentou excluir o gadget e adicionar novamente? Se não deu certo entre no html do seu blog procure e apague a linha:
<b:include name='quickedit'/>
mas somente deste gadget que está com problema, sugiro que coloque um titulo no gadget para ficar mais fácil de achar.
Olá Fabiano,
ResponderExcluirTutorial muito muito bom! me ajudou muito, Obrigado!
como limitar o tamanho da imagem?
ResponderExcluirno trecho do código onde tem "border="0" >< a > voce pode adicionar o tamanho da imagem: height="200" width="300"
ResponderExcluirentão fica deste jeito:
"border="0" height="200" width="300" >< a >
mas isso vai definir o tamanho de todas as imagens. Seria melhor usar as imagens já no tamanho correto pois apesar da imagem aparecer no tamanho que você escolher usando este código a imagem vai ficar com uma aparencia de baixa qualidade dependendo do tamanho orginal de cada imagem.
300 é a largura da imagem
200 é a altura da imagem