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.
