Como funciona essa ideia de monetização?
Você já deve ter percebido que o Blogueiros United está cheio de ferramentas úteis. E no final de cada uma delas eu adiciono um botão para o leitor clicar e pegar o código da ferramenta, podendo adicioná-la ao próprio blog.
Essa estratégia tem dois objetivos: ajudar outros criadores a usufruírem das funcionalidades e, ao mesmo tempo, gerar renda através de uma janela modal com anúncios PTP.
O que é uma janela modal PTP?
É uma janela pop-up que aparece quando o visitante clica no botão “Pegar Ferramenta”. Ela exibe anúncios de sites PTP (Paid To Promote), que pagam por visualizações. Durante 15 segundos, o usuário aguarda o contador liberar o código da ferramenta enquanto vê as publicidades.
Assim, você gera renda automática toda vez que alguém tenta copiar o código da sua ferramenta. Uma forma criativa e justa de monetizar o próprio conteúdo!
Como implementar no seu blog (passo a passo)
1. Pegue o código base
Copie o código abaixo e adicione-o no seu blog. Ele contém o HTML, CSS e JavaScript da ferramenta.
<style>
/* Estilo para o botão de fechar (X) */
.fechar {
color: #aaa;
float: right; /* Flutua para o canto direito */
font-size: 28px;
font-weight: bold;
line-height: 1;
transition: 0.2s; /* Transição suave no hover */
}
.fechar:hover,
.fechar:focus {
color: #333;
text-decoration: none;
cursor: pointer;
}
/* --- ESTILO DO BOTÃO --- */
#btn-ferramenta {
/* Centraliza o botão na tela (útil se ele estiver sozinho) */
display: block;
margin: 20px auto;
/* Aumenta o tamanho e dá destaque */
padding: 15px 30px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
background-color: #28a745; /* Verde legal */
color: white;
border: none;
border-radius: 8px;
transition: background-color 0.3s;
}
#btn-ferramenta:hover {
background-color: #218838;
}
/* --- ESTILOS DA CAIXA MODAL (O POP-UP) --- */
/* Fundo escuro que cobre toda a tela */
#minhaModal {
display: none; /* Começa escondida, o JS a torna 'flex' */
position: fixed; /* Fixa na janela, não se move com o scroll */
z-index: 1000; /* Garante que fique acima de todo o conteúdo */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; /* Adiciona scroll se necessário */
background-color: rgba(0, 0, 0, 0.7); /* Fundo preto semi-transparente */
/* Centralização perfeita (display flex faz a mágica) */
justify-content: center;
align-items: center;
}
/* Conteúdo interno da caixa modal */
.modal-conteudo {
background-color: #fefefe;
padding: 20px;
border: 1px solid #888;
/* DEFINIÇÃO DO TAMANHO FIXO PARA DESKTOP */
width: 1400px;
max-width: 90%; /* Ajuste para telas menores que 1024px */
height: 650px;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
text-align: center;
position: relative;
/* Garante que o iframe tenha a altura mínima necessária */
min-height: 300px;
}
/* Estilo do Iframe do Anúncio */
#ad-frame {
border: 2px solid #ccc;
border-radius: 5px;
margin: 15px 0;
/* Garante que o iframe ocupe o espaço dentro da modal */
width: 100%;
height: 90%; /* Altura generosa para garantir visibilidade */
}
/* Você pode adicionar Media Queries para dispositivos móveis,
mas o 'max-width: 90%' já ajuda a não cortar a tela. */
/* Estilo para a caixa do código copiado */
#codigoDaFerramenta textarea {
width: 98%;
padding: 10px;
height: 500px;
background-color: #eee;
border: 1px solid #ccc;
font-family: monospace;
}
</style>
<h4 style="text-align: center;">Adicione esta ferramenta ao seu blog</h4>
<p style="text-align: center;">Clique no botão abaixo para pegar o link, copie o link e cole em uma página estática</p>
<button id="btn-ferramenta" onclick="abrirModal()">Pegar Ferramenta!</button>
<div id="minhaModal" style="display: none;">
<div class="modal-conteudo">
<span class="fechar" onclick="fecharModal()">×</span>
<div id="countdownArea">
<h2>Por favor, aguarde a liberação do código.</h2>
<p>Seu acesso será liberado em:</p>
<span id="countdownDisplay" style="font-size: 3em; font-weight: bold; color: #ff0077; display: block; margin: 10px 0;">15</span>
<p>Segundos. Não feche esta janela.</p>
<iframe id="ad-frame" src="" width="100%" height="500px" style="border: none;"></iframe>
</div>
<div id="codigoDaFerramenta" style="display: none;">
<h3>Seu Código (Copie e Cole)</h3>
<textarea rows="5" readonly> SEU CÓDIGO HTML/CSS/JS AQUI </textarea>
<button onclick="fecharModal()" style="padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; margin-top: 15px;">
Fechar
</button>
</div>
</div>
</div>
<script>
const LINKS_PTP = [
"https://www.rotate4all.com/ptp/promote-295036", // PTP 1: Rotate4all
"https://adnade.net/ptp/?user=pejotta&subid=blogueiros", // PTP 2: Adnode (Exemplo)
"https://traffic2bitcoin.com/ptp2.php?ref=pejottatg", // PTP 3: Traffic2Bitcoin (Exemplo)
"https://www.topcliques.com.br/ppl.php?id=TOP498326571" // TopCliques
"https://ptc.top.app.br/tb.php?id=XFF799FF9" // PTCPago
"https://www.siteview.com.br/mega.php?id=SVDFA37027" // SiteView
];
// VARIÁVEL DE ESTADO: Guarda o índice do próximo link a ser usado.
let indiceAtualDoLink = 0;
function fecharModal() {
// Esconde a modal
document.getElementById("minhaModal").style.display = "none";
// Opcional: Para evitar carregamento desnecessário, você pode limpar a URL do iframe
document.getElementById("ad-frame").src = "";
// Opcional: Reverter o estado para uma nova abertura
document.getElementById("ad-frame").style.display = "block";
document.getElementById("codigoDaFerramenta").style.display = "none";
}
function liberarCodigo() {
document.getElementById("ad-frame").style.display = "none";
document.getElementById("codigoDaFerramenta").style.display = "block";
}
const LARGURA_MINIMA = 1400;
const ALTURA_MINIMA = 650;
// Note que as constantes LINKS_PTP e indiceAtualDoLink devem estar no topo do seu script!
function fecharModal() {
// ... (sua função de fechar permanece a mesma) ...
document.getElementById("minhaModal").style.display = "none";
document.getElementById("ad-frame").src = "";
document.getElementById("ad-frame").style.display = "block";
document.getElementById("codigoDaFerramenta").style.display = "none";
}
function liberarCodigo() {
// ... (sua função de liberar permanece a mesma) ...
document.getElementById("ad-frame").style.display = "none";
document.getElementById("codigoDaFerramenta").style.display = "block";
}
function abrirModal() {
// -----------------------------------------------------------
// 1. VERIFICAÇÃO DO TAMANHO DA JANELA
// -----------------------------------------------------------
const larguraJanela = window.innerWidth;
const alturaJanela = window.innerHeight;
if (larguraJanela < LARGURA_MINIMA || alturaJanela < ALTURA_MINIMA) {
alert("Desculpe, a visualização do anúncio requer uma janela de navegador maior (mínimo de " + LARGURA_MINIMA + "x" + ALTURA_MINIMA + " pixels) para validar o crédito. Por favor, maximize sua janela ou use um desktop.");
return; // Sai da função
}
// -----------------------------------------------------------
// 2. LÓGICA DE ALTERNÂNCIA (O PONTO CHAVE)
// -----------------------------------------------------------
// Pega o link da posição atual
const linkParaUsar = LINKS_PTP[indiceAtualDoLink];
// Incrementa o índice para a próxima vez
indiceAtualDoLink++;
// Se o índice for maior que o tamanho do array, ele volta para o início (0)
if (indiceAtualDoLink >= LINKS_PTP.length) {
indiceAtualDoLink = 0;
}
// -----------------------------------------------------------
// 3. ABRE MODAL E INICIA O PROCESSO
// -----------------------------------------------------------
// Configura o estado inicial
document.getElementById("ad-frame").style.display = "block";
document.getElementById("codigoDaFerramenta").style.display = "none";
// Abre a modal
document.getElementById("minhaModal").style.display = "flex";
// Usa o link alternado!
document.getElementById("ad-frame").src = linkParaUsar;
// Inicia o Cronômetro
setTimeout(liberarCodigo, 15000);
}
</script>
2. Cole os códigos nos locais certos
O script deve ser inserido antes da tag </body> e o estilo CSS antes da tag </head>. Depois, basta adicionar o botão onde deseja exibir a ferramenta.
3. Converta o código da ferramenta
Antes de colar o seu código dentro do modal, converta-o usando o Conversor de HTML para XML. Assim, o Blogger não quebra o código.
4. Finalize e teste
Substitua o texto SEU CÓDIGO HTML/CSS/JS AQUI pelo código convertido e publique. Teste a janela modal para garantir que o contador e os anúncios PTP estejam funcionando corretamente.
Dica extra: use sua criatividade!
Além de códigos, você pode exibir qualquer conteúdo dentro da janela modal: um vídeo do YouTube, um cupom de desconto, uma senha secreta ou até um formulário. Tudo isso enquanto monetiza suas visualizações.
Sugestões de Sites PTP
Conclusão
Essa técnica é uma das melhores formas de monetizar blogs sem depender de banners fixos ou anúncios intrusivos. Você entrega valor, ensina e ainda ganha por isso. É o tipo de estratégia que o Google adora: conteúdo útil, original e interativo.
💡 Curtiu essa ideia? Compartilhe este post e explore outras ferramentas de monetização para blogs no Blogueiros United!
){kind=link}
0 Comentários