Tutorial: Menu Arco-íris.



Buuuh, olá galera tudo bem com vocês? Eu estou bem também ngm perguntou bom, como disse no post anterior com o começo do ano todo mundo quer entrar o ano com um layout novo e porque não fazer posts  com tutorias fáceis e simples mas que ficam incríveis não é mesmo? Antes de tudo queria agradecer ao Garoto Ironiapois foi ele que me passou o tuto, pois estava/estou sem criatividade para algum post hoje, enfim, vamos ao que interessa? 

Primeiro passo: Algo que todo mundo já sabe (eu acho) vá em modelo > editar HTML e procure pelo código. 
]]></b:skin>

Assim que encontra-lo cole o seguinte código abaixo:
.navA, .navB, .navC, .navD, .navE {

font: 15pt arial;

letter-spacing: -2px;

margin-left: 7px;

display: inline-block;

cursor: pointer;

-webkit-transition-duration: .75s;
}
.navA:hover, .navB:hover, .navC:hover, .navD:hover, .navE:hover {
opacity: .35;
}
.navA {
color: #fd4e5b;
border-bottom: 3px solid #fd4e5b;
}
.navB {
color: #fcce47;
border-bottom: 3px solid #fcce47;
}
.navC {
color: #45c676;
border-bottom: 3px solid #45c676;
}
.navD {
color: #13877e;
border-bottom: 3px solid #13877e;
}
.navE {
color: #814456;
border-bottom: 3px solid #814456;
}

Após ter colado o código acima salve. Próximo passo, vá em: layout>adicionar gadget>HTML/JavaScript e cole o codigo abaixo:
<div class="navA"><a href="URL 1"><span style="color: #fd4e5b;">LINK1 </span></a></div><div class="navB"><a href="URL 2"><span style="color: #fcce47;">LINK 2</span></a></div><div class="navC"><a href="URL 3"><span style="color: #45c676;">LINK3 3</span></a></div><div class="navD"><a href="URL 4"><span style="color: #13877e;">LINK 4</span></a></div><div class="navE"><a href="URL 5"><span style="color: #814456;">LINK 5</span></a></div>
Depois de ter feito isso, visualize e salve. O menu deverá ficar assim:
Espero que tenham gostado do post e até o próximo, prometo que segunda já terei feito algum post novo haha'

Obs: Possa ser que o menu não funcione ou não fique igual está no tutorial, acredito que se não der certo algum outro código está interferindo. 



8 comentários:

  1. Fica lindo!!!!!
    O Attitude Included está de volta e com um novo layout, confira:
    www.theattitudeincluded.blogspot.com
    xoxo

    ResponderExcluir
    Respostas
    1. Fica mto lindo mesmo hehe' ^^ irei conferir sim pode deixar :)

      Excluir
  2. Fica lindo , ;)

    http://meucupcakedemorango.blogspot.com.br/

    ResponderExcluir
  3. Fica lindo mesmo :)
    http://republicacrash.blogspot.com.br/#

    ResponderExcluir

- Obrigado pela visita e pelo comentário, não se esqueça de deixar o link do seu blog abaixo para que eu possa retribuir sua visita.

-Se for para criticar que seja logado, em anônimo sua opinião não valerá de nada.

 
Design e programação: Carol Mascarenhas
Confissões de um garoto - 2011 / 2015. Todos os direitos reservados Tecnologia do Blogger