Tutorial: Postagens + Lidas

Hi honey! Se tem um cantinho do blog que eu acho super útil, tanto pra quem visita quanto pra mim mesma, é o widget de postagens mais lidas. Ele mostra, de forma automática, quais são os conteúdos que mais chamaram atenção no seu blog, e isso é ótimo pra dar visibilidade aos seus posts favoritos (ou inesperadamente populares rs). E sim, eu também uso esse widget aqui no blog! Mas confesso que, no visual padrão dele, nunca fui muito fã… aquelas listas simples, sem muita harmonia com o restante do layout, me incomodavam. Então, como boa apaixonada por detalhes e organização visual, dei uma carinha nova pra ele com CSS personalizado e hoje vou te mostrar como fazer o mesmo no seu blog! O resultado é uma lista bonitinha, bem alinhada, com bordas suaves, fontes harmônicas e um hover sutil nas imagens e nos textos. Tudo com as cores que combinam com o restante do seu layout ou seja, o widget fica ali todo funcional, mas com estilo! Veja aqui como vai ficar +++

1. Acesse o código do seu tema

• Vá até Tema → clique na setinha ao lado de "Personalizar" → selecione "Editar HTML".

2. Localize o bloco de estilos

• Procure pela tag <b:skin><![CDATA[ ou pelo final do seu bloco <style>

3. Cole este código dentro do bloco de CSS:

/* Postagens mais lidas - visual moderno e limpo */
.sidebar .widget:last-of-type { background-color: transparent; padding: 0; border: none; box-shadow: none; font-family: 'Abeezee', sans-serif; font-size: 12px !important; color: #333; margin-top: 50px; margin-left: 1px; }
.sidebar .widget:last-of-type { font-size: 12px !important; letter-spacing: 0px !important; }
.sidebar .widget:last-of-type * { font-size: inherit !important; letter-spacing: 0px !important; }
.sidebar-last-title { color: #c9a9df; font-size: 12px; text-transform: uppercase; margin-bottom: 5px; position: relative; text-align: left; font-weight: 600; letter-spacing: 1px; }
.sidebar-last-title::after { content: ''; width: 50px; height: 2px; background: #c1e1e1; display: block; margin-top: 5px; margin-bottom: 5px; }
.popular-posts-list { list-style: none; padding: 0; text-transform: none !important; padding-left: 0 !important; }
.popular-posts-list li { display: flex; align-items: center; gap: 10px; background-color: #f8f8f8; border: 1px solid #d1d3d2; padding: 4px 6px; margin-bottom: 8px; transition: background-color 0.3s ease, border-color 0.3s ease; }
.popular-posts-list li img { width: 40px; height: 40px; object-fit: cover; transition: transform 0.3s ease, filter 0.3s ease; } .popular-posts-list li a { font-family: 'ABeeZee', sans-serif; font-size: 12px; text-align: left; color: #a2a2a2; text-decoration: none; line-height: 1.3; flex: 1; }
.popular-posts-list li:hover { background-color: #f8f8f8; border-color: #bdbfbe; } .popular-posts-list li:hover img { transform: scale(1.05); filter: brightness(1.1); } .popular-posts-list li:hover a { color: #bdbfbe; }

4. Adicione um Widget HTML

<div class="widget Content popular-posts">
<p class="sidebar-last-title">Mais lidas</p>
<div class="widget-content">
<ul class="popular-posts-list">
<li>
<img src="link da imagem da postagem" alt="Thumb 1" />
<a href="link da postagem">Título da Postagem</a>
</li>

<li>
<img src="link da imagem da postagem" alt="Thumb 2" />
<a href="link da postagem">Título da Postagem</a>
</li>

<li>
<img src="link da imagem da postagem" alt="Thumb 2" />
<a href="link da postagem">Título da Postagem</a>
</li> </ul></div></div>

5. Salve o tema

• Depois de colar o código, clique em Salvar no canto superior direito.
• Lembre-se de que para funcionar corretamente, esse widget deve ser o último na sua sidebar, você consegue mover indo em Layout → localizar na sidebar o seu widget → arraste até o último.

Agora o seu widget de postagens mais lidas vai combinar com o restante do seu layout, sem perder a funcionalidade. Se quiser ajustar cores, fontes ou bordas, é só brincar com os valores no CSS. E se tiverem dúvidas, deixa um comentário aqui que eu respondo!