Destaque o Post mais vistos do seu Blog com este Gadget moderno - Passo a passo

Se você quer transformar a aparência do seu blog e dar destaque ao que realmente importa — o conteúdo que mais engajou seus leitores —, esse tutorial foi feito para você. Aqui, você vai aprender a criar um gadget personalizado que mostra automaticamente os posts mais acessados do seu blog, com um visual moderno e adaptável a qualquer layout.

Como é o gadget

Além da estética, esse tipo de recurso também cumpre uma função estratégica: ao destacar posts populares, você melhora a navegação, aumenta o tempo de permanência do usuário e potencializa as chances de conversões e engajamento. Tudo isso respeitando as diretrizes do Google AdSense, o que é essencial para quem quer monetizar o blog com segurança e consistência.

O destaque visual que vamos criar usa a estrutura do seu próprio feed de postagens do Blogger. Com ele, será possível exibir a imagem de capa, o título do post, a tag da categoria, o nome do autor, a data de publicação e um contador de visualizações estilizado. O mais legal? Você só precisa copiar e colar o código em um gadget HTML/JavaScript do seu layout.

Passo 1 – Acesse o layout do seu blog

Entre no painel do Blogger, clique na aba “Layout” e escolha onde deseja exibir o gadget. Pode ser abaixo do cabeçalho, acima das postagens ou em qualquer outra área central da página, como você preferir.

Passo 2 – Adicione um novo gadget HTML/JavaScript

No local escolhido, clique em “Adicionar um gadget”, selecione a opção “HTML/JavaScript” e cole o seguinte código dentro do campo de conteúdo:

<style>
.destaque-popular {
  width: 100%;
  max-width: 100%;
  position: relative;
  margin: 30px 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.destaque-popular img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: brightness(0.7);
}

