Estava olhando as sugestões que vocês deixam aqui na aba “dê o seu pitaco” ali na sidebar e achei interessante a sugestão de como fazer um menu de categorias para o blogger! (Aliás, fique à vontade para dar mais pitacos). Antes de tudo, vou explicar como funcionam as categorias para que ninguém fique perdido(a) no meio do tutorial.
O que são as categorias e como adiciono?
Categoria é a forma de separar suas postagens por temas. Por exemplo, você quer criar uma “pastinha” para colocar todos os posts em que você fala de maquiagem, então você criará uma categoria para este tema. No blogger, isso funciona através de marcadores. Você escolhe um marcador que identifica o tema da sua pastinha e o adiciona em todas as postagens que possuírem o tema escolhido. Marcador é uma palavra-chave ou tag, como eu normalmente chamo, que identifica o tema/categoria do seu post. Você irá colocar a mesma palavra-chave em todos os posts que você quer que pertençam a tal categoria.
Ainda na dúvida?
Por exemplo, eu quero uma categoria sobre filmes com a palavra chave “cinema”, então todos os posts que eu falar sobre este assunto, eu irei colocar a palavra cinema nos marcadores. Não entendeu? Dá uma olhada no Guia Básico do Blogger, lá tem explicado como adicionar um marcador.
Design
Normalmente nas imagens das categorias nós usamos ícones, que são imagens com desenhos que representam nossas categorias. Resolvi fazer uma mistureba personalizada de algumas coisinhas legais que encontrei enquanto pesquisava ícones na internet. Mas são só exemplos simples, ok? Usei como apoio algumas fontes e imagens e fiz as imagens para menu abaixo:
Fiz mais como um exemplo, mas vocês podem encontrar vários pacotes grátis pesquisando no google. 
Codificação
Para entender o código do menu você precisa saber duas coisas. A primeira é o link que identifica a categoria, no caso do blogger, é o seguinte:
E a segunda é o link que identifica a sua imagem. No item acima “Design” eu ofereci o download de alguns exemplos de imagens para o seu menu, porém, para usá-los você terá que hospedá-las em algum servidor. Há várias opções para fazer isso, tanto dentro do servidor do seu próprio blog, quanto fora. Vou ensinar como hospedar pelo Imgur que vai servir pra qualquer lugar em que você queira usar.
Agora que sua imagem está hospedada, você precisa do link dela. Uma dica: Caso você vá hospedar em algum outro lugar, não se esqueça que o final do link deve ser “.png” ou “.jpg” para que funcione.
Agora, basta criar o menu. Complete o código abaixo de acordo com o que eu expliquei acima e repita-o, para cada categoria a ser criada.
1 | <a href="http://nomedoseublog.blogspot.com/search/label/NomeDaCategoria"><img src="Link da imagem hospedada" alt="Nome da Sua Categoria (aparece ao passar o mouse)"> |
Vamos ver um exemplo rápido? Se você pegar o código abaixo (vamos fingir que o nome do meu blog é “blogdaluana”), o seu menu ficará como no exemplo:
1 | <a href="http://blogdaluana.blogspot.com/search/label/Fotografia"><img src="http://i.imgur.com/UQH1k5T.png" alt="Fotografia"> |
2 | <a href="http://blogdaluana.blogspot.com/search/label/Culinária"><img src="http://i.imgur.com/HlnqJvW.png" alt="Culinária"> |
3 | <a href="http://blogdaluana.blogspot.com/search/label/Cabelos"><img src="http://i.imgur.com/s3zqLAU.png" alt="Cabelos"> |
4 | <a href="http://blogdaluana.blogspot.com/search/label/Cinema"><img src="http://i.imgur.com/d2fCQQF.png" alt="Cinema"> |
Passe o mouse e observe que as imagens estão linkadas. Não há efeitos pois eu tentei fazer o menu o mais simples possível, mas há como personalizar ainda mais se você tiver vontade.
Menu:
Onde coloco o menu?
No Blogger, basta ir na aba “Layout” do seu painel e adicionar um Gadget, veja os prints abaixo:
Na janela que aparecerá faça como no print abaixo:
Na janela que aparecerá faça como no print abaixo:
Pronto! Agora é só postar. Lembrando que este tutorial é para Blogger, mas os ícones e código podem ser usados em outros servidores, o que irá mudar é a forma de adicionar isto no blog e o link das categorias. Qualquer dúvida, deixe um comentário!
0 comentários: