PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Publicidade:

Encontre no blog...

08/06/2012

Como rotacionar banners no seu blog

grd_banner_ rotativo

Rotacionando banners

Uma maneira bem legal para reduzir espaços do seu blog é rotacionando a exibição de imagens ou banners. Assim, quando o leitor abrir ou atualizar uma página do blog, será exibido aleatoriamente um banner diferente a cada vez…

Desta forma, além de reduzir espaços e deixar o visual do seu blog mais limpo, o banner rotativo pode dar também um aspecto de mudança ou novidade, pois algo sempre estará diferente…

Para publicidade o banner rotativo é ótimo, pois você poderá focar um lugar privilegiado no blog para vários anunciantes, e todos terão as mesmas chances de aparecer.

Código JavaScript

Para inserir no blog, copie o código abaixo…

accepted_48

<script language="JavaScript">

var how_many_ads = 2;

var now = new Date()

var sec = now.getSeconds()

var ad = sec % how_many_ads;

ad +=1;

if (ad==1) {

txt="";

url="link para redirecionar quando o banner for clicado";

alt="texto quando passar o mouse sobre o banner";

banner="url da imagem que deve estar hospeda";

width="largura do banner em px";

height="altura do banner em px";

}

if (ad==2) {

txt="";

url="link para redirecionar quando o banner for clicado";

alt="texto quando passar o mouse sobre o banner";

banner="url da imagem que deve estar hospeda";

width="largura do banner em px";

height="altura do banner em px";

}

document.write('<center>');

document.write('<a href=\"' + url + '\" target=\"_blank\">');

document.write('<img src=\"' + banner + '\" width=')

document.write(width + ' height=' + height + ' ');

document.write('alt=\"' + alt + '\" border=0><br>');

document.write('<small>' + txt + '</small></a>');

document.write('</center>');

// End -->

</script>

Agora cole no seu blog e substitua o que aparece em vermelho, sendo:

15_128x128

1) url = link para redirecionar quando o banner for clicado

Exemplo: url = “http://visualdicas.blogspot.com.br”;

2) alt = texto alternativo para aparecer quando passar o mouse sobre o banner

Exemplo: alt = “Visual Dicas – a sua fonte de informação!”;

3) banner = url da imagem hospedada em algum site (Para hospedar imagens gratuitamente, leia Como hospedar imagens e gif animados gratuitamente)

Exemplo: banner = “http://visualdicas.com.br/images/stories/logovisualmusicas.gif”;

4) width = largura do banner em px (Exemplo: widht = 300”;)

5) height = altura do banner em px (Exemplo: height = 250”;)

6) txt = texto para legenda da imagem. Se não desejar legenda, mantenha txt=””;

Para acrescentar o código em um gadget do Blogger, leia: Como instalar um Widget no seu Blog -(Blogger)

Para acrescentar o código em um widget do Wordpress, leia: Como inserir Widgets no Wordpress sem a instalação de plugins

Acrescentando mais banners

Altere a linha abaixo, que aparece no início do script. Substitua o valor de X com o número de banners que você irá utilizar no script..

var how_many_ads = X;

Acrescente o código abaixo após a chave “}” no final do último banner inserido. Não esqueça de mudar o número que aparece depois de ad== , que deverá ser incrementado a cada novo banner inserido, ou seja: o primeiro é (add==1), o segundo (ad==2) o terceiro (ad==3) e assim sucessivamente.

accepted_48

if (ad==3) {

txt="";

url="link para redirecionar quando o banner for clicado";

alt="texto quando passar o mouse sobre o banner";

banner="url da imagem que deve estar hospeda";

width="largura do banner em px";

height="altura do banner em px";

}

Para testarmos o script, coloquei um banner rotativo do nosso patrocinador na lateral do nosso blog. Atualize a página (tecle [F5]) algumas vezes e observe que o banner mudará aleatoriamente a cada vez que você visualizar a página…

image

ou

imagebyALF 

Fonte: Ganhar dinheiro web

6 comentários:

Anderson Vidal disse...

Sempre quis fazer isso no meu blog, porém nunca dava certo, dessa vez consegui, OBRIGADO!!!

Polyana Borges disse...

Muito obrigado consegui, ótimos seus tutorias.

Negócio 2.0 disse...

Muito bom! Obrigado!!

Guia do Host disse...

Muito legal o seu site
--------------------------------------------
Conheçam o site de dicas, códigos e hospedagem www.guiadohost.com

Diego Vinicius disse...

Cara, o único poste que deu certo de milhões que procurei, Bom Trabalho! Vlw

Lincon Sousa disse...

Testei dezenas de plugins e não tive sucesso, mas com esse código funcionou perfeitamente. Muito obrigado por compartilhar.

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More