Home > Unlabelled > Como Proteger Posts com Senha no Blogger

Como Proteger Posts com Senha no Blogger

3/21/2026
Como Proteger Posts com Senha no Blogger | Tutorial Completo

🔐 Proteja seus Posts com Senha no Blogger

Tutorial completo e fácil para adicionar conteúdo protegido no seu blog

1

📌 Introdução

O Blogger não oferece uma funcionalidade nativa para bloquear postagens com senha. Mas com um código simples e bonito, você pode adicionar esse recurso de forma rápida e eficiente!

Este tutorial vai te mostrar passo a passo como criar posts protegidos com uma interface moderna e amigável.

🎨

Design Moderno

Interface bonita com gradientes e efeitos suaves

📱

100% Responsivo

Funciona perfeitamente em celulares, tablets e desktops

⚡

Fácil de Usar

Copie, cole e configure em minutos

🔧

Personalizável

Altere cores, textos e estilos facilmente

2

✏️ Passo 1: Criar um Novo Post

No painel do Blogger, clique em "Nova postagem" para criar um novo artigo. Dê um título qualquer para o seu post.

No editor de postagens, você precisa mudar para a visualização HTML. Clique na aba "HTML" no canto superior esquerdo do editor.

💡 Dica importante:

Certifique-se de estar no modo HTML, não no modo de redação. Isso é essencial para que o código funcione corretamente.

3

📋 Passo 2: Copiar e Colar o Código

Copie o código completo abaixo e cole no editor HTML do seu post, no local onde deseja que o conteúdo protegido apareça:

