Menu de imagens estilo hover para blog | Blog Quero Dicas
Blog Quero Dicas : Menu de imagens estilo hover para blog
Menu de imagens estilo hover para blog
Já a algum tempo, foi solicitado para eu ensinar como criar um menu com imagens para blog. Por tanto, hoje eu trouxe para vocês este menu de imagens com estilo hover.
Ele fica igual a imagem acima, com itens em preto e ao passar o mouse ele muda de cor. Na imagem acima ele está na cor rosa, mas você poderá colocar a cor que desejar, basta você fazer a alteração de cor em um editor de imagem (Photoshop, Photoscape, etc)
Como brinde, ao final desta postagem você poderá escolher entre as 5 cores que eu criei para vocês.
Você também poderá criar suas próprias imagens e acrescentar outras no menu. Basta criá-las e hospedar na web e adicioná-las ao código. Também poderá deixa-lo sem o estado hover. Para que entenda melhor, siga o tutorial. É muito fácil!
Como sempre recomendo, faça um backup do seu template, ao instalar qualquer
tipo de implementação de códigos dentro do HTML do seu blog e claro,
dê preferências ao blog de teste! Caso não saiba fazer Backup? Não tem problema, clique em: Como fazer um Backup ou restauração do seu blog.
Adicionando ao html
Vamos em primeiro lugar ao html. Dessa forma ficará mais fácil.
1 - Acesse o painel do seu blog
2 - Clique em Modelo e em Editar HTML
3 - Dentro do html procure por:
4 - Ao encontrá-la, logo acima dela cole o código:
/* Menu de imagens www.querodicasde.com.br --- */
#mymenu{
border-botton: none;
text-align: center; /* alinhamento do menu --- */
width:800px; /* largura --- */
margin:20px 0 20px 0; /* margin --- */
5 - Salve
Adicionando o menu
1 - Agora, volte ao painel do blog
2 - Clique em Layout e Adicionar Gadgets
3 - Escolha a opção HTML/Javascript
4 - E dentro dele, cole o código abaixo:
<div id='mymenu'>
<a href='LINK' title='HOME'>
<img src="https://2.bp.blogspot.com/-pNsUPR-T0wA/VtScCslsZnI/AAAAAAAAOG8/zxG0Pt3-LKc/s1600/HomeH.png" onmouseout="this.src='https://2.bp.blogspot.com/-pNsUPR-T0wA/VtScCslsZnI/AAAAAAAAOG8/zxG0Pt3-LKc/s1600/HomeH.png';" onmouseover="this.src='lINK DA IMAGEM HOVER';" />
<a href='LINK' title='SOBRE'>
<img src="https://1.bp.blogspot.com/-dtq9bBHCmws/VtSz5GrsmCI/AAAAAAAAOHw/NXgO6qZT5RM/s1600/SobreS.png" onmouseout="this.src='https://1.bp.blogspot.com/-dtq9bBHCmws/VtSz5GrsmCI/AAAAAAAAOHw/NXgO6qZT5RM/s1600/SobreS.png';" onmouseover="this.src='lINK DA IMAGEM HOVER';" />
<a href='LINK' title='DICAS'>
<img src="https://2.bp.blogspot.com/-aMSoCpP2WRI/VtSz4rfp1aI/AAAAAAAAOHk/LlM_vXQqEa0/s1600/DicaS.png" onmouseout="this.src='https://2.bp.blogspot.com/-aMSoCpP2WRI/VtSz4rfp1aI/AAAAAAAAOHk/LlM_vXQqEa0/s1600/DicaS.png';" onmouseover="this.src='lINK DA IMAGEM HOVER';" />
<a href='LINK' title='MODA'>
<img src="https://4.bp.blogspot.com/-wFsCYCo9Yqo/VtSz4q_wCqI/AAAAAAAAOHo/bLcRdiqS0Pw/s1600/ModaD.png" onmouseout="this.src='https://4.bp.blogspot.com/-wFsCYCo9Yqo/VtSz4q_wCqI/AAAAAAAAOHo/bLcRdiqS0Pw/s1600/ModaD.png';" onmouseover="this.src='lINK DA IMAGEM HOVER';" />
<a href='LINK' title='PARCEIROS'>
<img src="https://1.bp.blogspot.com/-rD-39G7B0d4/VtSz44iYfDI/AAAAAAAAOHs/1i1V7AncnUI/s1600/Parceiro.png" onmouseout="this.src='https://1.bp.blogspot.com/-rD-39G7B0d4/VtSz44iYfDI/AAAAAAAAOHs/1i1V7AncnUI/s1600/Parceiro.png';" onmouseover="this.src='lINK DA IMAGEM HOVER';" />
<a href='LINK' title='CONTATOS'>
<img src="https://1.bp.blogspot.com/-rIidMYVi4fA/VtS5CCOssKI/AAAAAAAAOII/FzQZVmoEhe0/s1600/Contatos.png" onmouseout="this.src='https://1.bp.blogspot.com/-rIidMYVi4fA/VtS5CCOssKI/AAAAAAAAOII/FzQZVmoEhe0/s1600/Contatos.png';" onmouseover="this.src='LINK DA IMAGEM HOVER';" />
AGORA PRESTE ATENÇÃO
Link de redirecionamento
• Onde tem escrito 'LINK', altere pelo link do seu redirecionamento (pagina, postagem e/ou marcador)
Caso precise de ajuda, acesse: Como colocar marcadores no menu principal do Blog
Adicionando: Hover
Como brinde eu deixei abaixo algumas cores de estado hover para você.
1 - Salve em seu computador a imagem com a cor de sua preferencia ou utilize um editor de imagem para colorir na cor que desejar.
2 - Hospede sua imagem na web
Caso não saiba hospedar imagens? Não tem problema, clique em:
Como hospedar uma imagem gratuitamente na Web para seu blog
Como hospedar suas imagens no seu próprio blog
3 - Depois de hospedadas, copie o link de cada imagem e cole em: LINK DA IMAGEM HOVER. Preste atenção para cada imagem correspondente.
4 - Salve e pronto!
Retirando: Hover
Caso não queira o estado hover, retire os trechos:
onmouseover="this.src='LINK DA IMAGEM HOVER';"
Atenção, pois ao final de cada categoria exite um.
Se tiverem dificuldades de instalar, ou quiserem outras imagem e/ou trocar cores.
Acesse : Bia Barros Portfólio
Brindes para vocês
Tags: Dicas Blog, Menu, Tutoriais
Yanna Balcas 2 de maio de 2016 23:06
Oii amei suas dicas fa tempo que procuro essas dicas e achei aqui e consegui fazer tudo certinho porém no meu ele funciona mais depois de alguns segundo quando passa o mouse em cima eles somem e so volta se atualizar a pagina, me ajuda por favor nao sei qual foi o erro...
Se puder dar uma olhada pra mim, agradeço....
http://www.blogyannabalcas.com.br/
Bia Barros 3 de maio de 2016 17:07
Oi minha linda.
Dei uma olhada no seu blog e creio que você não tenha usado 2 imagens como informado (uma pra normal e uma outra para o estado hover). Verifique e veja se está dará certo. Qualquer coisa me informe.