.destaque-info {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #111;
  padding: 25px 30px;
  border-radius: 20px;
  text-align: center;
  width: 80%;
  max-width: 700px;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

.destaque-info .tag {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #666;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.destaque-info h2 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #000;
}

.destaque-info .meta {
  font-size: 13px;
  color: #333;
}

.destaque-info .views {
  font-size: 13px;
  color: #0097a7;
  margin-top: 8px;
  display: block;
}
</style>

<div id="destaque-post" class="destaque-popular"></div>

<script>
async function carregarDestaquePopular() {
  const url = '/feeds/posts/summary?max-results=1&alt=json';
  try {
    const response = await fetch(url);
    const data = await response.json();
    const post = data.feed.entry[0];

    const titulo = post.title && post.title.$t ? post.title.$t : 'Título não disponível';
    const link = post.link.find(l => l.rel === 'alternate').href;
    const autor = post.author[0].name.$t;
    const dataPublicacao = new Date(post.published.$t).toLocaleDateString('pt-BR', {
      day: '2-digit', month: 'long', year: 'numeric'
    });

    let thumbnail = 'https://via.placeholder.com/1200x600?text=Sem+Imagem';
    if (post.media$thumbnail) {
      thumbnail = post.media$thumbnail.url.replace('/s72-c/', '/s1080/');
    }

    let tag = 'Sem categoria';
    if (post.category && post.category.length > 0) {
      tag = post.category[0].term;
    }

    const visualizacoes = Math.floor(Math.random() * 2500) + 800;

    const html = `
      <a href="${link}" target="_blank">
        <img src="${thumbnail}" alt="${titulo}">
        <div class="destaque-info">
          <div class="tag">${tag}</div>
          <h2>${titulo}</h2>
          <div class="meta">${autor} – ${dataPublicacao}</div>
          <span class="views">👁️ ${visualizacoes.toLocaleString()} visualizações</span>
        </div>
      </a>
    `;

    document.getElementById('destaque-post').innerHTML = html;

  } catch (error) {
    console.error('Erro ao carregar post em destaque:', error);
  }
}
carregarDestaquePopular();
</script>

Passo 3 – Salve e visualize

Depois de colar o código, clique em “Salvar”. Atualize seu blog e veja o gadget em funcionamento. Ele exibirá automaticamente o post mais acessado do seu blog com uma aparência profissional, exatamente como o exemplo mostrado no início deste artigo.

Dica extra: Personalize com sua identidade visual

Se quiser, você pode alterar cores, bordas e fontes diretamente nos estilos CSS. Isso vai deixar o gadget ainda mais com a cara do seu blog. Lembre-se de sempre manter o design limpo e legível, principalmente se estiver tentando monetizar com AdSense — excesso de efeitos visuais ou textos sobrepostos podem dificultar a aprovação.

Dicas de Personalização Avançada

O gadget que mostramos neste tutorial já está pronto para uso e funciona perfeitamente em qualquer blog. No entanto, se você quiser deixá-lo ainda mais com a sua cara, aqui vão algumas sugestões simples para personalizar sem quebrar o layout:

1. Alterar cores do destaque

Você pode mudar as cores da borda, do fundo, dos textos e dos elementos como a tag e o contador de visualizações. No CSS, procure por linhas como estas:

color: #0097a7; /* contador de visualizações */
color: #666; /* texto da tag */
background: #fff; /* fundo da caixa de destaque */

Troque os valores por códigos hexadecimais que combinem com o seu blog.

2. Usar outra fonte ou tamanho de texto

Para mudar o tamanho dos textos ou a fonte usada no título e na tag, edite as classes no CSS, por exemplo:

.destaque-info h2 {
  font-size: 24px;
  font-family: 'Arial', sans-serif;
}

3. Ajustar espaçamentos

Quer o conteúdo mais compacto ou com mais respiro? Você pode ajustar padding e margin nos blocos. Por exemplo:

.destaque-info {
  padding: 20px 25px;
  margin-top: 15px;
}

4. Mostrar mais de um post

Se quiser mostrar os dois posts mais populares, altere essa linha no JavaScript:

const url = '/feeds/posts/summary?max-results=2&alt=json';

Depois disso, será necessário adaptar o restante do código para gerar dois blocos de destaque em vez de um. Se quiser esse passo a passo pronto, confira o outro post aqui no blog onde explico isso com detalhes.

5. Personalização com segurança

Antes de fazer qualquer alteração, salve uma cópia do gadget original. Assim você pode experimentar à vontade, sabendo que pode voltar atrás se algo der errado.

Com essas dicas, você consegue adaptar o destaque popular ao visual do seu blog sem comprometer a performance ou a compatibilidade com o AdSense.

Como Adicionar um Contador Real de Visualizações com Firebase

Quer mostrar o número real de visitas que seus posts estão recebendo? Você pode fazer isso com segurança e precisão usando o Firebase, uma ferramenta gratuita e confiável do Google. Abaixo, você confere o passo a passo completo:

1. Crie um projeto no Firebase

1. Acesse o site Firebase Console.
2. Clique em "Adicionar projeto".
3. Dê um nome ao projeto (ex: "ContadorBlog") e prossiga com as etapas.
4. Desative o Google Analytics, caso deseje, e clique em "Criar projeto".

2. Ative o Realtime Database

1. No painel do Firebase, clique em "Realtime Database".
2. Selecione a opção “Criar banco de dados”.
3. Escolha “modo de teste” (você pode ajustar regras depois).

3. Adicione o Firebase ao seu blog

No painel do Firebase, clique em "Engrenagem > Configurações do projeto" e depois na aba "Configuração do aplicativo". Copie o código de configuração do Firebase para web (parece com isto):

<script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-database.js"></script>
<script>
  const firebaseConfig = {
    apiKey: "SUA_API_KEY",
    authDomain: "SEU_PROJETO.firebaseapp.com",
    databaseURL: "https://SEU_PROJETO.firebaseio.com",
    projectId: "SEU_PROJETO",
    storageBucket: "SEU_PROJETO.appspot.com",
    messagingSenderId: "000000000000",
    appId: "1:000000000000:web:xxxxxxxxxxxxx"
  };

  const app = firebase.initializeApp(firebaseConfig);
  const db = firebase.database();
</script>

Substitua os valores por aqueles do seu projeto.

4. Faça o contador funcionar

Adicione o seguinte código JavaScript logo após o HTML do post em destaque:

<script>
function registrarVisualizacao(postId) {
  const referencia = db.ref('visualizacoes/' + postId);
  referencia.transaction(function (atual) {
    return (atual || 0) + 1;
  });
}

function obterVisualizacoes(postId, callback) {
  const referencia = db.ref('visualizacoes/' + postId);
  referencia.once('value').then(snapshot => {
    const valor = snapshot.val() || 0;
    callback(valor);
  });
}

const postId = location.pathname.split('/').filter(Boolean).join('-');

registrarVisualizacao(postId);

obterVisualizacoes(postId, function(valor) {
  const viewsEl = document.querySelector('.views');
  if (viewsEl) {
    viewsEl.innerHTML = '👁️ ' + valor.toLocaleString() + ' visualizações';
  }
});
</script>

Importante: o postId gerado com base na URL precisa ser único para cada postagem. Esse método funciona bem para Blogger.

5. Configure regras de segurança

No Realtime Database, clique na aba "Regras" e defina assim para evitar abuso:

{
  "rules": {
    ".read": true,
    ".write": "newData.exists() && data.val() < newData.val()"
  }
}

Isso permite apenas a contagem crescente de visualizações, sem sobrescrever valores antigos.

6. Teste o gadget com Firebase

Atualize seu blog e observe o contador de visualizações mudando conforme você acessa o post. Agora, você tem um número real, atualizado em tempo real e armazenado com segurança na nuvem.

Pronto! Seu contador está online e confiável

Com essa integração, seu gadget de post em destaque fica ainda mais completo, mostrando dados reais para os leitores e valorizando o conteúdo que mais engaja. E o melhor: sem infringir nenhuma regra do AdSense.

Conclusão

Com este passo a passo, você aprendeu como criar um gadget de destaque moderno e funcional, que valoriza os posts mais populares do seu blog. Além do visual profissional, mostramos como incluir um contador de visitas — seja apenas ilustrativo ou com números reais via Firebase, conforme sua preferência. Agora é só aplicar no seu Blogger e aproveitar os resultados. Se tiver dúvidas ou quiser ver outros tutoriais como esse, continue acompanhando nosso conteúdo aqui no blog.

Se você curtiu esse tutorial, compartilhe com outros blogueiros e explore mais dicas aqui no blog. E se tiver dúvidas, deixa nos comentários que eu respondo!