Download: Categorias em bolinhas (4 modelos) | Follow your dreams
Freebies

Download: Categorias em bolinhas (4 modelos)

Olá, como estão?

Muitos de vocês me perguntam como são feitas essas categorias diferentes em que cada marcador tem um ícone específico e bonitinho, tipo as que eu costumo usar aqui no blog. Nesse post vou mostrar o código que faz isso e também disponibilizar 4 modelinhos que eu mesma fiz com muito carinho. Cada modelo tem 24 ícones. Espero que gostem! :)

Categorias em bolinhas [Demonstracao]

Esse tutorial serve para Blogger e WordPress

 

Tutorial
  • 1 – Primeiro você precisa de uma imagem para cada categoria, você pode criar ou fazer download dos modelinhos que eu disponibilizo no fim desse post. Se você preferir criar, lembre-se de salvar como PNG para manter o fundo transparente.

 

  • 2 – Com a imagem pronta você precisa fazer o upload dela. Entre na sua conta do Picasa Web e clique em “Fazer upload”, selecione a imagem e após o carregamento clique em OK.

Categorias em bolinhas [Tutorial1]

 

  • 3 – Clique na imagem com o botão direito e selecione “Copiar URL da imagem”. Esse URL que será copiado é o endereço da imagem que você vai usar no próximo passo.

Categorias em bolinhas [Tutorial2]

 

  • 4 – O código é esse:

<a href=”ENDEREÇO DA CATEGORIA” title=”TÍTULO DA CATEGORIA“><img src=”ENDEREÇO DA IMAGEM” /></a>

Ele serve para 1 categoria, então se você quer 10 categorias, deve repetir o código 10 vezes e personalizar cada um individualmente.

Substitua:
– O trecho em azul pelo endereço da categoria do seu blog. Um exemplo de categoria aqui do meu blog: http://www.followyourdreams.com.br/categoria/fotografia/
– O trecho em verde pelo título da categoria, exemplo: Fotografia.
– O trecho em vermelho pela URL da imagem copiada no passo 3.

ATENÇÃO: Às vezes ao copiar e colar o código no seu blog o navegador substitui as aspas ” por acentos ´. Nesse caso, o blog não irá reconhecer o código e as categorias NÃO VÃO FUNCIONAR. Para corrigir esse erro substitua os acentos por aspas.

 

  • 5 – Se você usa WordPress cole o código em um widget de Texto. Se você usa o Blogger cole o código em um gadget de HTML/Java Script.

 

Modelos

Categorias em bolinhas [Azul e branco]     Categorias em bolinhas Cinza e branco]

Categorias em bolinhas [Rosa e branco]     Categorias em bolinhas [Cinza e preto]

DOWNLOAD

 

Gostaram? Alguma sugestão para os próximos ícones de categorias? Deixem um comentário! :)

 

PROIBIDO REBLOGAR, MESMO QUE SEJAM DADOS OS CRÉDITOS.

