Menu de imagens estilo hover para blog | Quero Dicas | Tutoriais para seu blogs


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, todo 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/ou acrescentar outras no menu. Basta criar suas próprias, hospedar na web e adicionar 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: ]]></b:skin>

 ]]></b:skin>
 

4 - Ao encontrá-la, acima dela cole o código:

 
/* Menu de imagens www.querodicasde.com.br --- */
#mymenu{
background: none;
border-top: none;
border-botton: none;
text-align: center; /* alinhamento do menu --- */
margin:0 auto;
width:800px; /* largura --- */
}
.menu {
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'>
<div class="menu">
<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>

<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>

<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>

<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>

<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>

<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';" />
</a>

</div>
</div>


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, veja este post: 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 estilo hover, retire os trechos:

onmouseover="this.src='LINK DA IMAGEM HOVER';"
Atenção, pois ao final de cada categoria exite um.


E ai gostou? Deixe seus comentários =D 
E se tiverem dificuldades de instalar, ou quiserem outras imagem e/ou trocar cores. 
Beijinhos 

Brindes para vocês

     
     
     
     

     


     


2 comentários

Clique e deixe seu comentários
segunda-feira, 02 maio, 2016 ×

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/

Resposta
avatar
admin
terça-feira, 03 maio, 2016 ×

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.
beijinhos ♥

Resposta
avatar
admin


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.