Resolvi brincar um pouco mais com o CSS e acabei decobrindo outros estilos que podem ser aplicados ao gadget Postagens Populares, criando assim uma continuação do post Personalizando o gadget Postagens Populares.
Pelo que pude notar, as miniaturas de imagens só funcionam em posts que começam com uma imagem. Se a imagem estiver no meio do post, por exemplo, sua miniatura não vai aparecer no gadget. Como eu quase não usava imagens no topo dos meus posts, precisei pegar o blog do meu irmão “emprestado”, para realizar os testes.
Sabendo que a maioria não tem intimidade com CSS, criei alguns estilos pra vocês usarem em seus blogs. Não se esqueçam que é preciso modificar as cores, a fim de que o gadget fique em harmonia com o template que vocês usam.
Estilo 1 – conteúdo com fundo transparente e sem borda
Neste modelo, usei um fundo transparente (para combinar com qualquer template), coloquei borda nas miniaturas e personalizei a cor do título e do resumo das postagens.

Neste outro modelo, mantive o estilo anterior, mas acrescentei uma borda ao gadget.

No estilo 3, coloquei cor no plano de fundo e mudei a cor do resumo dos posts.

Em alguns templates, existem pequenos ícones (bolinhas, setas e etc), que antecedem o texto do gadget. Para retirar o ícone, acrescente este código:

Sabendo que a maioria não tem intimidade com CSS, criei alguns estilos pra vocês usarem em seus blogs. Não se esqueçam que é preciso modificar as cores, a fim de que o gadget fique em harmonia com o template que vocês usam.
Estilo 1 – conteúdo com fundo transparente e sem borda
Neste modelo, usei um fundo transparente (para combinar com qualquer template), coloquei borda nas miniaturas e personalizei a cor do título e do resumo das postagens.

#PopularPosts1 .widget-content{ /*estilo para o conteúdo*/ padding: 3px;Estilo 2– conteúdo com fundo transparente e com borda
}
#PopularPosts1 a { /*cor do título*/ color: #ff0000;
}
#PopularPosts1 a:visited { /*cor do título visitado*/ color: #ff0000;
}
#PopularPosts1 a:hover { /*cor do título ao passar o mouse*/ color: #333;
text-decoration: underline;
}
#PopularPosts1 img{ /*borda e espaçamento da miniatura*/ border: 1px dotted #ccc;
padding: 5px;
margin: 2px 3px -7px;
}
.item-content{ /*estilo para o resumo dos posts*/ color: #333;
font-size: 90%;
padding-right: 5px;
}
.item-title { /*estilo da fonte do título*/
font-weight: bold;
font-size: 15px;
}
Neste outro modelo, mantive o estilo anterior, mas acrescentei uma borda ao gadget.

#PopularPosts1 .widget-content{ /*Estilo para o conteúdo*/Estilo 3 – conteúdo com fundo preto e borda cinza
padding: 3px;
border: 1px solid #ccc;
}
#PopularPosts1 a { /*cor do título*/
color: #ff0000;
}
#PopularPosts1 a:visited { /*cor do título visitado*/
color: #ff0000;
}
#PopularPosts1 a:hover { /*cor do título ao passar o mouse*/
color: #333;
text-decoration: underline;
}
#PopularPosts1 img{ /*borda e espaçamento da miniatura*/
border: 1px dotted #ccc;
padding: 5px;
margin: 2px 3px -7px;
}
.item-content{ /*estilo para o resumo dos posts*/
color: #333;
font-size: 90%;
padding-right: 5px;
}
.item-title { /*estilo a fonte do título*/
font-weight: bold;
font-size: 15px;
}
No estilo 3, coloquei cor no plano de fundo e mudei a cor do resumo dos posts.

