DOWNLOAD: ÍCONES PARA CATEGORIAS (5 MODELOS)
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.
Amei ótima Explicação,fiz deu certinho,com seu código,amei o blog beijos https://meninaencanta.blogspot.com.br/
ResponderExcluirQue bom que gostou Valeria \0/
ExcluirBjão pra vc também!
Adorei o tutorial, poderia trazer mais, obrigada!
ResponderExcluir