<div class="senha-container" style="display: flex; justify-content: center; align-items: center; min-height: 400px; margin: 30px 0;">
  <div class="senha-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 20px; padding: 3px; max-width: 450px; width: 100%; box-shadow: 0 20px 40px rgba(0,0,0,0.1);">
    <div style="background: white; border-radius: 18px; padding: 40px 30px; text-align: center;">
      
      <!-- Ícone de Cadeado -->
      <div style="margin-bottom: 25px;">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C9.23858 2 7 4.23858 7 7V9H6C4.89543 9 4 9.89543 4 11V19C4 20.1046 4.89543 21 6 21H18C19.1046 21 20 20.1046 20 19V11C20 9.89543 19.1046 9 18 9H17V7C17 4.23858 14.7614 2 12 2Z" fill="currentColor" style="fill: #667eea;"/>
          <path d="M12 14C10.8954 14 10 14.8954 10 16C10 17.1046 10.8954 18 12 18C13.1046 18 14 17.1046 14 16C14 14.8954 13.1046 14 12 14Z" fill="white"/>
          <path d="M15 9H9V7C9 5.34315 10.3431 4 12 4C13.6569 4 15 5.34315 15 7V9Z" fill="white"/>
        </svg>
      </div>
      
      <h2 style="color: #2d3748; margin-bottom: 10px; font-size: 24px; font-weight: 600;">Conteúdo Protegido</h2>
      <p style="color: #718096; margin-bottom: 25px; font-size: 14px;">Este post está bloqueado. Digite a senha para acessar.</p>
      
      <div style="margin-bottom: 20px;">
        <input type="password" id="senhaInput" placeholder="Digite a senha" style="width: 100%; padding: 12px 15px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 16px; outline: none; transition: all 0.3s; box-sizing: border-box;" onfocus="this.style.borderColor='#667eea'" onblur="this.style.borderColor='#e2e8f0'">
      </div>
      
      <button onclick="verificarSenha()" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 12px 30px; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; width: 100%;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 5px 15px rgba(102,126,234,0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
        Desbloquear Conteúdo
      </button>
      
      <div id="mensagemErro" style="margin-top: 15px; color: #f56565; font-size: 14px; min-height: 40px;"></div>
      
    </div>
  </div>
</div>

<script>
// CONFIGURAÇÕES - ALTERE AQUI!
const SENHA_CORRETA = "minhaSenha123"; // Coloque sua senha aqui
const URL_REDIRECIONAMENTO = "https://www.seublog.com.br"; // URL para redirecionar se errar a senha

// Conteúdo que será revelado (COLE SEU CONTEÚDO AQUI)
const conteudoProtegido = `
  <div style="padding: 20px; background: #f7fafc; border-radius: 15px; margin-top: 30px;">
    <h3 style="color: #2d3748;">🎉 Conteúdo Desbloqueado!</h3>
    <p style="color: #4a5568;">Aqui vai todo o seu conteúdo protegido.</p>
  </div>
`;

function verificarSenha() {
  const senhaDigitada = document.getElementById('senhaInput').value;
  const mensagemErro = document.getElementById('mensagemErro');
  
  if (senhaDigitada === SENHA_CORRETA) {
    mensagemErro.style.color = '#48bb78';
    mensagemErro.innerHTML = '✅ Senha correta! Carregando conteúdo...';
    const container = document.querySelector('.senha-container');
    container.outerHTML = conteudoProtegido;
    window.scrollTo({ top: container.offsetTop - 50, behavior: 'smooth' });
  } else {
    mensagemErro.style.color = '#f56565';
    mensagemErro.innerHTML = '❌ Senha incorreta! Você será redirecionado em 3 segundos...';
    setTimeout(function() { window.location.href = URL_REDIRECIONAMENTO; }, 3000);
  }
}

document.getElementById('senhaInput').addEventListener('keypress', function(e) {
  if (e.key === 'Enter') verificarSenha();
});
</script>
4

⚙️ Passo 3: Configurar sua Senha e Conteúdo

No código que você colou, localize estas linhas e faça as alterações necessárias:

// CONFIGURAÇÕES - ALTERE AQUI!
const SENHA_CORRETA = "minhaSenha123"; // Coloque sua senha aqui
const URL_REDIRECIONAMENTO = "https://www.seublog.com.br"; // URL para redirecionamento

1. Definir a senha: Substitua "minhaSenha123" pela senha que deseja usar.

2. URL de redirecionamento: Coloque o endereço para onde o visitante será enviado se errar a senha (ex: homepage do seu blog).

⚠️ Atenção!

A senha fica visível no código-fonte. Use esta solução apenas para proteção leve, não para conteúdo altamente confidencial.

5

📝 Passo 4: Adicionar Seu Conteúdo Protegido

Localize a variável conteudoProtegido no código. É dentro dela que você vai colocar todo o conteúdo que será revelado após a senha correta.

// Conteúdo que será revelado
const conteudoProtegido = `
  <div style="padding: 20px; background: #f7fafc; border-radius: 15px;">
    <h3>🎉 Conteúdo Desbloqueado!</h3>
    <p>COLE SEU CONTEÚDO AQUI</p>
    <!-- Adicione imagens, vídeos, textos -->
  </div>
`;

Você pode colocar qualquer HTML dentro das crases (`` ` ``). Inclua:

  • 📷 Imagens e fotos
  • 🎥 Vídeos do YouTube ou Vimeo
  • 📝 Textos formatados
  • 🔗 Links e botões
  • 🎨 Qualquer outro elemento HTML

💡 Dica extra:

Para criar conteúdo mais elaborado, você pode escrever no modo "Redação" normalmente, depois mudar para o modo HTML e copiar o código gerado para dentro da variável conteudoProtegido.

6

👀 Como Fica Visualmente

Veja abaixo uma prévia de como o formulário de proteção aparecerá no seu blog:

🔒 Prévia do Bloqueio com Senha
🔐

Conteúdo Protegido

Digite a senha para acessar

✨ Interface moderna, responsiva e elegante

7

⚠️ Limitações e Considerações

🔒 Sobre a Segurança

Esta solução é simples e prática, mas NÃO é 100% segura. Qualquer pessoa com conhecimentos básicos pode inspecionar o código e encontrar a senha no fonte da página.

Recomendação: Use esta solução para:

  • Conteúdos exclusivos para membros (proteção leve)
  • Antecipação de posts (pré-estreia)
  • Conteúdos que não exigem alta segurança
  • Restrição simples para visitantes ocasionais

✅ Vantagens

  • Não precisa de plugins ou serviços externos
  • Funciona em qualquer template do Blogger
  • Totalmente personalizável
  • Não afeta o carregamento do blog
8

💡 Dicas Extras

  • Personalize as cores: Altere os valores #667eea e #764ba2 para outras cores que combinem com seu blog
  • Altere o texto: Modifique os textos dentro das tags HTML para o que preferir
  • Múltiplos posts: Você pode usar este código em quantos posts quiser, cada um com sua própria senha
  • Teste antes: Publique como rascunho primeiro e teste se tudo funciona

📚 Tutorial completo para Blogger | Proteção por senha em posts

Copie o código, personalize e tenha posts exclusivos no seu blog!

Post a Comment

Nenhum comentário

Assinar: Postar comentários ( Atom )
Tecnologia do Blogger.