Como adicionar um gadget de receitas ao seu site

Esse gadget vai enriquecer seu site, tornando-o mais dinâmico e interativo, perfeito para quem tem um blog ou site de culinária.

Visão do Gadget

Acesse o painel de administração do seu site

Se você estiver usando o Blogger, siga os passos abaixo:

• Faça login na sua conta do Blogger.
• No painel de administração, clique em "Layout" no menu lateral.
• Se você estiver usando outro sistema de gerenciamento de conteúdo, procure por algo como "Adicionar gadget", "Widgets" ou "Adicionar HTML/JavaScript".

Escolha onde adicionar o gadget

Escolha onde deseja adicionar o gadget. Pode ser na barra lateral, no rodapé ou em uma página específica.

Clique na opção "Adicionar Gadget" ou "Adicionar HTML/JavaScript". Isso abrirá uma janela onde você pode colar o código.

Código do Gadget

Agora, você precisará do código que vai colocar no seu site. Esse código vai criar o bloco de receitas com imagens aleatórias, frases motivacionais e um botão para "Ver mais receitas". Basta copiar o código abaixo e colá-lo na janela de "HTML/JavaScript" que você abriu no passo anterior.

<div style="background:#111; border:4px solid #00c4cc; padding:15px; border-radius:15px; box-shadow:0 0 12px rgba(0,0,0,0.15); text-align:center; max-width:300px; margin:auto; font-family:'Segoe UI', sans-serif;">

  <!-- Título com fundo branco, fonte preta e faíscas -->
  <h2 style="font-size:20px; background:#fff; color:#111; margin-bottom:15px; position:relative; display:inline-block; padding:5px 15px; border-radius:8px;">
    Receitas
    <span style="position:absolute; top:-10px; right:-10px; width:12px; height:12px; background:radial-gradient(#fff, transparent); border-radius:50%; box-shadow:0 0 8px #fff, 0 0 12px #00faff, 0 0 20px #00faff;"></span>
    <span style="position:absolute; top:-5px; left:-12px; width:8px; height:8px; background:radial-gradient(#fff, transparent); border-radius:50%; box-shadow:0 0 6px #fff, 0 0 10px #00faff;"></span>
  </h2>

  <!-- Imagem aleatória -->
  <div id="recipeImageBox" style="margin-bottom:15px;">
    <img id="recipeImage" 
         src="https://exemplo.com/imagem1.jpg" 
         alt="Imagem de Receita" 
         style="width:100%; max-width:220px; height:160px; object-fit:cover; border-radius:12px; animation:softPulse 10s infinite; display:block; margin:0 auto;" />
  </div>

  <!-- Frase aleatória -->
  <div id="recipeQuote" style="font-size:20px; color:#ddd; font-style:italic; margin-bottom:20px; min-height:40px;">
    Sua frase 
  </div>

  <!-- Botão com ícone de talher -->
  <a href="https://exemplo.com/"
     style="display:inline-block; padding:10px 20px; background:#fff; border:2px solid #00c4cc; color:#00c4cc; text-decoration:none; font-weight:bold; border-radius:25px; animation:pulse 2s infinite;">
     🍴 Veja essas receitas
  </a>

</div>
    

Aprenda Como Personalizar o Gadget de Receitas

Agora que você adicionou o gadget de receitas ao seu site, é hora de deixá-lo com a sua cara! Abaixo você aprende como alterar imagens, frases, cores, tempo de animação e outros detalhes visuais, tudo direto no código que está dentro da caixa branca.

📸 Como Adicionar ou Trocar Imagens

No código dentro da caixa, você verá esta parte:

<img id="recipeImage" src="ADICIONAR URL
" ... />

Basta substituir ADICIONAR URL pelo link direto da imagem que deseja exibir. Para adicionar mais imagens no sorteio, modifique o script JavaScript (fora da caixa visível) onde está definido o array com as URLs, assim:

const imagens = [
  "https://exemplo.com/imagem1.jpg",
  "https://exemplo.com/imagem2.jpg",
  "https://exemplo.com/imagem3.jpg" // nova imagem
];

