13 dezembro 2016

#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 💕

24 comentários:

  1. Oi minha lindinha eu fiz e não deu certo e outra na primeira parte 'post-header'você disse que encontraríamos 2 e só encontrei 1 ;(
    será que foi isso?? http://marilisdasilvadutra.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oiii Marilis, teu blog tá amorzinho demaaaais, parabéééns! <333 tem sim 2 códigos de "post-header", amoreee, ainda mais nesse template que tu tá usando. Tenta pesquisar somente por post-header, você vai encontrar dai cole o código acima dele

      Excluir
  2. Oi jaque o meu ficou com duas categorias lá no topo, não estou sabendo tirar:
    http://blogmirandacombr.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Leeeh, primeiro, deixa só uma das categorias escritas no marcador dos posts. Por exemplo, se o post é sobre MODA, e no marcador tá escrito "MODA, DICAS, BELEZA" você escolhe só um pra permanecer.

      não entendi MESMO pq as imagens se repetiram no post, recomendo que você siga os passos novamente pra ver se dessa vez não aconteça esse bug :/

      Excluir
  3. oi Jaque fiz tudo direitinho porem nao apareceu no meu blog!!!! o que devo fazer?????

    ResponderExcluir
    Respostas
    1. Oii Leeh, dá algum erro ou só não aparece as imagens? na parte que é do CSS em:
      .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 */

      tenta ir mudando os numeros pra ver se algo aparece lá. Se não aparecer deve ser alguma configuração do layout que você usa que não está permitindo :/
      boa sorte, lindona! :*

      Excluir
  4. no ultimo codigo n consegui n tem ><]] no meu :(

    ResponderExcluir
  5. ooi jaque vc pode me ajudar no meu nao deu certo e fiz tudo certinho :/ fiz no meu blog de teste :/ http://coisasdavidabruuh.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Bruuuh, coloca o código que eu peço pra você colocar acima de ]]>< , colca esse código acima disso aqui: .compartilhe-amor {
      tomara que dê certo <3

      Excluir
    2. JAQUE E SI EU TIVER MAIS QUE 5 CATEGORIAS ??

      Excluir
    3. amore, uma dica que dou é você fazer uma imagem com o fundo branco, dai se tiver mais de 1 categoria vai aparecer só a primeira listada :*

      Excluir
  6. Oi, Jaque! Primeiro, sou nova de tudo com blog. Acabei de criar o meu primeiro, e te agradeço muito, porque me enchi dos seus tutoriais! rs Bom, eu fiz tudo como indicado e quase deu tudo certo, porém o balãozinho da categoria ficou lá flutuando no meio do nada do meu post! rs Já alterei os números que enviam para cima, mas não resultou. Queria que ficasse pelo menos entre a data e o título, ainda que ficasse no canto...
    Tem ideia de como faço?
    luardelivros.blogspot.com

    ResponderExcluir
    Respostas
    1. Oii Reee, fico MUITO feliz por saber quue te ajudei criar seu cantinho com meus tutoriais, fico muito feliz mesmooooo!
      Entrei no seu blog e acho que você conseguiu colocar eles onde gostaria, não é? O icone está bem no post certinho. Mas é só ir mudando o left e top até chegar onde você deseja <3
      Pra ajudar, use sempre o "Inspecionar Elemento" do navegador, é meio chatinho de se acostumar no começo mas ele ajuda muuuito

      Um beijo, linda, sucesso com teu blog ♥

      Excluir
  7. Então, Jaque... A parte que ficou em cima do ]]>< não estava respondendo mesmo, de jeito algum, que era o css. Então eu redefini o tamanho do ícone no photoshop, e a parte do <b:loop... eu coloquei acima do código que definia o título, daí ficou ali. Não é exatamente onde eu queria, mas ficou bem melhor de onde estava antes.
    E menina, eu usei muito o "inspecionar"! hahaha Nossa, não nesse caso, mas enquanto fazia o blog, o que cacei de coisas com esse recurso! Me salvou.
    Mais uma vez, muito obrigada! <3

    ResponderExcluir
    Respostas
    1. o "inspecionar" é a salvação DA VIIIIIIIDA!
      Fico feliz que tenha conseguido do seu jeitinho, Rê, é que nenhuma estrutura é igual a outra dai tem coisas que não funcionam da forma que queremos mas conseguimos encontrar uma forma de funcionar.
      Beijooos, lindona <3

      Excluir
  8. Não consegui fiz tudinho e não apareceu nada.... :-(
    www.alinesous.com

    ResponderExcluir
    Respostas
    1. Aline, talvez seja alguma configuração no seu layout ou até tenha aparecido mas fico embaixo de algum lugar e você não viu :/

      Excluir
  9. Muuuito obrigado pelo tutorial,estou amando por em pratica tudo que tenho aprendido aqui.
    Doois beijos *--*

    ResponderExcluir
  10. Fiz e deu certo de primeira, adorei...muitoooo obrigada mesmo.

    ResponderExcluir
  11. oi PODE ME AJUDAR FAÇO O PASSO A PASSO ... MAS NAO APARECE NADA E NEM DA ERRO .
    E ALEM DO MAIS FICA APARECENDO O MARCADOR EM LINK ( O TRADICIONAL )

    ResponderExcluir
  12. Procurei o diaxo no código repetido e não achei. Também não consigo hospedar nenhum link no tmbrl, que precisei fazer minha inscrição para poder usar conforme a sua dica. Estou quase desistindo. No caso, eu tenho os códigos de umas categorias que vc compartilhou no template free, dá pra usar eles no caso? Se puder me orientar, eu muito te agradeceria. Sou bem leiga em mexer com html.

    ResponderExcluir
  13. Como faz para o icone ter link? clicar nele e ir pra página da label?

    ResponderExcluir