84 Comentários

    1. Oi Maria Eduarda, obrigada! Que pena que não conseguiu.. O tutorial está correto, então você deve ter feito algum passo errado, vai tentando que uma hora dá certo.
      Um beijo!

  1. Adorei os modelinhos! Baixei todos. Sempre quis colocar essas categorias no meu blog, mas nunca consegui fazer a imagem da categoria, agora com os modelos dá pra fazer *–*

  2. Oi Karol!o seu blog é muuuuuito amor!!!!Parabéns

    Gostaria de saber, se eu posso usar só alguns ícones? Eu não quero todos, só alguns. Posso recortar? e usar?

    beijo grande!

    1. Oi Hellen, obrigada!
      Não é preciso recortar, você faz o download clicando na imagem do modelo escolhido e aí vai receber os ícones em imagens separadas para poder usar quais quiser.
      Um beijo!

  3. Oi Karol!

    Estava a tempos procurando esse tutorial, já sei que vai super me ajudar, afinal tudo o que vem do seu blog me ajuda (principalmente seus layouts, hahahaha). Obrigada por esse tutorial fofa, admiro demais sua capacidade com o blogger, já que eu sou zero à esquerda nesses bagulho hehehe.

    Beijinhos, flor!

  4. Oi! Eu adorei, achei super lindos! Será que posso editá-los, tirando o fundo? é que eu queria por no meu blog com outro fundinho atrás, que combine mais…
    Obrigada!

  5. Nossa Karol, muuitisimo obrigada por esse tutorial. Tava caçando esse código que nem louca, sério! Todos os tutoriais que eu achava era aqueles que você mapeia a imagem sabe? Dai eu não gostava muito. Adicionei um efeito hover nele e ficou bem legal! Obrigada pelo código, obrigada mesmo ~e pelos icons também, são lindos~ A verdade é que tudo é lindo no seu blog, HAHA <3 <3
    Um super beijo, Carol (:

  6. oi karol olha eu não tenho conta na picasa web tem outro jeito de ver o URL da imagem é que eu quero muito botar no meu blog.me ajuda por favor!!!

    1. Lorena, se você tem conta no Blogger você tem conta no Picasa, acesse a sua conta do Picasa com o mesmo login do Blogger e verá em um álbum todas as imagens que já fez upload pelo blog.
      Bjs

  7. oie entao estou tentando fazer mais nao consigo pq eu adiciono os marcadores nas postagens so que tem que ter o gadget de marcadores estalado no blog? pa eu vi que vc ao tem ele mais tem categorias me ajuda como vc fez

  8. Ola ;) adorei este post. Mas depois como consegues colocar vários post na mesma categoria? Eu uso os marcadores. E o código colas em que widget? Obrigado

  9. Olá Karoline. Fiz do mesmo jeito que você ensinou, mas mostra a seguinte mensagem : “A página que você está procurando neste blog não existe.”
    Fiquei super triste, pois achei lindo ! :/
    Tem como me ajudar ? por favor

  10. Ka, olha minha dúvida tem um pouco de envolvimento das suas categorias, fiz tudo isso já, deu super certo,mas queria que você me ajudasse em questão da postagem, como colocar ela com “marcadores” em cada categoria. Já tentei de tudo, e sempre não consigo! Adoraria a ajuda. Beijos

  11. Oi, adorei seu blog, já até usei no meu blog, mas os ícones das categorias ficaram grandes, como diminuo??
    obrigada

    1. Vivian, você padronizou as imagens no código? Porque as categorias que criei estão no tamanho ideal pra uso, se elas ficaram grandes e distorcidas você pode ter usado o código errado ou padronizado o tamanho das imagens do seu blog. Me envia o link do seu blog que eu dou uma olhada.

      1. Oii, então eu copiei o código e colei, fiz como vc ensinou,rsrs, mas depois eu mudei uma numeração e consegui diminuir, agradeço a ajuda, não entendo nada e sou nova nesse mundo, adorei seu blog e as dicas principalmente!Passa lá no meu e dá uma olhada como ficou, faz tempão que não posto nada pq estou mudando algumas coisas!!!

  12. Oi Karol! Os ícones estão lindos! Será que tem como você ensinar a colocar esses ícones na categoria do post? assim como tem no seu blog?

    Beijos!

  13. Olá Karoline! Estou no início do meu blog e adorei essa postagem, principalmente os modelos os quais você disponibilizou, tanto que estou até usando!
    Obrigada, isso ajuda muito para quem está iniciando.

  14. Oi, o site em que você hospeda os downloads do blog eu não consigo baixar… Você não consegue hospedar no mega.co.nz ou mediafire? São bem mais fáceis, :/ Obrigadinha! <3

    depoisque-cresce.blogspot.com

  15. Olá, tudo bem? Primeiramente quero te agradecer pelos layouts e dicas maravilhosas que vc disponibiliza nesse blog maravilhoso. E segundo queria uma ajudinha, como faço pa colocar categorias no blog? utilizo o mesmo widget de marcadores? Agradeço a ajuda! Beijos

  16. Oi Karol, o tutorial está perfeito, consegui adicionar no meu blog e tudo o mais. Só que como eu faço pra utilizar a categorias? Eu devo adicionar nos marcadores? Pois quando clica na categoria não redireciona pra página nenhuma… Poderia me explicar como funciona?
    Obrigada,
    bjs.

Deixe uma resposta