Exibir frases aleatórias no Blogger

10 6 99

🎲 Como Exibir Frases Aleatórias no Blogger (Gadget Dinâmico)

Um recurso simples mas que traz um toque de originalidade ao seu blog é a exibição de frases aleatórias – a cada carregamento de página, uma mensagem diferente aparece. Pode ser uma citação inspiradora, uma piada, um fato curioso ou um lembrete sobre o conteúdo do seu site.

Neste tutorial, você aprenderá a instalar um gadget funcional no Blogger utilizando JavaScript moderno, com direito a personalização de cores, bordas e estilos. O código é leve, compatível com dispositivos móveis e não interfere no desempenho do blog.

🧩 Passo a passo para instalar o gadget

No painel do Blogger, vá em Layout.
Clique em Adicionar um gadget na área desejada (barra lateral, rodapé etc.).
Na lista de gadgets, escolha HTML/JavaScript.
No campo Conteúdo, cole o código fornecido abaixo.
Personalize as frases e o estilo (conforme orientações).
Clique em Salvar e visualize seu blog.

✨ Código modernizado (recomendado)

Copie e cole o bloco abaixo. Ele substitui o document.write (que pode causar lentidão) por innerHTML, além de usar uma estrutura mais limpa e responsiva.

<div id="frase-aleatoria" style="border-left: 5px solid #ff9900; background-color: #fef9e6; padding: 12px; border-radius: 8px; font-family: 'Georgia', serif; font-size: 1rem; color: #333; margin: 15px 0; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
  <span id="frase-texto">Carregando frase...</span>
</div>

<script>
(function() {
  // Lista de frases – edite à vontade
  const frases = [
    "Acredite nos seus sonhos, eles são mais reais do que você imagina.",
    "Pequenas atitudes diárias transformam o mundo.",
    "Seja a mudança que você quer ver – Gandhi.",
    "O conhecimento é a única riqueza que cresce quando é compartilhada.",
    "A persistência é o caminho do êxito. – Charles Chaplin"
  ];
  
  // Gerar um índice aleatório
  let indice = Math.floor(Math.random() * frases.length);
  let fraseEscolhida = frases[indice];
  
  // Inserir a frase no elemento HTML
  document.getElementById("frase-texto").innerHTML = fraseEscolhida;
})();
</script>

🔧 Como personalizar as frases?
Dentro do array frases (entre colchetes), substitua os textos entre aspas duplas pelos seus próprios. Cada frase deve ser separada por vírgula.
➡️ Exemplo com 3 frases:
const frases = [ "Frase um", "Frase dois", "Frase três" ];

📈 Quantas frases posso colocar?
Quantas quiser! Basta adicionar novas linhas dentro do array, sempre com aspas duplas e vírgula entre elas (a última não precisa de vírgula).

🎨 Personalizando o estilo visual (CSS)

A aparência do gadget é controlada pelos atributos dentro da tag <div>. Veja como cada um age:

Estilo	O que faz	Exemplo de alteração
`border-left`	Borda à esquerda (cor, espessura, estilo)	`border-left: 4px dotted #2c3e50;`
`background-color`	Cor de fundo do bloco	`background-color: #eef5ff;`
`padding`	Espaçamento interno (distância da borda ao texto)	`padding: 15px;`
`border-radius`	Arredondamento dos cantos	`border-radius: 12px;`
`font-family`	Tipo da fonte	`font-family: 'Courier New', monospace;`
`font-size`	Tamanho do texto	`font-size: 1.1rem;`
`color`	Cor do texto	`color: #1e466e;`
`text-align`	Alinhamento do texto	`text-align: center;`

Exemplo com borda em todos os lados (em vez de apenas à esquerda):

<div id="frase-aleatoria" style="border: 2px solid #aaa; border-radius: 20px; background: #fff0e0; padding: 12px; text-align: center; font-style: italic;">
  <span id="frase-texto">Carregando...</span>
</div>

💡 Dica: você pode testar combinações de cores usando tabelas de cores HTML ou ferramentas como o Color Picker do Google.

📌 Opções avançadas – melhore ainda mais

1. Evitar que a mesma frase se repita consecutivamente

Acrescente uma lógica simples que armazena o último índice e evita repetição em seguida:

let ultimoIndice = localStorage.getItem('ultimaFrase');
let indice;
do {
  indice = Math.floor(Math.random() * frases.length);
} while (indice === ultimoIndice);
localStorage.setItem('ultimaFrase', indice);

2. Mostrar uma nova frase a cada visita sem recarregar a página

Você pode disparar a troca manualmente com um botão ou via timer. Exemplo com botão:

<button onclick="trocarFrase()">Nova frase</button>
<script>
function trocarFrase() {
  let novoIndice = Math.floor(Math.random() * frases.length);
  document.getElementById("frase-texto").innerHTML = frases[novoIndice];
}
</script>

3. Exibir autor da frase (em duas linhas)

Se quiser exibir também o autor, utilize um array de objetos:

const frasesObj = [
  { texto: "Ser ou não ser, eis a questão.", autor: "Shakespeare" },
  { texto: "Penso, logo existo.", autor: "Descartes" }
];
let escolhido = frasesObj[Math.floor(Math.random() * frasesObj.length)];
document.getElementById("frase-texto").innerHTML = `“${escolhido.texto}”<br><small>— ${escolhido.autor}</small>`;

🔗 Links úteis e válidos

W3Schools – Guia de Cores HTML – para personalizar bordas e fundos.
MDN Web Docs – Trabalhando com arrays em JavaScript – aprenda a gerenciar listas.
ImgBB – hospedagem de imagens (se quiser adicionar ícone ao gadget)

✅ Verificação final

Após salvar o gadget, acesse seu blog e atualize a página algumas vezes.
A frase deve mudar a cada recarregamento (ou se usou o botão “Nova frase”, a cada clique).
Se o conteúdo não aparecer, verifique se o código foi colado dentro do gadget HTML/JavaScript e se não há conflito com outros scripts (use uma janela anônima para testar).

Com menos de 5 minutos, seu blog ganha um elemento interativo que prende a atenção, humaniza o conteúdo e incentiva o visitante a refletir. E o melhor: você pode mudar as frases sempre que quiser, sem mexer no código toda vez – basta editar o array.

🔑 Keywords:

frases aleatórias, gadget Blogger, JavaScript para blogs, citação aleatória, personalizar widget, código HTML/JavaScript, frases motivacionais, borda colorida, CSS inline, aleatoriedade sem repetição, dicas de personalização, engajamento de leitores

📢 Tags:

#FrasesAleatorias #GadgetBlogger #JavaScriptParaBlogs #CitaçõesInspiradoras #PersonalizarBlog #DicasBlogger #WidgetDinâmico #CSSBlogger #TutorialBlogger #Aleatoriedade

Reactions