Image Map

Avisos + Tutorial : Menu de Abas no Blog!




Se quiserem fazer pedido de tutoriais ou utilitários é só clicar aqui e preencher o formulário, ou pedir aí embaixo nos comentários!


Foto : Farry Teen

Oi oi gatinhas, como vão vocês?

Hoje venho com um tutorial bem legal de "Como colocar um Menu de Abas no Blog". É mega fácil e a maioria dos blogs já usam e isso facilita a organização dos gadgets .

Veja a prévia do menu AQUI
Eu editei esta foto do blog  Garota Preciiosa e peguei os códigos  no blog Chovendo em Paris, então todos os devidos créditos a estes blogs


Mas antes do tutorial tenho dois avisos para dar a vocês, espero que leiam pois são importantes :



1 º
Eu e a Mari estamos pensando em mudar o lay do blog, já temos algo em mente do que vamos por e o tema, estamos meia enjoadas do lay atual. Então, o que vocês acham? 
2 º 
A Marina B (minha amiga que posta junto comigo) foi viajar hoje e provável voltar apenas na metade de janeiro, e eu vou viajar amanhã (29/12), então o blog vai ficar meio desatualizado até voltarmos .




Mande suas opiniões sobre a mudança do lay aí embaixo nos comentários ok? 
Agora vamos ao tutorial, clique em Leia Mais.



Vá em Modelo > Editar Html > Ctrl+F  e procure pela tag <head>
ABAIXO dela, copie e 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'/>

Visualize, veja se está tudo certinho e só então salve. Agora vá em Layout e adicione um gadget Html/JavaScript e copie e cole o código abaixo :



<!-- Ínicio Menu Abas ~ By Drikoti.Net -->
<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 ~ By Drikoti.Net -->
<center><br />

Onde está escrito no código as Abas 1,2 e 3, coloque o título das abas do menu . 
E onde está Conteúdo 1, 2 e 3 coloque o texto que você quer que fique no espaço de cada abinha do menu


Pronto! Seu menu está prontinho para uso.
Se tiverem alguma dúvida sobre o tutorial, perguntem aí embaixo que eu esclareço. 



Espero que tenham gostado, e se forem usar creditem o blog. 
Bom, não vou estar aqui no réveillon, então  desejo desde já ótimas festas para todas vocês, tudo de bom e feliz 2013!
Beijos e até o ano que vem!






