18.11.12

Tuto: Menu Tabs

Yoo Minna-Sama ! Quanto tempo Hein ! , Como vcs estão ? 
Bom , Hj eu vou ensinar a vcs a colocar o menu igual ao daqui do blog , eu encontrei ele no KW (Creditos) , mas eu fiz umas modificações para ele ficar igual ao daqui do blog , bom vamos laa !

Primeiro ,  eu aconselho a  vc , a copiar seu html td (antes tem q marcar : Espandir modelo em.... , e dps aperta : Ctrl + a , e dps Ctrl + C , e cola em um bloco ne notas).

Ai , dps de vc copiar seu html , de um Ctrl + f e procure por : ]]></b:skin> , cole isso ACIMA da tag ]]></b:skin> )

#nav {
font-family: Georgia, cursive; 
text-transform: uppercase; 
width: 60px; 
height: 20px;  
background: #1E90FF; 
padding: 5px; 
text-align: center;
 margin: 10px; 
align: left; 
font-size: 20px;
 font-weight: none; 
margin-bottom: 3px;
 float: left; 
cursor: hand;
 -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease; border-radius: 3px;
 line-height: 20px;
}

#nav a{
color: #F8F8FF;
}

#ops {
background:#1E90FF; 
color: #F8F8FF; 
width: 80px; 
font-family: Georgia; 
font-size: 18px; 
text-align: center; 
margin-top: 10px; 
text-transform: none; 
opacity: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}

#nav:hover #ops {
opacity: 1;  
-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;
}

Bom , o código e bem simples , mas , aqui vão algumas explicações :
Adonde esta em Azul :e a altura e largura da caixinha ond fica os numeros 
Aonde esta em Vermelho :E a cor da Caixinha , troque : #1E90FF , pelo código da sua cor . tabela aqui (www)
Aonde esta em Verde : E e a Cor da Fonte , vc pode mudar , tabela aqui (www)
Aonde esta em Roxo : e a cor da fonte quando coloca o mouse em cima do numero , que aparece : Home etc. vc pode mudar , tabela aqui (www)

Depois de vc personalizar , e só vc ir em : Layout , Criar um novo gadget , HTML/JavaScript , e cole o Seguinte código 

<div id="nav">
<a href="link"> 01 <div id="ops">  Home </div></a></div>


Bom , e mt simples , e só colocar o Link  e personalizar aond esta : Home , e o 01 . 

Acho que esta bem explicado ,  mas se tiverem alguma duvida , comentem que eu explico ate vcs entenderem 




Besos


11 comentários:

  1. Nyan,esse menu é bastante giro *--*

    Ps:Adorei essa assinatura no final do post,ficou muito suave xDD
    Ja nee!!

    ResponderExcluir
  2. lipe mais uma vez dando um show ,esse foi um post programado né?

    ResponderExcluir
    Respostas
    1. Obg Luis-Kun , Yep , esse foi um post programado !

      Excluir
  3. Bloger super kawai ><
    Aceita parceria?/afilia-se com o meu blog?
    http://mywolrdshoujo.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. ops esqueci de colocar o link do blog .... X.X
      http://mywolrdshoujo.blogspot.com.br/

      Excluir
    2. Oks , Vou ver seu blog e se tiver dentro das regras eu coloco sim >.<

      Excluir
  4. ótimo menu,parabéns pelo blog!Design e conteúdo incríveis e super kawaii*---*Obrigada pela visita em meu blog.

    Rawr...Morangos Revoltados

    ResponderExcluir
    Respostas
    1. Obg Miki-Chan ! , seu blog q e um arraso !

      Excluir

Yo! você deseja comentar aqui? Sem problemas! porém nós temos algumas regras que devem ser seguidas.

-Não aceitamos palavras de baixo calão nos comentários.
-Não aceitamos brigas ou insultos, tanto para os autores, quanto para os leitores.
-Você tem alguma crítica à fazer? Ótimo, nós aceitamos críticas, desde que sejam construtivas para o blog.
-Se você usar o tutorial, ou reblogar qualquer post, não deixe de avisar nos comentários!
-Sem essa de "Segue de volta?", apenas deixe o link do seu blog no final do seu comentário que com certeza eu darei uma passadinha lá.

~Ja Nee~