DOWNLOAD: ÍCONES PARA CATEGORIAS (5 MODELOS)

15 abril 2016






Olá Pessoal, tudo bom com vocês?

Hoje é dia de mais uma aula da nossa série LAYOUT DOS SONHOS. Pela Sequência o tutorial de hoje seria um MENU NO TOPO e depois o SLIDE EM MINIATURA, mas como eu já publiquei aqui no blog dois tutus sobre cada um e para que possamos dar continuidade sem perder tempo, decidi ultrapassar esses dois tópicos e ir para a próxima aula que seria Categorias em Imagem. Mas não deixe de conferir os dois tutoriais, combinado?



Como você pôde ver no banner desse post as categorias em imagens nada mais é do que os marcadores do seu blog, só que resumidos e organizados. Eu preparei 5 modelos com os seguintes temas: MODA, BELEZA, CABELO, RECEITA, MÚSICA, VÍDEOS, VIAGEM, DIY, RESENHAS e TEXTOS.  No total são 10 categorias para cada modelo.


As categorias podem ser colocadas no topo do blog (Abaixo do cabeçalho) ou na lateral, isso fica a seu critério. 

Vamos ao Tutorial? No painel administrativo do seu blog, clique em LAYOUT - ADICIONAR UM GADGET - HTML/JAVASCRIPT e coloque o código abaixo:

<center><a href="LINK DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="IMAGEM1" onmouseout="IMAGEM2NOVAMENTE ';" /></a>
<a href="LINK DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="IMAGEM1" onmouseout="IMAGEM2NOVAMENTE ';" /></a>
<a href="LINK DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="IMAGEM1" onmouseout="IMAGEM2NOVAMENTE ';" /></a>
<a href="LINK DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="IMAGEM1" onmouseout="IMAGEM2NOVAMENTE ';" /></a>
<a href="LINK DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="IMAGEM1" onmouseout="IMAGEM2NOVAMENTE ';" /></a>
<a href="LINK DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="IMAGEM1" onmouseout="IMAGEM2NOVAMENTE ';" /></a>
<a href="LINK DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="IMAGEM1" onmouseout="IMAGEM2NOVAMENTE ';" /></a>
<a href="LINK DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="IMAGEM1" onmouseout="IMAGEM2NOVAMENTE ';" /></a>
<a href="LINK DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="IMAGEM1" onmouseout="IMAGEM2NOVAMENTE ';" /></a>
<a href="LINK DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="IMAGEM1" onmouseout="IMAGEM2NOVAMENTE ';" /></a>
</center>



O código acima são para as 10 categorias, mas caso você queira colocar um número menor, basta colocar o código abaixo e repeti-lo quantas vezes quiser:

<a href="LINK DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="IMAGEM1 " onmouseout="IMAGEM2NOVAMENTE ';" /></a>
+ Personalize os marcadores do blog (4 Modelos)

ENTENDENDO O CÓDIGO

Center: Centraliza as categorias. Caso queira retirar, apague o que está destacado de rosa.

Link da Categoria: Coloque aqui o link referente a categoria, para que quando o seu leitor clicar nela, ele seja redirecionado a todos os posts referente a categoria.

Título da Categoria: Coloque aqui o nome da categoria.

Imagem1: Coloque aqui a URL da imagem. 

Imagem1 Novamente: Coloque a url novamente


COMO FAZER O DOWNLOAD

Escolha a cor que deseja baixar. Você será redirecionado a um site para desbloquear o download, pra isso você precisa compartilhar pelo facebook ou twitter, depois faça o download normalmente no site Dropbox. 


DOWNLOAD: ROSA  / AZUL / LILÁS / MARROM / PRETO

Eu espero que tenham gostado, não deixe de avaliar o post clicando em CURTIR e compartilhar com os amigos. Vem me seguir nas redes sociais (Face, Twitter, Instagram e Google+) e ficar por dentro das novidades. Um super beijo e até a próxima. 0/


2 comentários:

  1. Amei ótima Explicação,fiz deu certinho,com seu código,amei o blog beijos https://meninaencanta.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que gostou Valeria \0/
      Bjão pra vc também!

      Excluir