#TutoriaisDaJaque | Icones das Categoria nas Postagens

Geeenteeeee, socorrrooo, tô recebendo um mooontão de e-mails e mensagens pedindo para eu fazer um tutorial de como colocar icones das categoria nas postagens igual temos aqui no blog. Jurei que o próximo post aqui do blog não seria de tutorial mas cês tão pedindo muito entããããão aqui está e espero MUITO que gostem.

 Vamos lá: Jaque, vai funcionar no meu blog? Amor, não sei te dizer! Tudo indica que sim mas como eu falo, tudo depende da estrutura do seu blog, de como seus códigos funcionam, como eles foram programados e enfim, muitas coisinhas que é impossível eu saber por você. Então vale muito a pena estudar um pouquinho a estrutura do seu blog e testar para ver se dá certo, ok? Não é um tutorial difícil mas você tem que prestar muito atenção para não excluir nenhum código que não deva ser excluído.

 Um conselho importante: faça backup do código fonte do seu blog antes de testar esse tutorial ou faça em um blog de testes para não correr nenhum risco de bugar o seu código todo, ok?

 Quais são as categorias que você mais usa no blog? Abra o bloco de notas e anote todas elas. Cuidado para não anotar coisa demais pois se não você se perde e acaba não atualizando tudo e fica aquela bagunça. Defina somente as categorias que você mais usa mesmo 😍

 Para as Categorias aparecerem será necessário que você tenha posts no seu blog com o nome delas. Assim que você faz um post, do lado direito do monitor tem escrito "MARCADORES", é lá que você vai colocar o nome e publicar o post normalmente. Por exemplo, se teu post é sobre moda, você escreve moda, se for resenha de livros, escreva resenhas e assim por diante

 Você precisará das imagens para colocar nos posts, certo? Para isso recomento que entre no site www.flaticon.com e lá encontrará muitas ícones para usar e abusar. Dica: procure pelo nome da sua categoria em inglês, você encontrará muitas mais imagens ou procure no google pacotes de imagens para categorias, certeza que achará. As do meu blog eu que desenho, se você souber desenhar se jooga!
 O site é bem simples de mexer mas caso não saiba recomendo que dê uma lida nesse tutorial do blog da Casinha Arrumada, o site atualizou depois que ela postou o tutorial mas seguindo as dicas dela você se acha rapidinho. Depois de escolher as imagens, salve no tamanho que deseja (recomendo que seja pequeno, fica mais bonito 64x64) e hospede essa imagem em algum site, pode ser no tumblr, no imgur ou em qualquer outro de sua preferência. Guarde o link dessa imagem hospedada que iremos usar já já.

 Vá em Modelo > Editar HTML > Click com o mouse em cima dos códigos e tecle CTRL +F irá abrir uma caixinha de busca. Dentro dela procure por <div class='post-header'> terá 2 códigos iguais estamos em busca do 2º código, tecle enter novamente e cole ACIMA dele:

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

Novamente tecle CTRL + F e na caixinha de busca e procure por </head> ACIMA dele cole:

<script type='text/javascript'>
function lebel_logo(etiqueta) {
imagenes = new Array();
imagenes[1] = &quot;<img src=' LINK DA IMAGEM 1 ' title=' NOME DA CATEGORIA 1 '/>&quot;
imagenes[2] = &quot;<img src=' LINK DA IMAGEM 2 ' title=' NOME DA CATEGORIA 2 '/>&quot;
imagenes[3] = &quot;<img src=' LINK DA IMAGEM 3 ' title=' NOME DA CATEGORIA 3 '/>&quot;
imagenes[4] = &quot;<img src=' LINK DA IMAGEM 4 ' title=' NOME DA CATEGORIA 4 '/>&quot;
imagenes[5] = &quot;<img src='  LINK DA IMAGEM 5 ' title=' NOME DA CATEGORIA 5 '/>&quot;
if (etiqueta == &quot;NOME DA CATEGORIA 1&quot;)
{document.write(imagenes[1]);}
if (etiqueta == &quot;NOME DA CATEGORIA 2&quot;)
{document.write(imagenes[2]);}
if (etiqueta == &quot;NOME DA CATEGORIA 3&quot;)
{document.write(imagenes[3]);}
if (etiqueta == &quot;NOME DA CATEGORIA 4&quot;)
{document.write(imagenes[4]);}
if (etiqueta == &quot;NOME DA CATEGORIA 5&quot;)
{document.write(imagenes[5]);}
}
</script>

Atenção: altere SOMENTE o que eu falar, não apague e não mexa em mais nada pois se não vai bugar tudo, tá bom? Em:
 Link da imagem (numero): quando você hospedou a imagem da categoria você terá um link, cole o link onde está em negrito.
 Nome da categoria (numero): coloque o nome da sua categoria, exemplo: moda.

Novamente tecle CTRL + F e na caixinha de busca procure por: ><]]</s:skin> ACIMA dele cole:

/* Categoria Postagens www.oablogueira.com
---------------------------------------------------------------------- */
.icone-marcadores {
left: 300px; /* números positivos para esquerda, números negativo para direita  */
top: -50px; /* números positivos desce o ícone, números negativo sobre */
display: block;
position: absolute;
}
.icone-marcadores img {
width: 65px; /* largura da sua imagem */
height: 65px; /* altura da sua imagem */
}

Clique em SALVAR MODELO e prontinho 😍. O tutorial é bem simples, você só tem que ficar atento e não apagar nada que não deva ser apagado. Se não deu certo, dê CTRL + Z em tudo o que fez e tente de novo prestando bastante atenção.

 Se você acha que fez tudo direitinho mas não deu certo, deixe seu comentário com o link do seu blog pra eu tentar te ajudar 💕