FERRAMENTAS BLOG ~ Universo Aleatório

<div class="social-proof">👥 +127 pessoas já apoiaram hoje</div>

<div class="pix">tigotunes@gmail.com</div>

<button onclick="copiarPix(event)" class="pulse">
        💙 Apoiar com Pix
      </button>
    </div>

/* CONTAINER */
.robo-container {
  background: linear-gradient(145deg, #0f2027, #203a43, #2c5364);
  border-radius: 20px;
  padding: 15px;
  width: 240px;
  color: #fff;
  box-shadow: 0 0 35px rgba(0,255,255,0.7);
  font-family: Arial;
  position: relative;
  transition: 0.4s;
}

/* ROBO */
.robo {
  width: 65px;
  height: 65px;
  margin: auto;
  background: radial-gradient(circle, #00f0ff, #001f2f);
  border-radius: 50%;
  box-shadow: 0 0 30px #00f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.olho {
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  animation: piscar 3s infinite;
}

/* TEXTO */
.mensagem {
  text-align: center;
  margin-top: 10px;
}

.social-proof {
  font-size: 12px;
  color: #00ffcc;
  margin: 5px 0;
}

/* PIX */
.pix {
  background: #000;
  padding: 6px;
  border-radius: 10px;
  margin: 8px 0;
  font-size: 13px;
  color: #00ffcc;
}

/* BOTÃO */
button {
  border: none;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
}

/* EFEITO PULSE */
.pulse {
  background: #00f0ff;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,240,255,0.7); }
  70% { box-shadow: 0 0 0 15px rgba(0,240,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,240,255,0); }
}

/* FECHAR */
.fechar {
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: pointer;
}

/* MINI */
#roboPix.mini .mensagem,
#roboPix.mini .fechar {
  display: none;
}

#roboPix.mini .robo-container {
  width: 65px;
  height: 65px;
  padding: 5px;
}

/* ANIMAÇÃO */
@keyframes piscar {
  0%, 90%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}
</style>

function digitar(id, texto, velocidade = 40) {
  let i = 0;
  const el = document.getElementById(id);
  el.innerHTML = "";

const intervalo = setInterval(() => {
    el.innerHTML += texto.charAt(i);
    i++;
    if (i >= texto.length) clearInterval(intervalo);
  }, velocidade);
}

function copiarPix(e) {
  e.stopPropagation();
  navigator.clipboard.writeText("tigotunes@gmail.com");

const btn = e.target;
  btn.innerText = "🧡 Copiado!";
  setTimeout(() => btn.innerText = "💙 Apoiar com Pix", 2000);
}

function fecharRobo(e) {
  e.stopPropagation();
  document.getElementById("roboPix").style.display = "none";
  localStorage.setItem("roboFechado", "true");
}

function minimizarRobo() {
  document.getElementById("roboPix").classList.add("mini");
}

function expandirRobo() {
  document.getElementById("roboPix").classList.remove("mini");
}

// 📜 Mostrar após rolagem
window.addEventListener("scroll", () => {
  if (!localStorage.getItem("roboFechado")) {
    if (window.scrollY > 300) {
      const robo = document.getElementById("roboPix");
      if (robo.style.display !== "block") {

robo.style.display = "block";

digitar("titulo", titulo, 50);
        setTimeout(() => digitar("texto", texto, 30), 800);

// ⏱️ Minimiza após 10s
        setTimeout(() => minimizarRobo(), 10000);
      }
    }
  }
});

// 🎯 EXIT INTENT
document.addEventListener("mouseout", function(e) {
  if (e.clientY < 10) {
    const robo = document.getElementById("roboPix");
    robo.style.display = "block";
    expandirRobo();
  }
});
</script>

Particles effect, Sticky menu and more.

Rede Social

✅ Solução possível: "bloquear o acesso com senha" via JavaScript (apenas visual)

💡 Exemplo:

🛡️ Dica importante:

🔐 Alternativa mais segura (recomendada):

✅ HTML (com proteção via senha):

⚙️ JavaScript (adicione no final da página ou dentro de <script>):

🔐 Dica:

✅ Passo a Passo para Instalar a Barra de Menu no Blogger

1. Vá em Tema > Editar HTML

2. Localize a tag <body> ou o local onde deseja inserir o menu (normalmente no topo)

3. Cole o seguinte código HTML acima do conteúdo principal do seu blog:

4. Agora adicione o CSS para estilizar o menu

✅ Resultado:

✅ Exemplo prático:

🧠 Dica para Páginas Internas no Blogger

✅ Botão com ícone (exemplo com Font Awesome):

✅ Opção 1: Usar o campo de rodapé da postagem (modo simples)

✅ Opção 2: Inserir diretamente no HTML do template (exibe em todas as postagens automaticamente)

Como é que funciona?

💡 Faça Parte dos Curiosos Inteligentes

𝘾𝙤𝙣𝙩𝙚𝙪𝙙𝙤 𝙑𝙄𝙋 ❤️️

🔓 Conteúdo Exclusivo

Comentários

Translate

Menu items

⚙️ JavaScript (adicione no final da página ou dentro de `<script>`):

2. Localize a tag `<body>` ou o local onde deseja inserir o menu (normalmente no topo)