Customizando gadget de Lista de Blogs
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
19 comentários:
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 ;)
Muito bom mesmo. :D
Tenho andado tentando descobrir como fazer algo assim.
Você salvou meu dia mais uma vez.
Obrigado. :)
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
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. :)
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 == "true"'>
<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!
Hola Ariane
Muchas gracias , ahora quedo perfecto
obrigado :)
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.
Diiego, acho que vc está se referindo à isto: http://templatesparanovoblogger.blogspot.com/2007/12/feed-nos-marcadores.html
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.
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!
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.
Aline estes códigos devem ser colocados em qualquer parte do template antes de ]]></b:skin>
"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.
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;
Olá tem uma homenagem para você lá no meu blog!
bjs
BLOG FERRAMENTA PEDAGÓGICA
Ótima dica, personaliza bem. :D
Oi Ariane, vc poderia ensinar como faz uma lista de blogs igual o que vc usa neste site?
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!
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.