segunda-feira, 10 de novembro de 2008

Escolha o ícone da sua lista de blogs

Nível: iniciante

Quando você cria uma lista de blogs no Blogger, tem a opção de mostrar os ícones dos blogs listados, como neste exemplo:

Alguns blogs não vão exibir ícone algum, outros vão exibir o ícone de sua hospedagem gratuita (Blogger, Wordpress…) e só alguns títulos de blogs vão aparecer com seu próprio ícone.

Se cada blog exibisse seu próprio ícone eu ía preferir assim, mas como fica bastante irregular, eu preferi padronizar as imagens que são exibidas antes dos títulos dos blogs.

Passo 1 - Vá até Layout >> Elementos da Página e clique em Editar na widget da sua lista de blogs. Desmarque a opção Ícone e Salve:

As demais opções você pode deixar como estavam antes.

Passo 2 - Escolha uma imagem que vai utilizar como "ícone" nas suas listas de blogs e copie o endereço dela. Se quiser sugestões eu recomendo o Website Bullets.

Passo 3 - Vá até Layout >> Editar HTML e procure pelo código ]]></b:skin>

Logo acima, cole o código abaixo, sendo que na parte em destaque você coloca o endereço do seu ícone:

.blog-title {background:url(http://www.websitebullets.com/bullets/71.gif) no-repeat left; padding-left:20px;}

Tem que ficar assim:

.blog-title {background:url(http://www.websitebullets.com/bullets/71.gif) no-repeat left; padding-left:20px;}
]]></b:skin>

Clique em Visualizar antes de salvar. Deve ficar parecido com isso:

Lista com snippets Lista sem snippets

Se você sabe um pouco de CSS, já percebeu que não é um ícone verdadeiro, é um background que, utilizado sem repetir (no-repeat), alinhado à esquerda (left) e com certa distância do texto (padding-left:20px), fica parecendo um ícone. Funciona com qualquer outra class ou id do seu blog/site.

6 comentários:

  1. Muito bom o seu Blog. Parabéns!
    A dica é ótima e de fácil entendimento. Já incorporamos-a em nosso blog.

    abção

    andrea

    ResponderExcluir
  2. porém só funciona no Internet Explorer.
    Que pena...

    ResponderExcluir
  3. @Juba e Dea,

    Internet Ex o quê? Eu não uso essa meleca não. Todos os meus tutoriais são feitos no Firefox. Depois que estão prontos é que testo também no Opera, no Chrome e no IEca. Se o seu só funcionou no Internet Explorer é porquê não fez direito.

    Esse tutorial funciona perfeitamente nesses quatro navegadores.

    Tente outra vez!

    ResponderExcluir
  4. Oi, eu gostaria de fazer o mesmo com a lista de marcadores, como posso fazer isso?
    Ah! e eles abrem na mesma página, tem como força-los a abrirem em pagina diferente?

    @idanouse

    ResponderExcluir
  5. Olá Helen!

    Muito obrigado por mais essa dica. Sempre achei irritante a não exibição dos favicons na lista. Mesmo o meu, (que é personalizado), aparecia como o do Blogger. E agora o problema está resolvido.
    Parabéns pelo artigo.

    Ps.: Para hospedar imagens, recomendo também o Webs. É onde hospedo as imagens para o meu site.

    Abraços.

    @SamejSpenser

    ResponderExcluir
  6. @SamejSpenser, considerando tudo que já aprendi sobre o Picasa, eu realmente duvido que exista uma hospedagem gratuita de imagens melhor, mas gosto é gosto.

    Eu fiz um cadastro experimental no Webs e achei interessante para quem quer fazer um site simples sem ter contato com código fonte. Boa dica!

    ResponderExcluir

Posts relacionados