Ícones das categorias no topo da postagem

Certeza 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 possui Blogger, 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!

Comente pelo Facebook

8 comentários:

  1. Adorei a dica. Acho que a disposição do elemento no topo deixa o visual bem organizado, sem contar que acaba sendo um modo de deixar o blog mais bonito.

    Beijo,
    http://www.criativissimo.com

    ResponderExcluir
  2. Não encontrei o quarto passo no meu HTML :(

    ResponderExcluir
  3. Amei a dica, andei procurando em alguns lugares e todos deixavam tudo muito complicado. Vou testar no meu e se funcionar volto pra dizer no que deu.

    Ah, ensina a tirar aquele "postagens com o marcador ... " que aparece no blogger quando vamos olhar determinado marcador. Acho aquilo muito chatinho :s


    Beijos <3

    ResponderExcluir
  4. Não achei nenhum dos dois códigos " " :(((( e agora??

    ResponderExcluir
  5. ótimo tutorial mas eu não encontrei o quarto passo no meu html :(
    http://flor-de-neve.blogspot.com.br/

    ResponderExcluir
  6. Já estava morrendo de agonia querendo saber quando você ia postar esse tutorial ♥
    Como sempre uma explicação de fácil entendimento e ótimos conteúdos.
    Beijos, wolfmess blog

    ResponderExcluir
  7. Eu conheci seu blog hoje e já estou amando <3
    Estou utilizando muito de seus tutoriais no meu layout e tá ficando muito fofinho.
    Vou voltar sempre aqui :)

    ResponderExcluir