09 de abr de 2015

Menu de Categorias Personalizado no Blogger

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:

Icon categoria: Maternidade, Bebês, Pet Icon categoria: Maquiagem, Batom Icon categoria: Cabelos Icon categoria: Fotografia Icon categoria: Casamento Icon categoria: Culinária Icon categoria: Culinária, Bebês Icon categoria: Favoritos Icon categoria: Feminino, Cabelos Icon categoria: Cinema Icon categoria: Finanças Icon categoria: Maquiagem Icon categoria: HTML, Tutoriais Icon categoria: Viagem

Baixe todos os ícones em 4 cores

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:

Tutorial: Menu de categorias

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.

Hospedando imagens

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.

Link da imagem hospedada

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.

<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:

<a href="http://blogdaluana.blogspot.com/search/label/Fotografia"><img src="http://i.imgur.com/UQH1k5T.png" alt="Fotografia">
<a href="http://blogdaluana.blogspot.com/search/label/Culinária"><img src="http://i.imgur.com/HlnqJvW.png" alt="Culinária">
<a href="http://blogdaluana.blogspot.com/search/label/Cabelos"><img src="http://i.imgur.com/s3zqLAU.png" alt="Cabelos">
<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:
Fotografia Culinária Cabelos Cinema


Onde coloco o menu?

No Blogger, basta ir na aba “Layout” do seu painel e adicionar um Gadget, veja os prints abaixo:
Adicionando Gadget
Na janela que aparecerá faça como no print abaixo:

Código: Menu de Categorias

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! ;)



  • Juliana Bittar

    Em 09.04.2015

    Oi Lu!!!

    Adorei esse tutorial… eu tive tanto trabalho pra fazer isso umas semanas atrás, e seu post tá tão explicadinho…se soubesse tinha esperado, não sofreria nem metade do que eu sofri!! rsrsrs

    Bjinhos
    Ju

    Responder

  • Luana França

    abril 12th, 2015

    @Juliana Bittar, Obrigada Juh :3
    Nem é tão sofrido, esse é fácil. É complicado quando você quer fazer uns efeitos.

    Responder

  • Lani

    Em 09.04.2015

    Oie, td bem ? Tutorial muuuito bom *_* Queria pedir um tutorial com galeria de posts e um menu igual o do blog http://www.fotografiaecoisinhas.com O dela é no blogger acho lindo aquelas galerias.
    Um bj flor

    Responder

  • Luana França

    abril 14th, 2015

    @Lani, Vish, esse blog que você mandou não tá abrindo. Manda exemplos, as vezes dá pra fazer.

    Responder

  • Lani

    abril 15th, 2015

    @Luana França, Oi, Flor ! Escrevi errado é http://www.fotografiasecoisinhas.com

    beijinho

  • Camila Leite

    Em 09.04.2015

    Baixei os ícones, mas aqui aparecem como texto e não como imagem :(
    Não sei o que fazer, rs post útil, mas eu queria as imagens!!!!!

    Beijos
    Camila Leite
    https://docevidainfinita.wordpress.com/

    Responder

  • Luana França

    abril 14th, 2015

    @Camila Leite, Os icones estão compactados em um arquivo .RAR, você precisa ter um programa chamado Winrar para abrir a pasta e ver as imagens dos icones. Se não conseguir me fala.

    Responder

  • Camila Leite

    abril 14th, 2015

    @Luana França, Flooor, consegui. Muito obrigada! Eu vi que vocês pediram para dar os créditos, mas fiquei sem saber como fazê-lo. Então agradeci pela fanpage do blog mesmo.

    https://www.facebook.com/docevidainfinita/photos/a.780338785395263.1073741828.771039756325166/789393664489775/?type=1&theater

    Super beijo.

  • Luana França

    abril 23rd, 2015

    @Camila Leite, Ah sim <3 Não tem problema. Obrigada.

    Responder

  • Poline Luz

    Em 09.04.2015

    Luana, eu te amo, menina!!!

    Meu menu de categorias ficou super lindo! Obrigada!

    Responder

  • Renata Fabrício

    Em 09.04.2015

    Ai gente. Amei esse post. Como ainda to ajeitando meu layout antes de estrear o blog, amei como Luana foi didática! Já estou usando as dicas. Vocês são muito amor! Love, love, love :)

    Responder

  • Juliana

    Em 09.04.2015

    Oioi, deu um errinho no meu quando coloquei o código, as imagens não apareceram… pode ter sido problema na hospedagem?

    Responder

  • Sofia Falchi

    Em 09.04.2015

    Amei o tutorial já vou começar a fazer!

    Responder

  • Ohara

    Em 09.04.2015

    Amei esse tutorial, super bem explicadinho!
    Ta tão bem explicado, na hora de fazer é só seguir o tutorial, não tem erro! haha!
    Por falar em pitacos no blog: tenho uma duvidazinha sobre isso: tem o formulario pra deixar as sugestoes la, a gente escreve o que quer, entra e a
    gente envia depois de escrever, se aparecer “resposta enviada obrigada*-* deu certinho para mandar? rsrs gostaria d saber se nao to enganada sobre
    isso..
    bjoooos<333

    Responder

  • Carolina Zettermann

    Em 09.04.2015

    O tutorial é maravilhoso! Mas gostaria de saber como faço o efeito da imagem mudar quando colocamos o mouse em cima. Obrigada!

    Responder

  • Barbara

    Em 09.04.2015

    Nossa! Eu estava precisando muito desse tutorial, obrigado!

    Responder

  • Érica Camelatto

    Em 09.04.2015

    Caramba! Muito obrigada, foi muito útil!

    Responder

  • Michelle Moura

    Em 09.04.2015

    Olá.. seu blog é lindo… e acho que vou linkar ele na barra lateral sim…
    Uma pergunta, por que não salvar as fotos no Google Fotos? Salvei as minhas lá e segui os passo a passo, e as imagens dão erro… será que é por isso?
    Vou tentar usar esse site que vc recomendou!

    bj

    Responder

  • Michelle Moura

    dezembro 6th, 2015

    Na verdade o problema é que em nenhum lugar que eu hospede a minha imagem, o final fica “.png” nem .”jpg”… e agora o que estou fazendo de errado????

    Responder

  • Géssika

    Em 09.04.2015

    Como faço pra minha barra de categorias ficar igual a sua?
    Com texto e imagem, mudando de cor quando passa o mouse por cima?

    Responder

  • Hanunna Alves

    Em 09.04.2015

    Olá o meu problema é como colocar o post dentro do menu.
    tenho um menu pronto, mas não sei como colocar o post no menu

    Responder

  • Thayanne

    Em 09.04.2015

    Ótimo post, me ajudou muito !!

    thaypinheiro.wordpress.com

    Responder

  • Karolyne Silva

    Em 09.04.2015

    Obrigado ajudou muito

    Responder

  • Nilbson

    Em 09.04.2015

    Olá gostei do tutorial mais tenho uma dúvida já fiz o menu, mais quando vou colocar uma postagem e vou na HTML não consigo encontrar nenhum menu que criei Porque ?

    Responder

  • kelly fernandes

    Em 09.04.2015

    Gostei demais do seu blog,muito bom mesmo,organizado ,limpo,maravilhoso e as dicas foram ótimas,me ajudou bastante.

    Responder