Código para Mostrar Frases ou Imagens Aleatórias no Blog

Código para criar um gadget no blog com frases ou imagens aleatórias. Você poderá escolher quantas imagens ou frases desejar e elas aparecem no blog de forma aleatória e este código permite escolher quantas imagens aparecem de uma lista de opções que você mesmo criou.


Imagens Aleatórias no Blog

Entre na pagina layout > adicionar gadget > html/javascript e coloque esse código:
<script language="javascript">
var imagens = new Array();
imagens[0]="imagem1.jpg";
imagens[1]="imagem2.jpg";
imagens[2]="imagem3.jpg";
imagens[3]="imagem4.jpg";
imagens[4]="imagem5.jpg";
imagens[5]="imagem6.jpg";
imagens[6]="imagem7.jpg";
imagens[7]="imagem8.jpg";
imagens[8]="imagem9.jpg";
imagens[9]="imagem10.jpg";
var imgLink = new Array();
imgLink[0]="link1.html";
imgLink[1]="link2.html";
imgLink[2]="link3.html";
imgLink[3]="link4.html";
imgLink[4]="link5.html";
imgLink[5]="link6.html";
imgLink[6]="link7.html";
imgLink[7]="link8.html";
imgLink[8]="link9.html";
imgLink[9]="link10.html";
var preBuffer = new Array();
for(i=0; i<imagens.length; i++) {
preBuffer = new Image();
preBuffer.src = imagens;
}
function criaBannerTopo(qtdImagens) {
for(i=0; i<qtdImagens; i++) {
indImg = Math.round(Math.random()*(imagens.length - 1));
indLin = indImg;
banner = imagens[indImg];
site=imgLink[indLin];
del = imagens.splice(indImg,1);
del = imgLink.splice(indLin,1);
document.write('<a href="'+site+'"title="Clique para Ampliar"target="_top"><img src="' + banner + '"></a>');
}
}
criaBannerTopo(4);
</script>

Personalizar o Gadget de Imagens Aleatórias


Você pode alterar o numero de opções exibidas no blog modificando o numero 4 que aparece nesta linha:

Para mudar a quantidade de opções da sua lista você deve alterar dois trechos do código um com os links e outro com os endereços das imagens, veja abaixo:

Endereço das Imagens
imagens[0]="imagem1.jpg";
imagens[1]="imagem2.jpg";
imagens[2]="imagem3.jpg";
.......

Link das Imagens
imgLink[0]="link1.html";
imgLink[1]="link2.html";
imgLink[2]="link3.html";
.....

Note que a numeração dentro do colchete é uma ordem: [0], [1], [2], .... então em ambos os casos (links e imagens) só precisa continuar a numeração para colocar mais opções ou apagar algumas delas para retirar, mas como falamos atenção com essa numeração para evitar erros.

Tenha cuidado na hora de fazer alterações para não colocar links em imagens erradas, por exemplo o link da imagem imagens[6]="imagem7.jpg"; é imgLink[6]="link7.html";. Veja algumas dicas sobre outros erros comuns:
Imagem não aparece no Blog ou Site
Criar, Colocar e Proteger Imagens no seu Blog
Erros e Duvidas Comuns sobre Blog - Ajuda para Blogueiros

Mostrar Frases Aleatórias no Blog

Exibir frases aleatórias com link pode servir para criar uma lista de postagens ou qualquer outra coisa que deseje divulgar. Para fazer essa alteração vamos mexer somente em uma linha do código. Apague essa linha:

document.write('<a href="'+site+'"title="Clique para Ampliar"target="_top"><img src="' + banner + '"></a>');

E coloque essa outra no mesmo lugar:

document.write('<a href="'+site+'"title="Clique para Ampliar"target="_top">' + banner + '</a>');

Agora na parte do código onde tem as imagens: imagens[0]="imagem1.jpg"; imagens[1]="imagem2.jpg"; e assim por diante só precisa trocar pelo texto que desejar, por exemplo:
imagens[0]="bom dia";
imagens[1]="boa noite";

As outras partes do código como links e quantidade de opções mostradas o funcionamento é o mesmo que já mostramos para as imagens. Veja também:
Gadget de Posts Aleatórios com Imagens no Blogger
Gadget ou Pagina com Postagens Aleatórias e Miniatura das Imagens
Colocar Gadget com Slides das Postagens Recentes do Blog

Esse código permite varias aplicações para criar gadgets com todo tipo de lista aleatória no seu blog então além destas sugestões que mostramos certamente você poderá encontrar outras utilidades para aproveitar melhor esse código.

Veja abaixo a demonstração do código, clique neste link Imagens ou Frases Aleatórias para recarregar a pagina e veja que a lista abaixo se modificou.

6 comentários:

  1. Funcionou perfeitamente Muito obrigado Fabiano
    e parabems pelo site.

    ResponderExcluir
  2. Olá, Fabiano. Com essa dica, é possível criar banners rotativos sobre produtos que se encaixem no tema de um artigo, o que aumentaria a relevância e a taxa de conversão. Conheço um plugin que faz algo parecido, é o Max Banner Ads para Wordpress. Valeu pela dica.

    ResponderExcluir
  3. Neste dia de inverno friorento e meio chuvoso, passei por aqui, para lhe felicitar pelos trabalhos que tem publicado neste seu blog, especialmente, esta última postagem.
    Um abraço cá deste meu Algarve - Faro.
    http://umraiodeluzefezseluz.blogspot.com

    ResponderExcluir
  4. será que há um codigo assim para mostrar links aleatórios no fim da postagem.
    Fabiano, gostaria de ver um tutorial de como diminuir o espaço entre o cabeçalho e a postagem nos templates nativos do Blogger.

    ResponderExcluir
  5. Marcio para mostrar assuntos relacionados no final da postagem é melhor usar o linkwithin ou nrelate

    sobre o espaço entre o cabeçalho e postagem vai depender de qual template você usa....

    ou se tem algum gadget com códigos errados que também podem gerar espaço vazio

    ResponderExcluir
  6. Tinha tempos que eu queria aprender isso e não conseguia encontrar um tutorial decente na web. MUITO obrigado pow, super funcionou <3 SUCESSOS

    ResponderExcluir