34 comentários:

  1. Bem legal esse tutorial. :3

    Zombie World ~> Perfil

    ResponderExcluir
  2. Bem legal, mais nem vou trocar o meu, mais eesse é fofo!
    http://tissue-sweet.blogspot.com.br/

    ResponderExcluir
  3. adorei o seu blog , seguindo , segue de volta? http://rafamallet.blogspot.com.br ? bjks

    ResponderExcluir
  4. Rsss Hola este tuturial eu queria....
    Obrigada por compartir princesa...
    template nova sempre é bom... eu Gosto de mudar!
    Bom Querida "Feliz Año Nuevo, mucha luz y armonia en tu vida e tudo de bom para voce e sua familia!" :)

    ResponderExcluir
  5. esse menu é mt pratico..ajuda a economizar espaço e deixa organizadinho =]

    bjuss

    http://domeujeito100.blogspot.com.br

    ResponderExcluir
  6. Tuto bem prático! E mudar de lay é sempre bom.

    http://cappuccinoeaconta.blogspot.com.br
    Faz uma visita?
    @PriscilaFrr
    Feliz Ano Novo! s2

    ResponderExcluir
  7. Adorei o tuto, super fácil c:
    Amei seu blog, lindo, estou seguindo *.*
    xoxo
    Curti aqui!
    OPS, ESNOBEI!

    ResponderExcluir
  8. Aaah... então somos mega parecidas nessas coisas que a gente fala. Porque eu suuper falo essas duas palavras com uma frequência enorme também! :P

    Adoro tutoriais de coisas pra blogs! o/
    Já tenho o menu horizontal, mas sempre acho muito legal quando vejo mais gente que posta sobre isso! ^^

    ;*

    ResponderExcluir
  9. Fiquei curiosa para ver o novo layout do blog. :)
    Meninas, desejo à vocês um feliz Ano Novo e que 2013 seja um ano excelente e cheio de realizações.
    Beijos.

    http://belezadescoberta.blogspot.com.br

    ResponderExcluir
  10. Eu adortei a ideia do novo lay, acho que iria ficar lindo! :D
    E adorei o tutorial, o resultado é ótimo!
    Beijocas!

    PiinkCookie.blogspot.com

    ResponderExcluir
  11. oie amei o tutorial concerteza vou fazer srsr
    já estou seguindo segue o meu tambem?
    http://jeitodatay.blogspot.com.br/

    ResponderExcluir
  12. Amei! Bem simples mesmo *-*

    help-adolecentro.blogspot.com.br/

    ResponderExcluir
  13. Ótimo tutorial! Adorei :)

    pinkpimenta.blogspot.com.br/

    ResponderExcluir
  14. Sempre vejo esse menu por aí, é lindo! <3
    ps: obrigada pela visita e amei o nome do blog aqui. Beijo!

    Just Debee

    ResponderExcluir
  15. Adorei o menu, ele é lindo e fácil :D Ah, aproveitando para desejar Feliz Ano Novo! Beijos e te espero de volta lá, hein?!
    http://cupcakedegarotas.blogspot.com.br/

    ResponderExcluir
  16. Adoro esse menu
    muito bom o tutorial
    bjinhos
    http://chuvadesonhooficial.blogspot.com.br/

    ResponderExcluir
  17. Adorei o tutorial!

    Desejo a você e a todas as suas leitoras um 2013 repleto de alegria, emoção, saúde e paz!
    http://cindereladementira.blogspot.com.br/
    https://www.facebook.com/CinderelaDeMentira

    ResponderExcluir
  18. Adorei o tutorial ;)
    Eu acho o Lay do Blog Perfeito. Eu fico tentando mudar o meu. Mas sempre fica uma porcaria.
    beijos

    ResponderExcluir
  19. Seguindo de volta! Gostei do blog! ^^ O tutorial é bem interessante e achei o lay atual bem legal, mas se querem mudar, mudanças sempre são bem vindas quando são pra melhor =)
    Feliz Ano Novo!!!!

    ResponderExcluir
  20. um dos tutos mais fáceis!

    Seria pedir muito pra voltar no blog? @esteffanifontes - tt
    Aos Dezesseis Anos - aosdezesseisanos.blogspot.com.br
    Obg pela visita, volte sempre! Beijos, e Feliz Ano Novo.

    ResponderExcluir
  21. Ótimo o tutorial!
    bjss
    coiisinhasdegarotass.blogspot.com.br

    ResponderExcluir
  22. Estava procurando o tutu , ele é lindo ...
    Bjs. http://todasdesastradas.blogspot.com.br/

    ResponderExcluir
  23. Amei ele, super pratico, eu estava procurando um assim, mas dá uma preguiça auehuahe
    shespangled.blogspot.com

    ResponderExcluir
  24. Oiê, gostei muito do blog, e já estou seguindo. Se puder faça uma visita no meu e veja o meu primeiro tutorial sobre como customizar uma mini saia jeans, destruindo e pintando a bandeira dos EUA.

    capuccinonacaneca.blogspot.com.br

    ResponderExcluir
  25. Nahim...mudanças são sempre bem-vindas!^^ Adoro e curti muito o tutorial!^^
    Desculpe a demora em responder o comentário. Estava viajando e sem internet. Desejo para você um ótimo 2013 repleto de luz e muito sucesso.
    Beijos!
    Paloma Viricio- Jornalismo na Alma

    ResponderExcluir
  26. Quero agradecer pela sua visita em meu blog, e pedir: volte sempre!
    Beijos @esteffanifontes - tt
    Aos Dezesseis Anos - aosdezesseisanos.blogspot.com.br

    ResponderExcluir
  27. Saudade meninas! :ç

    http://cappuccinoeaconta.blogspot.com.br
    Faz uma visita? ♥
    @PriscilaFrr

    ResponderExcluir
  28. Uau, que fácil, com um tutorial assim bem explicadinho até eu consigo fazer haha!

    Fiquei curiosíssima pra ver o novo layout também. Posso fazer uma sugestão? Poderiam fazer um tutorial de como colocar esse "aviso" (como o que avisa que vocês estão viajando) que aparece quando a pessoa acessa o blog... O que acham. hein?

    Beijos
    www.picturesandreams.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou, é realmente um tuto bem fácil *-* .
      Ah! Pode deixar que faço o tutorial da caixinha de aviso sim, logo mais vou posta-lo aqui no blog.
      Beijos!

      Excluir
  29. Passando de novo!

    Seria pedir muito pra voltar no blog? @esteffanifontes - tt
    Aos Dezesseis Anos - aosdezesseisanos.blogspot.com.br

    ResponderExcluir
  30. Quanta coisa boa de aprender né.
    adorei as dicas.
    bjuhs e otima semana :)))
    http://quecorusar.blogspot.com.br

    ResponderExcluir
  31. ótimo tutorial, beijinhos e obrigada pela visita !!

    http://www.descontraidas.com

    ResponderExcluir
  32. Adorei o tuto, o menu fica lindo :d
    bjinhos
    conversando-com-a-lua.blogspot.com.br

    ResponderExcluir

~ Antes de perguntar qualquer coisa acesse a pagina F.A.Q e verifique se sua questão já não foi respondida
~ Não se esqueça de deixar a URL do seu blog no final do comentário para que possamos retribuir
~Não temos o costume de responder os comentários, apenas de tirar as dúvidas das leitoras caso tenham perguntado algo referente ao post ou ao blog

Obrigada por comentar, volte sempre!