Posts Recentes

Categorias do blog com imagens

16 de junho de 2018



Uma dica legal pra personalizar a sidebar é utilizando imagens que remetem à cada categoria, e fazer isso é mais fácil que muitos pensam, basta ter o código certo e ir preenchendo da maneira correta. Vale lembrar que o ícone você escolhe e personaliza do modo que preferir, há alguns já prontos espalhados pela blogosfera, tem como você mesmo fazer pelo photoshop, ou usar o Flaticons como eu utilizei. Vou disponibilizar alguns aqui também, podem usar e complementar. Vai do gosto de cada um...
Espero que gostem, e se forem utilizar me contem, vou adorar ver o resultado





COLOCANDO AS IMAGENS COM O CÓDIGO;

✚ Abra a página do Layout do seu blog e adicione um gadget HTML/Javascript.
✚ Adicione o seguinte código:
<center><a href="LINK DA CATEGORIAtitle="TÍTULO DA CATEGORIA"><img src="LINK DA IMAGEM DA CATEGORIAborder="0" onmouseover="this.src="LINK DA SEGUNDA IMAGEMonmouseout="this.src="LINK DA IMAGEM" /></a>  </center> 

♡ ENTENDENDO O CÓDIGO;
Em LINK DA CATEGORIA você vai colocar o link da respectiva categoria, exemplo: http://www.infinitoealem.com/search/label/TUTORIAIS.
Em TÍTULO DA CATEGORIA coloque o título daquela categoria. seguindo o exemplo acima, seria Tutoriais.
Para LINK DA IMAGEM você deverá hospedar a imagem desejada em algum site, recomendo utilizar o imgur
Para fazer o upload no imgur, clique em Browse e escolha a imagem desejada, após concluir o carregamento, coloque o mouse em cima da imagem e aparecerá um quadradinho com um link, ao lado estará escrito COPY, e então uma setinha pra baixo, clique na setinha e então em Get share links e copie o codigo que estará abaixo de BBCode (Forums), esse código inicia-se com [img] e termina com [/img], exclua-os e deixe apenas o código restante, por exemplo: https://i.imgur.com/FWpul7y.png

Após obtermos um link pra nossa imagem vamos colocar no lugar de LINK DA IMAGEM, nas duas vezes em que aparece no código.
E pra complementar nossa imagem, e deixar nossa sidebar mais bonita e incrementada, vamos colocar mais uma imagem em hover, que por sinal já ensinei sobre aqui no blog. Mas Hay o que é imagem em hover? Segue abaixo uma demonstração:


Ao passar o mouse sobre a imagem, uma nova imagem aparece, coloquei uma com o fundo rosa e a outra com um verdinho, então quando passamos o mouse, a imagem muda o fundo. Legal né?
Então em LINK DA SEGUNDA IMAGEM, vamos colocar o link da imagem diferente da primeira, essa segunda imagem será a que aparecerá quando o mouse estiver em cima da imagem, como na demonstração acima.

SOBRE O FLATICON;
O Flaticon é um site de ícones que te permite editá-los antes de baixar, de modo fácil e rápido. Você simplesmente escolhe o ícone que quer pra determinada categoria, clica nela e após isso clica em Edit icon e então pode mudar as cores, podendo sincronizar com as cores que utiliza em seu blog. Após editar clique em Add to collection, edite quantas quiser e então baixe sua coleção.

♡ EXTRA;
Como prometido deixo aqui as imagens pra vocês baixarem e utilizarem.


Comentários
0 Comentários

Nenhum comentário:

Postar um comentário