quarta-feira, 25 de maio de 2011

Personalizar o Widget de Postagens Recentes

No outro artigo eu ensinei como incluir na sidebar uma lista com as ultimas postagens publicadas recentemente no blog, através de um gadget que utiliza seu próprio Feed, disponibilizado pelo próprio Blogger: Lista de Posts Recentes na sidebar.
Mostrei também que é possível utilizar este mesmo gadget para exibir uma lista de postagens recentes por marcador.

A Isabella perguntou, através dos comentários, como personalizar este widget, aplicando estilos CSS a ele.
Pensando nos outros leitores que possam ter a mesma dúvida , neste tutorial, veremos como aplicar estilos á lista de links exibidos no gadget de postagens recentes.
Veremos , como incluir ícones ao lado dos links, alterar a cor e tamanho dos links, e como incluir bordas abaixo dos links.

Uma nota importante:
Se você já personalizou os links da sua sidebar de acordo com este tutorial:
Personalizando os links da sidebar, caso já tenha incluído ícones ao lado dos links,não será necessário incluir icones novamente, pois as configurações aplicadas aos links da sidebar serão aplicadas automaticamente aos widgets que utilizarem links.

Mas se este não for o seu caso e você queira incluir ícones ao lado dos links apenas neste widget, entre na aba "design" >>"editar html", não precisa clicar em "expandir modelos de widgets" e procure por:
]]></b:skin>

E cole logo ACIMA dela:

#Feed1 li {
background: url(ENDEREÇO-DA-IMAGEM) no-repeat left;
line-height:1.5em;
margin:0;
padding:0 0 3px 20px; /*ajuste as margens se precisar*/
font-size: XXpx; /* tamanho da fonte */
border-bottom: 1px solid #XXXXXX; /* edite cor e tipo de borda */
}
#Feed1 ul {
margin:0;
padding:0;
list-style-type: none;
}
#Feed1 li a{
color:#XXXXXX; /* cor do link */
}


Vá visualizando para ver se está da maneira que você quer, e se for necessário, edite os valores em "padding" e salve!

0 comentários:

Postar um comentário