Ícones das categorias no topo da postagem

erteza que este é o tutorial mais esperado e mais pedido por vocês, as categorias no topo da postagem, mas antes de qualquer coisa uma pequena observação: este tutorial funciona apenas para quem possuiBlogger, se você tem Wordpress infelizmente não sei como adicionar esta função, deve ter alguma semelhança com o que vou explicar aqui, mas não vai funcionar no seu layout.

Primeiro passo acesse, Blogger >> Modelo >> Edit HTML (sim, vamos mexer no seu html, por isso faça o backup do seu layout atual antes de qualquer modificação, ok?)

Segundo passo, adicione o seguinte código no CSS do seu layout.

.format-icon{
    float: left;
    position: relative;
    left: 45%;
    padding-bottom: 0;
    margin-top: -44px;
}

Terceiro passo, adicione este código antes da tag </head>.

<script type='text/javascript'>
function lebel_logo(etiqueta) {
imagenes = new Array();
imagenes[1] = &quot;<img src='link do ícone' title='titulo'/>&quot;
if (etiqueta == &quot;marcador&quot;)
{document.write(imagenes[1]);}
}
</script>

Separei os itens que você deve editar por cores, não tem mistério. Você esta vendo dois códigos, o primeiro que podemos editar o link do ícone e o titulo. O segundo é este que começa com "if", o mais importante dos dois, pois é ele que vai se relacionar com os marcadores que escrevemos na postagem.

Um exemplo bem rápido, escrevo uma postagem sobre comida, o marcador que utilizo para este tipo de post é "receitas" então, ficaria assim ex: if (etiqueta == &quot;receitas&quot;), entenderam?

Recapitulando o que se pode editar: 
link do ícone: basta colar o link do seu icone, você pode hospedar nesse site aqui;
titulo: titulo da imagem;
marcador: nome do marcador, este deve estar igual ao que você utiliza nas postagem (letra maiúscula, minuscula, acentuação e etc.);
1, 2, 3 ...: faz o link da imagem com o seu marcador.

Vou mostrar um exemplo com mais marcadores, não sei  máximo de ícones que podemos cadastrar, mas aqui no enjoy utilizo doze, basta ir duplicando e adicionando deste modo:

<script type='text/javascript'>
function lebel_logo(etiqueta) {
imagenes = new Array();
imagenes[1] = &quot;<img src='link do ícone' title='fotografia'/>&quot;
imagenes[2] = &quot;<img src='link do ícone' title='receitas'/>&quot;
imagenes[3] = &quot;<img src='link do ícone' title='tutoriais'/>&quot;
imagenes[4] = &quot;<img src='link do ícone' title='músicas'/>&quot;
if (etiqueta == &quot;fotografia&quot;)
{document.write(imagenes[1]);}
if (etiqueta == &quot;receitas&quot;)
{document.write(imagenes[2]);}
if (etiqueta == &quot;tutoriais&quot;)
{document.write(imagenes[3]);}
if (etiqueta == &quot;musicas&quot;)
{document.write(imagenes[4]);}
}
</script>

Quarto passo, cole este código antes de, <article class='post hentry'......> ou antes de <header class='entry-header'>.

<b:loop values='data:post.labels' var='label'>
<a class='format-icon' expr:href='data:label.url' rel='tag'>
<script type='text/javascript'>lebel_logo(&quot;<data:label.name/>&quot;);</script></a>
</b:loop>

Salve tudo e esta pronto, caso não funcione de jeito nenhum cole este código antes de </head>

<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>

Faça os testes antes do adicionar este jquery, pois dois códigos jquery no seu layout podem causar erros nos seus plugins já instalados ou que você pretende instalar no futuro.

F.A.Q:
Onde fica meu css?
Modelo >> editar HTML, ele esta entre <b:skin> e </b:skin>.

Deixe nos comentários suas dúvidas e sugestões.
Beijos!