Tutorial:Menu de Categorias

Olá galerinha,vocês sabem que eu fiz uma pequena mudança no Menu do blog,a começar pela troca de cores(agora tem o mesmo plano de fundo do blog) e também retirei um monte de coisa,deixando só os links principais no topo do blog.Por isso,eu criei um menu abaixo do cabeçalho somente com as categorias do blog.

Não são todas as categorias que estão nele,mas as principais,como meus textos,os tutoriais,as playlists,receitas,dicas,fotografia e blogosfera,acho que fica mais organizado e dá pra escolher quaisquer imagens que representem cada categoria,a seu gosto,o importante aqui é saber que existem as imagens padrões,que são aquelas usadas no gagdet de categorias e as imagens que você mesmo procura,aí depende de onde,e pode montar com sua criatividade.
Eu acho mais legal procurar sozinho,porque você já tem uma ideia do que quer e só precisa achar.No caso,se eu quiser mudar a imagem da categoria de Textos,é só eu procurar algo relacionado,tipo uma folha escrita,uma caneta,lápis,uma pena de escrever,um tinteiro,uma máquina de escrever e assim vai...
Como faz?
Primeiro de tudo,você precisa achar as imagens que vai usar,recomendo procurar no Google mesmo,coloque nas imagens e procure pelo nome do objeto que você usar em png
Assim,vamos o Google Imagens e procurar por um objeto que represente a nossa categoria,por exemplo,vou mostrar como colocar uma imagem da categoria de resenhas.

Escolhi os livros,aqui tem vários tipos,eu vou escolher um e visualizar a imagem completa para ter certeza que é essa que eu quero.
Escolhida a imagem,você vai copiar o link dela,clicando com o botão da direita em cima do link e colocando "copiar" como na imagem abaixo

Guarde esse link em um bloco de notas ou arquivo qualquer de escrita
Vá no seu blog >Layout> Adicionar um gadget>HTML/Java Script e cole o código abaixo:
<center>
<a href="LINK DA SUA CATEGORIA" title="NOME DA CATEGORIA"><img src="LINK DA IMAGEM DA CATEGORIA"style="-moz-border-radius: 1000px; -webkit-border-radius: 1000px; -o-border-radius: 1000px; width:100px; heigh:auto;" /></a></center>


Entendendo o código:
<center> significa que as imagens ficaram na página sempre no centro,porém,conforme vai aumentando o número de imagens de categorias,eles vão se expandindo para a esquerda e para a direita.
As partes em roxo são auto explicativas,substitua cada uma por seu correspondente.No caso do link da Categoria,você precisa ir no seu blog,clicar no nome da categoria e copiar o link que aparece no navegador

A parte em azul é o tamanho das imagens,elas terão o tamanho padrão de 100 px,como aqui no blog,mas se achar que é grande o pequena demais pode mudar,lembrando que deve mexer apenas na parte dos números.


Depois de alterar tudo,salve e posicione abaixo do cabeçalho.



Se você preferir,pode usar esses modelos prontos da Karol Vendramini do blog Follow Your Dreams
Categorias em bolinhas [Demonstracao]
É só clicar aqui e usar o mesmo código que eu coloquei,se preferir usar o código da Karol,lembre-se se centralizar as imagens usando <center> no começo do código e </center> no final do código ok.


E está pronto,super fácil não é?! A parte mais chatinha vai ser procurar as imagens,mas isso vai dar um toque mais pessoal ao seu blog e fica super fofo também,espero que tenham gostado :)
Beijos

CONFIRA TAMBÉM ⬇

2 comentários

  1. Adorei o tutorial! Esse menu é muito simples de fazer, e fica uma graça! Dá para deixar a sua cara mesmo, amei!

    ResponderExcluir
    Respostas
    1. Obrigada Vi :D fico feliz em saber que gostou,bem simples mesmo,a intenção é sempre facilitar e deixar lindo <3
      Beijos ^.^

      Excluir

Obrigada por ter lido a postagem
Conte-me o que achou *--*
Deixe seu link nos comentários para que eu possa retribuir a visita <3
Se preferir para deixar seu link use
Esse código para comentar