💬 Como Adicionar ou Editar Frases

No mesmo trecho onde estão definidas as imagens, também há um array de frases. Para alterar ou adicionar novas frases:

const frases = [
  "Sua frase 1 ",
  "Outra frase interessante",
  "Mais uma frase inspiradora"
];

Edite cada linha para usar frases do seu gosto. Elas serão exibidas abaixo da imagem.

⏱️ Como Mudar o Tempo de Troca

O tempo entre as trocas automáticas de imagem e frase é definido neste trecho:

setInterval(mostrarAleatorio, 8000);

O número está em milissegundos. Para alterar:

• 5000 = 5 segundos
• 10000 = 10 segundos
• 15000 = 15 segundos

🎨 Como Mudar as Cores e Estilo da Caixa

Para mudar a cor da borda ou fundo do gadget, edite os estilos inline como mostrado abaixo:

🔲 Borda

<div style="... border: 4px solid #00c4cc; ...">

Substitua #00c4cc pela cor desejada, como:

• #FF5733 (vermelho alaranjado)
• #4CAF50 (verde suave)
• #ADD8E6 (azul claro)

🧱 Fundo

<div style="background:#111; ...">

Substitua #111 por qualquer cor, como:

• #ffffff (branco)
• #f0f0f0 (cinza claro)
• #000000 (preto)

🍴 Como Personalizar o Botão de Ação

O botão que aparece abaixo das imagens pode ser facilmente personalizado. Veja este trecho:

<a https://exemplo.com/"
   style="display:inline-block; padding:10px 20px; background:#fff; border:2px solid #00c4cc; color:#00c4cc; text-decoration:none; font-weight:bold; border-radius:25px; animation:pulse 2s infinite;">
   🍴 Veja essas receitas
</a>

Você pode personalizar:

• O link: troque https://exemplo.com/ pelo link desejado (pode ser uma página de receitas do seu blog).
• O texto: altere Veja essas receitas para outro chamado à ação, como “Acesse o cardápio” ou “Clique e aprenda”.
• As cores: personalize as cores de fundo, borda e texto alterando os valores background, border e color.
• A animação: o efeito pulsante é feito com animation: pulse 2s infinite;. Se quiser remover, basta apagar essa parte do estilo.

✨ Extras Visuais (Brilhos e Animações)

O título tem efeitos de faísca com pequenos brilhos. Se quiser adicionar ou remover esses elementos, edite os <span> que aparecem logo após o título <h2>. Para alterar a cor do brilho, troque o valor #00faff pelo tom desejado.

Além disso, há uma animação suave no botão e na imagem. Isso está definido com @keyframes pulse e @keyframes softPulse no CSS. Você pode alterar o tempo e intensidade dessas animações conforme seu gosto.

Com essas instruções, você tem total liberdade para transformar o gadget de receitas em algo único e criativo. Use cores, imagens e frases que combinem com seu público e com a identidade visual do seu blog!

📌 O Que o Código Faz

• Imagem aleatória de receitas: Mostra uma imagem de receita diferente a cada vez.
• Frase inspiradora: Exibe uma citação motivacional sobre culinária.
• Botão de ação: O botão "Veja essas receitas" leva o visitante a uma página com mais receitas.

💾 Salve e Publique o Gadget

Após colar o código, clique em “Salvar” para adicionar o gadget ao seu site. Agora, quando você acessar seu site, verá o gadget de receitas na posição escolhida.

🧪 Teste no seu Site

Agora que você adicionou o gadget, é hora de testar! Acesse o seu site e veja o gadget funcionando. Ele vai exibir imagens e frases novas de tempos em tempos, além de oferecer um botão para explorar mais receitas.

✅ Conclusão

Agora você sabe como adicionar um gadget de receitas ao seu site, personalizá-lo e até mesmo testar para ver se está funcionando corretamente. Esse gadget vai deixar seu site de culinária ainda mais interessante e dinâmico para seus visitantes.