Gadget de Receitas Dinâmico para Blogger - Júnnior MonZart

Um blog que não se move, não cresce.
Ao longo dos meus anos criando projetos no Blogger, percebi que o maior inimigo de um site é a monotonia. Se o leitor entra e vê apenas texto estático, a chance dele sair é enorme.

Foi pensando nisso que desenvolvi este Gadget de Receitas Dinâmico. Eu não queria apenas uma imagem parada na lateral; queria algo que "conversasse" com o público. Este recurso combina imagens rotativas, frases inspiradoras e um gatilho visual de pulsação que desenhei para prender a atenção e aumentar o tempo de permanência — algo que o Google AdSense valoriza demais.

👁️ Veja como vai ficar no seu Blog

Este é o gadget funcionando em tempo real. Observe como ele troca o conteúdo sozinho:

🍽️ Sugestão do Chef

Carregando inspiração...

🚀 Por que usar este Gadget?

Não adiciono nada por "estética". Tudo tem um propósito. Quando criei este componente, foquei em três pilares:

✔️ Renovação Visual Automática: O leitor sempre vê algo novo ao atualizar a página, sem você editar nada.
✔️ Autoridade (E-E-A-T): Exibir variedade de pratos mostra domínio do assunto culinário.
✔️ Mais Cliques (PVs): O botão pulsante "Veja essa receita" é um ímã de cliques, diminuindo a rejeição.

🛠️ Instalação em 1 Minuto

No painel do Blogger, vá em Layout > Adicionar um Gadget > HTML/JavaScript. Copie o código abaixo e cole. Ele já vem com a lógica de sorteio pronta.

CÓDIGO GADGET MONZART HTML/JS

<div id="mzt-recipe-gadget" style="background:#fff; border:3px solid #00c4cc; padding:20px; border-radius:15px; box-shadow:0 5px 15px rgba(0,0,0,0.1); text-align:center; max-width:100%; margin:auto; font-family:'Segoe UI', sans-serif;">
  
  <h3 style="margin-top:0; color:#333; font-size: 20px; border-bottom: 2px solid #eee; padding-bottom: 10px;">
    🍴 Destaque do Dia
  </h3>

  <div style="height: 180px; overflow: hidden; border-radius: 10px; margin-bottom: 15px; background: #eee;">
    <a id="mzt-img-link" href="#">
      <img id="mzt-img" src="" style="width:100%; height:100%; object-fit:cover; transition: opacity 0.5s; opacity: 0;" />
    </a>
  </div>

  <div id="mzt-text" style="font-size:16px; color:#555; font-style:italic; margin-bottom:20px; min-height:45px; line-height: 1.4;">
    Carregando delícias...
  </div>

  <a id="mzt-btn" href="#" style="display:inline-block; padding:10px 25px; background:linear-gradient(45deg, #00c4cc, #00e6e6); color:#fff; text-decoration:none; font-weight:bold; border-radius:25px; transition: 0.3s; box-shadow: 0 4px 10px rgba(0, 196, 204, 0.3);">
    Ver Receita Completa ➜
  </a>

</div>

<script>
(function() {
  // CONFIGURE AQUI SUAS RECEITAS
  const receitas = [
    {
      img: "LINK_DA_IMAGEM_1.jpg", 
      txt: "Uma explosão de sabor para o seu almoço de domingo! 🍝", 
      url: "LINK_DO_POST_1"
    },
    {
      img: "LINK_DA_IMAGEM_2.jpg", 
      txt: "Sobremesa irresistível que fica pronta em 10 minutos. 🍰", 
      url: "LINK_DO_POST_2"
    },
    {
      img: "LINK_DA_IMAGEM_3.jpg", 
      txt: "Leve, saudável e delicioso. Perfeito para o jantar! 🥗", 
      url: "LINK_DO_POST_3"
    }
  ];

  function trocarReceita() {
    const random = Math.floor(Math.random() * receitas.length);
    const item = receitas[random];
    
    const imgEl = document.getElementById('mzt-img');
    const txtEl = document.getElementById('mzt-text');
    const btnEl = document.getElementById('mzt-btn');
    const imgLink = document.getElementById('mzt-img-link');

    // Efeito de Fade
    imgEl.style.opacity = 0;
    
    setTimeout(() => {
      imgEl.src = item.img;
      txtEl.innerText = item.txt;
      btnEl.href = item.url;
      imgLink.href = item.url;
      imgEl.style.opacity = 1;
    }, 400);
  }

  // Troca a cada 6 segundos
  trocarReceita();
  setInterval(trocarReceita, 6000);
})();
</script>

*Clique no código para copiar tudo.

🎨 Personalização Fácil

Deixei o código modular. Altere estes pontos para ficar com a sua cara:

Imagens (img): Coloque o link direto das fotos dos seus pratos.
Frases (txt): Use gatilhos mentais. Ex: "Impossível comer um só!", "Receita da Vovó".
Links (url): O endereço da postagem da receita no seu blog.

🚀 Turbine seu Ecossistema

Um blog de autoridade precisa de ferramentas completas. Confira meus outros tutoriais:

Slide de Receitas

Crie galerias lindas no topo dos posts.

Rodapé Profissional

A base para ser aprovado no AdSense.

Ver Todos os Tutoriais

Escrito por

Júnnior MonZart

Desenvolvedor web, criador de conteúdo e fundador do MonZart.com.br. Minha missão é simplificar o marketing digital e ajudar você a monetizar seus projetos na internet.

Ver Perfil Completo →

Como adicionar um gadget de receitas ao seu site

👁️ Veja como vai ficar no seu Blog

🍽️ Sugestão do Chef

🚀 Por que usar este Gadget?

🛠️ Instalação em 1 Minuto

🎨 Personalização Fácil

🚀 Turbine seu Ecossistema

Slide de Receitas

Rodapé Profissional

Júnnior MonZart

O que achou deste conteúdo?

Comentários

28+ Ferramentas Gratuitas

Total de visualizações de página

Links

Redes Sociais

Entrar em Contato

Contact form

Como adicionar um gadget de receitas ao seu site

👁️ Veja como vai ficar no seu Blog

🍽️ Sugestão do Chef

🚀 Por que usar este Gadget?

🛠️ Instalação em 1 Minuto

🎨 Personalização Fácil

🚀 Turbine seu Ecossistema

Slide de Receitas

Rodapé Profissional

Júnnior MonZart

O que achou deste conteúdo?

Comentários

Talvez você goste destas postagens

28+ Ferramentas Gratuitas

Total de visualizações de página

Links

Redes Sociais

Entrar em Contato

Contact form