Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

15 julho 2009

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)

 
resultado

Artigos Relacionados

19 comentários:

alexandre disse...

Muito interessante este aspecto para a lista de blogues.

O que muito provavelmente dà já uma pequena ideia do que pode aparecer no proximo Template TNB ;)

OCP disse...

Muito bom mesmo. :D

Tenho andado tentando descobrir como fazer algo assim.

Você salvou meu dia mais uma vez.

Obrigado. :)

windsurfmexico.com disse...

hola yo utilizo el bloglist widget para unas secciones de mi blog y las tengo con imagenes pero cuando le doy click a las imagenes me manda al contenido general y no al del post que corresponde, sabes porque pasa esto?
los titulos si mandan directo al post.

obrigado

OCP disse...

Só para dizer que já testei e gostei do resultado. :D

Até brinquei um pouco com o código e com algumas pequenas alterações consegui mostrar a miniatura da imagem com eu queria.

Já implementei as mudanças no meu blog principal. Mantive o básico do seu desenho porque na verdade é o estilo que melhor se integra no meu canto, mas hospedei as imagens nos meus servidores. Espero que não se importe.

Abraço. :)

Ariane disse...

alexandre tem razão, estou testando um novo modelo :)

OCP o melhor de publicar um tutorial é descobrir que ele foi útil para alguém. Obrigada pelo seu comentário e fique à vontade para usar e alterar o modelo. abraços!

windsurfmexico, fiz um teste aqui e deu certo. Clique em Expandir Modelo de Widget e encontre o seguinte trecho do gadget:

<div class='item-content'>
<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
</a>
</div>

substitua o que está em negrito por data:item.itemUrl

abraços!

windsurfmexico.com disse...

Hola Ariane

Muchas gracias , ahora quedo perfecto

obrigado :)

.Diiego disse...

Uma coisa muito boa no wordpress é que ele fornece feed para cada categoria, o que é ótimo para sites grandes.
No blogger só há tags. Há alguma forma de ter um feed apenas para os posts de uma determinada tag?

Obrigado.

Ariane disse...

Diiego, acho que vc está se referindo à isto: http://templatesparanovoblogger.blogspot.com/2007/12/feed-nos-marcadores.html

Aline disse...

Oi, Ariane.
Desculpe minha ignorância nisso, mas esses códigos deveriam aparecer depois do "head"?

É que antes nenhum deles aparece e dentro do "head" o que tem é tipo esses:

"div class='blog-list-container' expr:id='data:widget.instanceId + "_container"'"
"ul expr:id='data:widget.instanceId + "_blogs"'"
"b:loop values='data:items' var='item'"
"li expr:style='data:item.displayStyle'"
"div class='blog-icon'"
"b:if cond='data:showIcon == "true"'"
"input expr:value='data:item.blogIconUrl' type='hidden'/"
"/b:if"
"/div"

As modificações entrariam onde, exatamente? Tem algum post seu que trata dessa linguagem? Estou perdidinha...

Desculpe minha insistência, espero que não esteja te chateando.

De qualquer forma, muito obrigada.

John Érico disse...

Ariane, eu gostaria de tirar uma dúvida, mas como você deixa claro na página para contato que não responde perguntas sobre códigos, acho que não tem nada de mal perguntar aqui... Bem, minha dúvida é: eu criei um blog a pouco tempo, porém, eu gostaria de saber como faço para colocar um imagem como background do rodapé do template. Eu já tentei dezenas de vezes, porém falho miseravelmente... Meu blog é: http://johnericoblog.blogspot.com/ (não é SPAM, só quero ajuda).

Desde já, fico muito grato!

Ariane disse...

John você gostaria de colocar este background no rodapé do fundo da página ou no rodapé do corpo do template (na parte branca)? aguardo.

Ariane disse...

Aline estes códigos devem ser colocados em qualquer parte do template antes de ]]></b:skin>

John Érico disse...

"Ariane disse...
John você gostaria de colocar este background no rodapé do fundo da página ou no rodapé do corpo do template (na parte branca)? aguardo."

@ Ariane: Eu gostaria de colocar uma imagem como background onde está escrito: "BLOG DO ÉRICO
Copyright © 2009. Todos os direitos reservados. Template "Denim" modificado por John Érico" no rodapé do blog. Grato pela resposta e aguardo.

Ariane disse...

John você cria a imagem, hospeda em algum site, pega a url fornecida e vai no código do template (editar HTML) e procura por body{
background: $bgcolor;

e deixa assim:

body{
background: #000 url(link da imagem) bottom;

agora tem um porém: se é uma imagem que deve se repetir horizontalmente de ponta à ponta da tela, na parte de baixo, coloque:

body{
background: #000 url(link da imagem) repeat-x bottom left;

se for centralizada na base, assim:

body{
background: #000 url(link da imagem) no-repeat bottom center;

Perfil disse...

Olá tem uma homenagem para você lá no meu blog!
bjs

BLOG FERRAMENTA PEDAGÓGICA

plaidy disse...

Ótima dica, personaliza bem. :D

Viv disse...

Oi Ariane, vc poderia ensinar como faz uma lista de blogs igual o que vc usa neste site?

Maria Marlene disse...

Oi Ariane.. Amei suas dicas. Gostaria de colocar uma mini-imagem antes de cada nome dos blogs da minha lista. Já consegui colocar nos marcadores, mas na lista de blogs, não. É possível...Bjus!

Ariane disse...

Maria Marlene não entendi bem; você gostaria que tivesse um pequeno resumo do último post publicado pelo blog? Por que isso o gadget faz automaticmanete, é só clicar na opção. Se não for isso, deixa o link do blog para que eu possa ver.

Postar um comentário

Os comentários são moderados.