#PopularPosts1 .widget-content{ /*Estilo para o conteúdo*/Para adequar ao template de vocês, mudem as cores em color e background. Talvez seja necessário mexer nas margens (margin) e preenchimentos (padding).
padding: 3px;
border: 1px solid #ccc;
background: #333;
}
#PopularPosts1 a { /*cor do título*/
color: #ff0000;
}
#PopularPosts1 a:visited { /*cor do título visitado*/
color: #ff0000;
}
#PopularPosts1 a:hover { /*cor do título ao passar o mouse*/
color: #333;
text-decoration: underline;
}
#PopularPosts1 img{ /*borda e espaçamento da miniatura*/
border: 1px dotted #ccc;
padding: 5px;
margin: 2px 3px -7px;
}
.item-content{ /*estilo para o resumo dos posts*/
color: #fff; font-size: 90%;
padding-right: 5px;
}
.item-title { /*estilo a fonte do título*/
font-weight: bold;
font-size: 15px;
}
Em alguns templates, existem pequenos ícones (bolinhas, setas e etc), que antecedem o texto do gadget. Para retirar o ícone, acrescente este código:
#PopularPosts1 li{ /*Estilo para retirar o ícone*/Para manter o ícone e acertar o espaçamento com o texto, acrescente:
background-image:none;
}
#PopularPosts1 li{Mais completo que isto, impossível, né? Usem a criatividade e boa diversão o/
padding-left: 15px;
padding-top: 3px;
}
Juliana,
ResponderExcluirFez tudo isso do almoço até agora? Impressionante!
Ficou muito bom. Até me deu vontade mudar o que tenho.
Excelente post! \0/
Abraços
Olá Ju,
ResponderExcluirQue legal que você resolveu 'brincar um pouco mais com o CSS" .. rsrs
Adorei essa sequência complementando ricamente o post anterior sobre este gadget, Ju!!!
Puxa, agora vou 'brincar' tb, em meu template ;)
E uma coisa que observei quanto as imagens em miniatura:
- fiz um teste e notei, no meu caso, que as imagens que adicionei aos posts e deixo o link de origem (publicados pelo editor do blogger), aparecem no gadget normal.
Porém, como há um bom tempo uso o Live Writter, e por lá, eu opto por 'nenhum' ao add as imagens nos posts, então elas não aparecem no gadget de posts pupolares.
Mas tudo bem, vc deixou material aqui de sobra para podermos personalizá-lo ;)
Valeu Ju!
Obrigada por mais este post completíssimo!
Beijos no ♥
uau! ficou demais, as dicas são muito boas!
ResponderExcluirMuito legal essa dica de customização do gadget, parabéns por mais este tutorial.
ResponderExcluirjuliana socorro,o seguidores do meu blog não tá pegando dá pra dar uma olhada lá, eu olhei um pouco no forúm do google e achei mais pessoas com esses problema olha lá pra você ver :
ResponderExcluirhttp://tecnologia-crazy.blogspot.com
Ótima dica, Juliana.
ResponderExcluirSeu blog sempre útil, como sempre.
Juliana,
ResponderExcluirSaudações de Belo Horizonte!!
Este Post é para relatar um problema com o widget de ESTATÍSTICAS do Blogger.
Todo santo dia, apesar de eu selecionar a opção "TODO O PERÍODO", de repente, do nada, horas depois ou no dia seguinte, o Blogger apresenta não "todo o período", mas um número de um só dígito.
Às vezes é 7, noutras 5...
... Fico pensando se esses números se referem à contagem da última hora ou do último dia.
CONTUDO, como pode ser isso, SE o WIDGET nem mesmo dá a opção "Últimas 24 horas", apenas:
-Todo o período;
-Últimos 30 dias e
-Última semana??
POR QUE O CONTADOR DO BLOGGER ESTÁ "LOUCO"?
Um Beijão e Muito Obrigada!
Ah: no Post de 4 meses de aniversário do meu Blog, mencionei a importância do seu trabalho. Se puder, confira neste Link:
http://www.acatolica.com/2010/11/internautas-vamos-de-maos-dadas-4-meses.html
Saúde e Paz!!
A você e a Todos os internautas do Dicas Blogger!!
Ana, este tipo de problema deve ser reportado diretamente no fórum oficial do Blogger.
ResponderExcluirMuito obrigada por ter citado meu blog ;)
Juliana,
ResponderExcluirSaudações de BH (de novo)!!
Fiz conforme me recomendou. (Foi a minha estreia no Fórum do Blogger!...) Minha pergunta ficou assim:
"Por que eu seleciono Todo o Período no Widget de Estatísticas e, no dia seguinte, aparece um número de um único dígito?"
Um Abraço!
Que Deus siga abençoando o Seu Trabalho, digno de Admiração, Reconhecimento e... Muita Alegria!!
"Não tem preço" (como na propaganda) a sua ajuda a todos nós.
Saúde e Paz!!
A você e a Todos os Seus Fãs!!
~~~
Coo faço para justificar o texto e centralizar o título das miniaturas.
ResponderExcluirJuliana, esqueça o que eu te perguntei antes. O que eu quero saber agora é como inserir um parágrafo nos resumos dos posts desse gadget, pois a primeira linha fica colada a borada da imagem.
ResponderExcluirMarlon, como você pode ver nas imagens, isso não aconteceu no blog onde fiz o teste. Tais recursos variam de template para template. Sendo assim, não tenho como te ajudar.
ResponderExcluirOlha eu aqui denovo... rs.
ResponderExcluirEstou fazendo umas alterações na minha homepage agora, e a sua dica me ajudou muito.
O interessante é que, como estou usando dois gadget's 'Postagens Populares', notei que o nome do segundo gadget é 'PopularPosts2'.
Achei que seria útil dar este toque.
Abraços e tudo de bom.
Sempre tive vontade de comentar e comento agora, porque vc arrasa sempre, tudo que preciso para o meu blog encontro por aqui! Parabéns por mais essa boa dia!
ResponderExcluirLiz
branquelasardenta.blogspot.com
Juliana, posso estar fazendo uma pergunta besta! rsrs mais no meu template não tem nenhuma imagem que antecede o texto, como eu coloco esse marcador?
ResponderExcluirOlá sou viciado em blog e html e css queria passar uma dica que pode levar uam atualização do artigo que seria essa
ResponderExcluir#PopularPosts1 img{ /*borda e espaçamento da miniatura*/
height: 100px;
width: 65px;
border: 0px dotted #ccc;
padding: 0px;
margin: 2px 3px -7px;
}
colocando height e width as pessoas podem alterar o tamanho da miniatura quanto vi seu codigo imaginei de cara ficou 10 eu uso a sim no meu blog.
Vlw
Mais uma dica das boas.
ResponderExcluirO Dicas Blogger é simplesmente o THE BEST.
ResponderExcluirI will use this on my blog. thank you for the nice article.
ResponderExcluir