sexta-feira, julho 27, 2012

Tutorial: Como colocar menu de abas



Oii pessoas, tudo bom? Desculpa não ter postado aqui, tive uma semana muito enrolada, vendo escola para a secundária vish, que antiquada, dever de casa, aula de violão e etc. É ... 
Hoje eu trago um tutorial de um blog que eu não lembro qual é! #fail, me desculpem, é que eu copiei e colei no meu bloco de notas e não lembro de onde é agora :S Se for EXATAMENTE igual ao do seu blog, por favor, me diga nos comentários que darei os créditos ^_^ 
Enfim, isso é um menu de abas:

a foto é do Cute Things mas eu chequei, e o tutorial não é de lá não

Vamos ao tutorial? :)



Primeiramente, vá em Modelo>Editar HTML e clique CTRL+F e procure pela tag <head> e abaixo dela cole o seguinte código: 

<link href='http://naah-oliver.zip.net/menu2.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://poisonedapple.awardspace.us/tabber.js' type='text/javascript'/>

Em seguida, salve claro e vá em Layout e adc um gadget Javascript/HTML com o código abaixo:

<!-- Ínicio Menu Abas  -->
<div class="tabber">
<div class="tabbertab" title="Aba 1">
<br>
Conteúdo 1
</>
</div>
<div class="tabbertab" title="Aba 2">
<br />
Conteúdo 2
</div>
<div class="tabbertab" title="Aba 3">
<br />
Conteúdo 3
</div>
</div>
<!-- Fim Menu Abas -->
<center><br />

Personalize:

Para dar o nome do menu/aba, mude Aba 1, Aba 2 e Aba 3 para o nome que você queira.

Para colocar conteúdo, onde diz Conteúdo 1Conteúdo 2 e Conteúdo 3 mude para o que você quer! Pode ser um texto, link, imagem, qualquer coisa, já que é HTML.

E claro, para adicionar mais apenas copie de <div class="tabbertab" title="Aba 2"> até o primeiro </div> depois da primeira tag, e cole antes de <!-- Fim Menu Abas -->. 


É isso! Espero que tenham gostado do tutorial! Tenham um lindo final de semana ^_^







14 comentários:

  1. Olá,

    Passando pra avisar que saiu o resultado do "Sorteio Especial: Anel Mustache" que você participou \o/ Muito obrigado por participar e corra lá ver o resultado :D

    http://www.meianoitebr.com

    ResponderExcluir
  2. Que blog lindo, adorei tudo aqui! Estou seguindo.
    Adorei o tutorial, sempre quis aprender a fazer isso!
    http://victory-blog1.blogspot.com.br/

    ResponderExcluir
  3. Amei o tutorial flor, seguindo,retribui?
    http://isabela-lopes-oficial.blogspot.com.br/

    ResponderExcluir
  4. Adorei! Esse menu é lindo :)
    Gostaria de se afiliar? Eu e minhas amigas estamos recomeçando com o nosso blog. Se gostar dele, por favor, nos diga por comentário!

    Beijos,
    http://cupcakerules.blogspot.com

    ResponderExcluir
  5. Fica bem legal ;)

    Beijos ;*
    Tem sorteio lá no blog
    www.thalitamaia.com

    ResponderExcluir
  6. Fica lindo! Eu já uso no meu, e amo esse menu! Seguindo aqui :)
    Beijos,
    Sim Senhorita (Clica no perfil, por favor :) Não quero que meu blog seja excluído por "spam")

    ResponderExcluir
  7. Legal o tuto flor gostei !!

    http://ianapaulinhaaaa.blogspot.com.br/

    ResponderExcluir
  8. Olá! Obrigado, ajudou bastante *-* agora vai ficar tudo colorido, hahahaha <3

    http://messofeelings.blogspot.com.br/

    ResponderExcluir
  9. Pow, muito obrigado! me ajudou d+ é raro achar tutorial tão explicadinho assim rsrs

    ResponderExcluir
  10. Ficou massa!

    ianapaulinhaaaa.blogspot.com

    ResponderExcluir
  11. Seu blog é lindo, eu adorei! O tutorial é muito bom, tá bem explicadinho e nem é difícil de fazer, talvez depois eu coloque no meu blog *--*
    Já estou seguindo o seu, achei bem interessante...

    ---> kissofgloss.blogspot.com

    ResponderExcluir
  12. Gostei do Tutorial, Muito Útil!
    Adorei seu blog, Bjoos

    Vamos Caprichar

    ResponderExcluir
  13. Heey! Eu estava louca a procura desse tuto, mas eu não sabia o nome desse menu AUHSUSAHUSAHUSAHU
    E graças a você eu entendi tudo certinho, já coloquei até lá no meu blog!
    Bjoos, e já tô te seguindo =3
    (pequena-sunshine.blogspot.com)

    ResponderExcluir

Oii ^_^ Que bom que vai comentar! Mas, se incomoda em seguir algumas regrinhas? Obrigada!

- "Seguindo, segue de volta?" ou "Visita meu blog" serão ignorados.

- Críticas são aceitas, mas seja educada.

- Palavrão, não!

- Deixe o link do seu blog para eu dar uma passadinha lá ^^

Beijos espero que tenham gostado da postagem!

Vale muito o clique!