Você está procurando maneiras de monetizar seu blogger ou site WordPress? Você deseja ganhar uma renda extra incorporando o marketing de afiliados em seu conteúdo? Se sim, este vídeo é para você. Neste tutorial, mostrarei como usar um script de banner de afiliado rotativo para aumentar seus ganhos e tornar seu site mais rentável. Primeiro, vamos falar sobre o que é o marketing de afiliados. É um tipo de marketing no qual você promove o produto ou serviço de outra pessoa em seu site e ganha uma comissão por cada venda que vem de sua indicação. Muitas empresas oferecem programas de afiliados e é uma ótima maneira de monetizar seu conteúdo sem ter que criar seus próprios produtos. Agora, vamos mergulhar em como usar um script de banner de afiliado rotativo. O script que usaremos é um código JavaScript que gira por meio de um conjunto de banners de afiliados toda vez que uma página é carregada. Esta é uma ótima maneira de aumentar a visibilidade de seus anúncios de afiliados e potencialmente aumentar suas taxas de cliques. Para começar, você precisará encontrar um programa de afiliados que deseja promover. Procure um programa que esteja alinhado com seu nicho e tenha produtos ou serviços que seu público se interesse. Depois de encontrar um programa, inscreva-se e pegue seus banners de afiliados. Em seguida, copie o código JavaScript da descrição e cole-o no código HTML do seu site. Certifique-se de substituir os URLs de imagem e URLs de afiliado pelos seus próprios. O código selecionará aleatoriamente um dos banners toda vez que uma página for carregada, garantindo que cada banner receba a mesma quantidade de exposição. Isso ajudará a evitar a cegueira de banner e manterá seu público engajado com seu conteúdo.
O código mencionado é usado para exibir banners de afiliados em seu blog no Blogger ou Site WordPress. Vou explicar cada linha do código em detalhes:
<script language="JavaScript">
Esta linha define a linguagem do script que será usado, neste caso, JavaScript.
hoje = new Date()
Esta linha cria um objeto Date e o atribui à variável "hoje".
numero_de_imagens = 3
Esta linha define o número total de imagens de banner que você tem.
segundos = hoje.getMilliseconds()
Esta linha obtém os milissegundos da hora atual e os atribui à variável "segundos".
numero = segundos % numero_de_imagens
Esta linha calcula o resto da divisão entre "segundos" e "numero_de_imagens" e atribui o resultado à variável "numero". Isso é feito para garantir que uma imagem de banner diferente seja exibida a cada visita à página.
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"
}
Essas linhas são usadas para definir as imagens de banner e as URLs de destino correspondentes. Você precisará atualizar as informações do endereço da imagem e da URL do site para suas próprias informações de afiliado. Certifique-se de incluir a URL completa, incluindo "http://" ou "https://".
document.write('<p align="center"><a href="' + site +'"target="_blank"><img src="' +imagem + '"border="0"><a></p>')</script> )
Esta linha é usada para exibir o banner de afiliado em seu blog. O código HTML é gerado dinamicamente usando as variáveis "imagem" e "site". O código HTML resultante exibe o banner de afiliado com um link para o site de destino. A propriedade "target" é definida como "_blank" para que o link seja aberto em uma nova janela do navegador.
Para usar este código em seu blog do Blogger, siga estas etapas:
Faça login em sua conta do Blogger e vá para a seção "Layout" do seu blog.
Clique em "Adicionar um Gadget" onde deseja exibir o banner de afiliado.
Selecione "HTML/JavaScript" no menu de gadgets.
Cole o código fornecido acima na área de texto do gadget.
Atualize as informações de endereço de imagem e URL do site no código com suas próprias informações de afiliado.
Clique em "Salvar" para adicionar o gadget ao seu blog.
Código com 3 Imagem
<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>
Código com 5 Imagem
hoje = new Date()
numero_de_imagens = 5
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"
}
document.write('<p align="center"><a href="' + site +'"target="_blank"><img src="' +imagem + '"border="0"><a></p>')</script>
Código com 8 Imagem
<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>
Isso deve exibir o banner de afiliado em seu blog. Lembre-se de que você pode precisar fazer alguns ajustes de layout para garantir que o banner seja exibido corretamente em sua página.
Este código de imagens muda automaticamente a cada cinco segundos.
Código 01
Este código HTML e JavaScript é um exemplo de como criar um slider de imagens que muda automaticamente a cada cinco segundos.
No HTML, há uma div com id "slider" que contém várias outras divs com links de imagem. Cada div com imagem é oculta inicialmente.
No JavaScript, o código começa obtendo o elemento com id "slider" e, em seguida, obtém todas as divs com tag "div" dentro dele. O código define uma variável "atual" para acompanhar a imagem atualmente exibida (inicialmente, a primeira imagem é exibida).
Em seguida, o código define um intervalo de tempo de cinco segundos usando a função setInterval. A função dentro do setInterval é executada a cada cinco segundos.
Dentro da função setInterval, o código oculta a imagem atual definindo seu estilo de exibição para "none". Em seguida, a variável "atual" é atualizada para a próxima imagem na lista usando o operador de módulo (%). Isso garante que, quando a última imagem é exibida, a primeira imagem é exibida novamente. Finalmente, a próxima imagem é exibida definindo seu estilo de exibição para "block".
Código 02 Colocando os links de afiliados no código:
Depois de adicionar as imagens e os links de afiliados em suas postagens, você pode criar um banner rotativo que exibe várias imagens com links de afiliados diferentes. Para isso, você pode usar o código HTML abaixo:
<div id="slider">
<div>
<a href="seu-link-de-afiliado-aqui"><img src="imagem1.jpg" alt="Imagem 1" /></a>
</div>
<div>
<a href="seu-link-de-afiliado-aqui"><img src="imagem2.jpg" alt="Imagem 2" /></a>
</div>
<div>
<a href="seu-link-de-afiliado-aqui"><img src="imagem3.jpg" alt="Imagem 3" /></a>
</div>
<div>
<a href="seu-link-de-afiliado-aqui"><img src="imagem4.jpg" alt="Imagem 4" /></a>
</div>
</div>
Para controlar a rotação das imagens, você precisará adicionar o seguinte código JavaScript no final da página:
<script>
var slider = document.getElementById('slider');
var imagens = slider.getElementsByTagName('div');
var atual = 0;
//Exibe a primeira imagem
imagens[atual].style.display = 'block';
//Define o intervalo de tempo entre as imagens
setInterval(function(){
imagens[atual].style.display = 'none';
atual = (atual+1)%imagens.length;
imagens[atual].style.display = 'block';
Este código pode ser útil para criar uma apresentação de slides de imagens em um site, exibindo imagens em sequência sem a necessidade de interação do usuário. Você pode substituir os links de imagem por links de seus próprios arquivos de imagem e ajustar o tempo de intervalo para atender às suas necessidades.
