Customizando gadget de Lista de Blogs
Uma das opções de gadgets oferecidas pelo Blogger é a Lista de Blogs, que facilita muito a divulgação de blog amigos/recomendados/parceiros, na sidebar.
Você pode optar por mostrar a lista em ordem alfabética ou por blogs atualizados mais recentemente, o número de blogs a serem apresentados na lista e os detalhes que serão mostrados, como o ícone de cada blog, título do post mais recente, um pequeno resumo deste post, miniatura da imagem utilizada no último post e a data da atualização. Ao clicar em adicionar à lista, você deve escolher os blogs a serem apresentados, seja adicionando a url de cada um ou a lista dos blogs que acompanha ou mesmo incrições do Google Reader.
Tudo muito fácil, rápido e simples. No entanto o resultado pode não ser o esperado pois a formatação da lista não acompanha as determinações para as listas da sidebar e as fontes podem se apresentar muito maiores do que o desejado.
Customizei uma lista de blogs, que pode ser vista aqui na sidebar e optei por não mostrar os ícones nem a miniatura da imagem do último post.
A lista está contida na div BlogList1_container e a classe é blog-list-container.
#BlogList1_container - todo o gadget Lista de Blogs
.blog-list-container ul - classe da lista de blogs
#BlogList1_blogs li - cada item da lista
#BlogList1_blogs li:hover - cada item da lista no estado hover
.blog-title a:link, .blog-title a:visited - título dos blogs
.blog-title a:hover - títulos dos blogs no estado hover
#BlogList1_container .blog-content - conteúdo de cada item da lista
.item-content - espaço ocupado por cada resumo apresentado
.item-title a:link, .item-title a:visited - título do último post apresentado
.item-title a:hover - título do último post no estado hover
.item-snippet - cada resumo apresentado
.item-time - data de cada post
O código CSS para meu modelo ficou assim (comentários em azul):
#BlogList1_container{
padding:4px; (espaço para os limites do gadget, possibilitando ver o background escolhido)
background: url(http://i29.tinypic.com/jpykqw.gif) repeat; (imagem do background)
border: 1px dotted #111 (borda do gadget)}
.blog-list-container ul{margin: 10px;} (margem da lista)
#BlogList1_blogs li{
margin-bottom: 5px;
padding: 5px;
font-size: 12px;
background: #222;
border: 1px dotted #111} (estilo para cada item da lista)
#BlogList1_blogs li:hover{background: #333} (estilo para cada item da lista no estado hover)
.blog-title a:link, .blog-title a:visited{
display:block;
width: 95%;
padding-left:514px;
padding-top: 3px;
background: url(http://i26.tinypic.com/1z4byma.jpg) no-repeat bottom left
font-size: 13px;
color: #8e8eff;
font-family:'Palatino Linotype'; } (estilo para os títulos dos blogs)
.blog-title a:hover{color: #ccc} (estilo para os títulos no estado hover)
#BlogList1_container .blog-content{
width: 95%;
background: #111;
padding: 5px;} (estilo para o espaço ocupado pelo conteúdo de cada item da lista)
.item-content{margin: 0px 0px;padding: 4px 13px;margin: 3px 0 0 }(estilo para o espaço ocupado pelo título do post e resumo)
.item-title a:link,.item-title a:visited{color:#b88df9; font-size:12px;}(estilo para os títulos dos posts)
.item-snippet{font-family: Verdana; text-transform:capitalize;line-height:0px;color: #ccc; }(estilo para os resumos)
.item-time {color: #dad8d8}(estilo para as datas)
Leia Mais
Tudo muito fácil, rápido e simples. No entanto o resultado pode não ser o esperado pois a formatação da lista não acompanha as determinações para as listas da sidebar e as fontes podem se apresentar muito maiores do que o desejado.
Customizei uma lista de blogs, que pode ser vista aqui na sidebar e optei por não mostrar os ícones nem a miniatura da imagem do último post.
A lista está contida na div BlogList1_container e a classe é blog-list-container.
#BlogList1_container - todo o gadget Lista de Blogs
.blog-list-container ul - classe da lista de blogs
#BlogList1_blogs li - cada item da lista
#BlogList1_blogs li:hover - cada item da lista no estado hover
.blog-title a:link, .blog-title a:visited - título dos blogs
.blog-title a:hover - títulos dos blogs no estado hover
#BlogList1_container .blog-content - conteúdo de cada item da lista
.item-content - espaço ocupado por cada resumo apresentado
.item-title a:link, .item-title a:visited - título do último post apresentado
.item-title a:hover - título do último post no estado hover
.item-snippet - cada resumo apresentado
.item-time - data de cada post
O código CSS para meu modelo ficou assim (comentários em azul):
#BlogList1_container{
padding:4px; (espaço para os limites do gadget, possibilitando ver o background escolhido)
background: url(http://i29.tinypic.com/jpykqw.gif) repeat; (imagem do background)
border: 1px dotted #111 (borda do gadget)}
.blog-list-container ul{margin: 10px;} (margem da lista)
#BlogList1_blogs li{
margin-bottom: 5px;
padding: 5px;
font-size: 12px;
background: #222;
border: 1px dotted #111} (estilo para cada item da lista)
#BlogList1_blogs li:hover{background: #333} (estilo para cada item da lista no estado hover)
.blog-title a:link, .blog-title a:visited{
display:block;
width: 95%;
padding-left:514px;
padding-top: 3px;
background: url(http://i26.tinypic.com/1z4byma.jpg) no-repeat bottom left
font-size: 13px;
color: #8e8eff;
font-family:'Palatino Linotype'; } (estilo para os títulos dos blogs)
.blog-title a:hover{color: #ccc} (estilo para os títulos no estado hover)
#BlogList1_container .blog-content{
width: 95%;
background: #111;
padding: 5px;} (estilo para o espaço ocupado pelo conteúdo de cada item da lista)
.item-content{margin: 0px 0px;padding: 4px 13px;margin: 3px 0 0 }(estilo para o espaço ocupado pelo título do post e resumo)
.item-title a:link,.item-title a:visited{color:#b88df9; font-size:12px;}(estilo para os títulos dos posts)
.item-snippet{font-family: Verdana; text-transform:capitalize;line-height:0px;color: #ccc; }(estilo para os resumos)
.item-time {color: #dad8d8}(estilo para as datas)
resultado