Tag Meme + Menu Deslizante


   Ontem recebi uma Tag Meme e um selinho, agradeço muito pelos dois, estarei respondendo a Tag primeiro, e na Próxima postagem o Selinho, ok?! Por sinal gente, meu blog atingiu a meta de 200 seguidores ontem, agradeço muito á vocês, muito obrigado mesmo viu gente?! Então, ontem eu lembrei que duas blogueiras me pediu para postar este tutorial, ensinando como colocar aqueles menu deslizante la em cima do blog, ele fica muito show.. um dos menus mais bonitos {Que eu acho}, é bem facilzinho de fazer, entretanto merece atenção obviamente..

Tag Meme {Recebi do blog Paulinha Dream}

1. Se não pudesse mais morar no Brasil, em qual país gostaria de viver ?
 Com certeza Espanha, por sinal, meu sonho é morar e fazer faculdade lá.
2. Tem uma amizade de infância que dura até hoje?
 Tenho sim, e várias por sinal.. {Mariana, Pamella, etc..}
3. O que pra você nunca é demais?
 Bolo de chocolate {KKK}
4. O que não pode faltar no seu dia-a-dia?
 Umas comidinhas/bebidinhas de alta ajuda {Chocolate, Refrigerante}
5. O ultimo motivo que te fez chorar?
 Lembrar de um ente querido {Familia}
6. Quem é o sua cantora favorita?
 Britney Spears
7. Já chorou ouvindo música?
 Não que eu me lembre  {KK}
8. Melhor programa de televisão?
 AHH, quando eu tinha uns 8 Anos adorava assistir Topa ou não Topa do Silvio Santos, agora nem programas assisto mais {KK}
9. Qual a história favorita de infância?
 AHH, nunca gostei muito de histórias {KK}
10. uma data que marcou sua vida?
 COM CERTEZA 8 DE DEZEMBRO, meu aniversário, foi tão bom ele.. eu convidei alguns amigos da escola {falsos por sinal}, eles não foram e mesmo assim aquele foi o aniversário que mais me marcou, como eles não veio deu tudo certo, trouxeram até UMA TELEVISÃO GIGANTE {Magina subindo as escada com uma TV}, ainda bebi batida pela primeira vez, aprendi a dançar eletrônico/Black, NUNCA me esquecerei daquele aniversário..
11. Dois melhores lugares da sua cidade?
 Como eu moro em guarulhos, um lugar que eu adoro ir é ao Shopping e ao Centro.

 Sobre Mim:
1. Sou sincero.
2. Odeio Falsidade.
3. Adoro Bloggar.
4. Sou Fã 100% da Britney Spears
5. Gasto muito.. {xD}
6. Adoro Boliche
7. Detesto McDonald {Na última vez que comi, veio estragado :@}
8. Não suporto mentira.
9. Sou muito na minha..
10. Suporto quase qualquer coisa menos que xinguem meus entes queridos {Amigos, Família, e a diva Britney Spears}
11. Sou blogueiro desde 2010 {Eu tinha outro blog, Fã site}

 Regras á quem participar:
Escrever 11 coisas (aleatórias) sobre você;
Responder às 11 perguntas feitas por quem indicou você e criar 11 novas perguntas para os blogs que você indicar;
Escolher 11 pessoas para repassar este tag e passar o link dos respectivos blogs;
Avisá-los em seus blogs que foram escolhidos;
Não retornar o tag para o blogueiro de que enviou à você;
Postar as regras.

  Perguntas: 
1. Se você fosse escolher entre Família e um emprego muito bem sucedido, que ganha-se tipo bilhões por mês, qual escolheria?
2. Qual música marcou sua infância?
3. Qual seu gênero musical favorito?
4. Entre amor e amizade, qual escolhe?
5. 3 Coisas que fazem você escolher seu(sua) parceiro(a)?
6. 3 Coisas que lhe fazem feliz!
7. Qual seu(sua) cantor(a) favorita(o)
8. Hobby predileto?
9. 3 Comidas Favoritas!
10. 4 Coisas que te irritam muito!
11. Nome de três pessoas que são/foram muito especiais para você!

 Indico:
- Alma Poetica {www}
- L' Amour Mon Age {www}
- O Blog da Blogueira {www}
- Garota Apimentada {www}
- One Esmalte {www}
- Amo Nail Art {www}
- Cover of Girl {www}
- Menino Ridículo {www}
- Jeito Único {www}
- Just Be Happy {www}
- Mundo das Blogueiras {www}

Finalmente o Tutorial:

  Aos que não sabem como é que ficará, veja a imagem logo abaixo:

  Vá em Design  Editar HTML  Expandir Modelo de Widgets  Ctrl + F  Procure por:
]]></b:skin>
Logo acima cole este código:


/* Aqui definimos as propriedades CSS para a lista do menu */
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navigation li {
    width: 103px;
    display:inline;
    float:left;    
}
ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9; /*---cor de fundo---*/
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;  /*---cor da borda---*/
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);  
}
ul#navigation li a:hover{
background-color:#CAE3F2;
opacity: 1;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8; /*---cor do link---*/
    text-shadow: 0 -1px 1px #fff;      
}


/* Aqui definimos as imagens de fundo para os links dos itens da lista do menu*/
ul#navigation .home a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPMPbwaST5cf39Gyp0gkkJ3w3aNLO98-SP-qPGGsAhPseyz9BjanTI-wynIH0b_OWvn_z0Fh9YSfHfm2iNJxSV8c1v8SB83UagsAy_BMdIpvbrarcG6mYK2RG78OPyUJjODAsViWa3Uew/s1600/home+%25281%2529.png);
}
ul#navigation .sobre a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwNp1qaUqmFgWbyNn6orK7oyuBa46hcLbAvyfmCqE5OO_GU0NenZMLa-gUQf5PmCbXeSBpOOuF03gB7ignszYEuDRt8nJABvy2yQE8UnS2lvypCt1BCqjia0skWYKxkd0s5IADHDgmJ9s/s1600/id_card+%25281%2529.png);
}
ul#navigation .contato a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5bl63Su6Izu7OxaoStCQnjp1bFoqlUOarYl5jLxTVcXYaj3Q-EMIbCJHdvyGC7Unm_PzYwiqNy24j2-RVHiTlqu9ArRxMmjAQqFPUtlRwkOtxeX0Uo60Xsz2rkymc8rl2Jhyphenhyphenn-kYuewU/s1600/mail+%25281%2529.png);
}
ul#navigation .feedrss a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyPeJ-wH2h5GUHiXc7u0rawckmPC_4tGBXo1FLaMFe3X9tum1JDyUQyPvOFdDpNcTCRrnarzFVFO6trGhImy1qDcG0A74NWSE_OXIYJQPPvXj5BhSjh8ujSmbR22eyzBlZONpjeYKtFMA/s1600/rss+%25281%2529.png);
}
ul#navigation .imagens a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhglscQLHs_otMyvazRjUmMMNrwOXVNQpXnPSi6Z9EXqS7ieyynMfzh-jkaWPv9ArIJPrc_G44zdtPcMGrrFfwdkourAlqV2M1g2YjYilfTBWTlW3At40QD8QwWrfujXIjl2b5Q8pG5ihU/s1600/images.png);
}
 Copie o código que está logo acima {Ele é longo, por isto tive que colocar em uma caixinha de texto} Agora procure pela tag:
</head>
Cole este código logo acima:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
    var d=300;
    $(&#39;#navigation a&#39;).each(function(){
        $(this).stop().animate({
            &#39;marginTop&#39;:&#39;-80px&#39;
        },d+=150);
    });

    $(&#39;#navigation &gt; li&#39;).hover(
    function () {
        $(&#39;a&#39;,$(this)).stop().animate({
            &#39;marginTop&#39;:&#39;-2px&#39;
        },200);
    },
    function () {
        $(&#39;a&#39;,$(this)).stop().animate({
            &#39;marginTop&#39;:&#39;-80px&#39;
        },200);
    }
);
});
</script>

 Agora para acabar tudinho, procure por:
<header>
                                                        Cole este código acima:
<ul id='navigation'>
 <li class='home'><a href='URL-AQUI'><span>Home</span></a></li>
 <li class='sobre'><a href='URL-AQUI'><span>Sobre</span></a></li>
 <li class='contato'><a href='URL-AQUI'><span>Contato</span></a></li>
 <li class='feedrss'><a href='URL-AQUI'><span>Feed</span></a></li>
 <li class='imagens'><a href='URL-AQUI'><span>Imagens</span></a></li>
</ul>


  Entendendo um pouquinho mais:
 Bem pessoal no primeiro código que eu passei para vocês tem alguns itens assim acompanhado de http://___.png, elas são as imagens que quando você passa o mouse, o menu desce e aparece ela..vocês podem mudar {Só um concelho coloque imagens não tão grandes, e nem tão pequenas, porque se não fica estranho}, já no segundo código não pode mudar nada.. Passando para o terceiro, ele é a parte que aparece, você tem que colocar os dados corretamente, apenas as partes em negrito você deve/pode mudar com o que se pede..
   Espero que eu tenha ajudado vocês com este tutorial, a postagem foi longa, mais garanto que ela ajudará muitos! ;) Todos os créditos ao Mundo Blogger!

66 comentários:

  1. Já to seguindo fofo *--* , adorei seu blog , já conheço esse tutorial mas é super lindo néh ? Beijos !
    ~ http://mundo-teens-mt.blogspot.com.br

    ResponderExcluir
  2. Adorei a tag, e já conhecia o menu, ele é muito fofo ;)
    cat-girl-cg.blogspot.pt

    ResponderExcluir
  3. Que fofo esse menu!! Amei o tutorial. (:
    Gostei muito da tag, deu pra perceber que você é muito legal e sincero.^^


    chuvinhadeoutubro.blogspot.com.br

    ResponderExcluir
  4. Eu amo esse tutorial :) As tags também, bem legal ♥

    Beijos seguindo

    pincelandoceu.blogspot.com

    ResponderExcluir
  5. Muito bom seu tutorial ...
    Adorei sua visita no meu blog,e adorei seu blog
    Estou seguindo viiu?
    e gostaria de fazer afiliação?
    Bjinhos

    garotasdeat.blogspot.com

    ResponderExcluir
    Respostas
    1. A Parte de afiliação ainda estou arrumando.. vendo algumas coisinhas, quando estiver tudo pronto eu lhe aviso ok amr? :D

      Excluir
  6. Ótimo tutorial! Confesso que sou péssima em html e esses tutoriais me ajudam bastante.
    P.S. Também adoro a Britney, mas pelo jeito, não tanto quanto você :P
    Beijinhos

    www.hiperbolismos.blogspot.com

    ResponderExcluir
  7. Fica bem bonito esse menu!

    Beijos,
    Mundorosaachock.blogspot.com

    ResponderExcluir
  8. *--* que legal a tag! e amei o tuto '-' tá bem explicadinho, e deixa o blog com um visual diferenciado :3 Querida, seu blog é mt divo \o/ Tem um lay lindo, e um super conteúdo! vc está de parabéns viu? estou seguindo aqui! quando tiver um tempinho passa no meu blog? e se gostar seguir? vai ser uma honra te receber lá :3

    http://morangosdespedacados.blogspot.com.br/

    ResponderExcluir
  9. Adorei o menu.
    Muito fofo :3
    Também estou seguindo...
    blogcuteandhappy.blogspot.com

    ResponderExcluir
  10. Que tutorial util, eu queria muito saber!!!


    fixalove.blogspot.com.br

    ResponderExcluir
  11. Obrigada pela visita lá no blog!
    Estava morrendo para achar o tuto desse menu!
    Bjs!
    Seguindo!
    http://sweetdrens.blogspot.com

    ResponderExcluir
  12. epa! o senhor me indicou um selo e nem me avisou? não visitou meu blog nem pra responder, hahaha. estou zuando #magoou
    hahah,oks, mto obrigada amore
    espero sua visita
    bj
    lamourmonage.blogspot.com

    ResponderExcluir
  13. Retribuindo a visita!!
    Olhe seu blog vai ser muito util pra mim viu gostei dos tutoriais que tem aqui

    Beijão



    http://rosamaispink.blogspot.com.br

    ResponderExcluir
  14. Adoreii o tuto =]

    #bezooos~~> perfeitosmile.blogspot.com

    ResponderExcluir
  15. otimo tutu!Seguindo de volta, parabens pelo blog!
    http://kelly-club.blogspot.com.br/

    ResponderExcluir
  16. Tô seguindo :3
    Adoogo esse menu, acho que ele é discreto e tem um efeito muito bonito!

    http://imperfect-fantasy.blogspot.com.br/

    ResponderExcluir
  17. WEE kk e não é que eu também amo boliche? Pensei que fosse a única no Brasil O.O KKK

    Uprising Teen

    ResponderExcluir
  18. O tuto é bem legal e pelo que você falou de você, você tambem é shuahusa'beijos.
    http://gilsilene.blogspot.com.br/

    ResponderExcluir
  19. O teu blog também é muito interessante, estou a seguir-te também, adoro as tags que tu tens irão ser muito útil em breve ^^

    Bjo :3
    http://osuwarii.blogspot.com/

    ResponderExcluir
  20. Obrigaaada pelo carinho, amei aqui e já estou seguindo ok? Beijos
    http://londonhit.blogspot.com

    ResponderExcluir
  21. legal o tutorial, e a tag dá perguiça de responder, mas é divertida *--*
    bjoos

    http://mundoodasblogueiras.blogspot.com.br/

    ResponderExcluir
  22. Obrigada pela visita lá no blog! Já estou seguindo akii e já curti sua fanpage ^^
    Bezoos --> My Candy Space

    ResponderExcluir
  23. Obrigada pela visita e volte sempre!
    Lindo blog!
    Parabéns pela meta cumprida, e pelo meme.
    Muito bacana o tutorial.

    @wendyelmb
    http://tecido-doce.blogspot.com/
    http://cerejadeneve.com/

    ResponderExcluir
  24. Tutorial útil! Quer ser afiliado do Menina Blogueira? Obrigada pela visita no meu blog xD!


    http://meninablogueiratutoriais.blogspot.com.br/

    ResponderExcluir
  25. Parabéns por mais uma meta atingida!!vc merece o blog é d++
    o menu fica SHOW!!
    bjoos'
    noisconectados.tk

    ResponderExcluir
  26. Parabéns por conseguir atingir a sua meta,você merece seu blog é super demais.Beijos

    http://amoraruffles-blogger.blogspot.com.br

    ResponderExcluir
  27. Obrigada pela visita! Amei o seu blog e ja estou seguindo.
    Amo essa tuto, eu usava no meu outro lay, mas levei uma eternidade para entender... ~le muito lerda~ kkk

    Nhack ~~~> História Agridoce

    ResponderExcluir
  28. Vim aqui retribuir sua visitinha lá no meu blog, obrigadinha viu, já tô seguindo aki, alias adorei o seu cantinho, continue sempre assim BJS

    Meu Cupcake Pink

    ResponderExcluir
  29. Retribuindo a visita que fez no meu blog, ja to te seguindo
    http://sweet-strawberry-ri.blogspot.com.br/

    ResponderExcluir
  30. Adorei!esse menu é super fofo *-*
    Bjs Chibiusa,
    bubble-explosion.blogspot.pt

    ResponderExcluir
  31. Esse menu fica lindo no blog, inclusive até já uso no meu blog ;)

    Bjoos >> Fanny Dream

    ResponderExcluir
  32. AAh, que legaaal seu tutorial amore! Amei, e nunca tinha visto esse tipo de menu em outro site...\Õ/

    Aêêê, mais um fã de música pop que eu encontro na blogosfera! Sou fãzoona de Backstreet Boys e Spice Girls, e amo música pop em geraal tbm! XD

    Beeijos amore, e muuito obrigada por visitar o meu blog, volte lá quantas vezes quiser!
    www.blogmymemories.com

    PS.: Participe do concurso Forever Young! Nele, você compartilha sua nostalgia e concorre a um pen drive (em formato de pulseira bate-enrola) de 8Gb ou uma camiseta personalizada do blog! Saiba mais no site: http://concursoforeveryoung.tk

    ResponderExcluir
  33. Muito legal o tuto!

    porenseetcs.blogspot.com

    ResponderExcluir
  34. Respondi uma tag parecida em meu blog. O menu também é muito interessante... Gostei. Obrigada pelo comentário. Volte sempre no GQ, é uma honra te ver lá!

    Beijos,
    Anna
    http://garota-queen.blogspot.com/

    ResponderExcluir
  35. adorei o tutorial, é bem útil (:
    obrigada, pela visita no meu blog, e por estar me ajudando com minhas metas, estou seguindo aqui também, amei o seu blog !

    http://fairiesdancing.blogspot.com.br

    ResponderExcluir
  36. Olá! Bem divertida essa tag, adorei suas respostas :D
    Obrigada por me indicar, eu já a tinha respondido no blog já kkkkkk
    Bjos!
    amonailart.blogspot.com

    ResponderExcluir
  37. Esse menu é muito legal mesmo, lindo *--* Adorei suas respostas! Obrigada pela visita, amei seu cantinho e desejo boa sorte com a nova meta ;D
    Smach:3 | http://www.viciadasemcupcake.blogspot.com.br/

    ResponderExcluir
  38. o tuto que postei lá ((:

    xoxo :*
    http://mini-fofoquinhas.blogspot.com.br/

    ResponderExcluir
  39. adoro esse menu! rs amei a tag;D

    http://conectadas2.blogspot.com.br/

    ResponderExcluir
  40. Adoreiii o tutu ....
    AH adorooo as musica Britney Spears
    Parabens pelo tag

    ♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥
    http://blog-meninasmalucas.blogspot.com.br/
    ♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥

    Volte sempre , espero voce la !
    bim *__*

    ResponderExcluir
  41. É muito lindo o menu, eu uso no meu blog ^^

    http://generationteenbr.blogspot.com.br

    ResponderExcluir
  42. Menu liindo, amo esse efeito!
    Tô seguindo tbm, obg por seguir, seu blog é liindo!
    Beijão ♥

    plush-girl.blogspot.com

    ResponderExcluir
  43. gostei bastante do tutorial, obrigada pela visitinha no meu blog
    Já ganhas-te um novo seguidor ^^ Viver num T0 ❤

    ResponderExcluir
  44. Adoro esse menu *-* é fantastico mesmo !!! Vlw por visitar o QCD ,

    Seguindo ^^

    http://quandochegardezoito.blogspot.com.br/

    ResponderExcluir
  45. O seu blog é lindo *-*
    Seguindo já floor! Beijos
    neerd-priincesa.blogspot.com

    ResponderExcluir
  46. Ahhhnnnw ajudou sim, e muito! É super útil, já havia visto em vários blogs e achei super cute *w*

    #Chuaaaaaaac! :3 Diamonds of a Princess

    ResponderExcluir
  47. Fica bem legal o resultado. Eu fiz esse tutorial a muito tempo lá no FT, e bastante gente curtiu ^^

    www.farryteen.blogspot.com

    ResponderExcluir
  48. Legal o meme,gostei
    seu blog é fofo Jhon
    tou seguindo :D

    http://dezapaixao.blogspot.com.br/

    ResponderExcluir
  49. Eu amei as suas respostas e tutorial, fica super lindo ^^
    http://themudancas.tk/

    ResponderExcluir
  50. Linda queria agradecer muito sua visita no meu blog Atitude Teen , amei o comentário e vim aqui só para agradecer e para seguir seu blog , beijos e obrigada pela visita ....se der eu vou fazer um post no meu blog sobre o seu blog se puder faz a mesma coisa com o meu porque só tenho 10 seguidores seria muito bom se você me divulga-se tchau beijos...

    http://attitudeteeen.blogspot.com.br

    ResponderExcluir
  51. lindo a tag *-* esse tutorial dá um resultado incrivel, amei :D
    #Garota do Olhar Sincero

    ResponderExcluir
  52. Adorei o tuto viu flor!
    Obrigada pelo coment la no meu blog!
    O lay do post anterior ta divooo!
    Bjs

    imperfectsmiles-nathi.blogspot.com

    ResponderExcluir
  53. Lindo blog, parabéns pela tag também! Esse menu fica tão lindo num blog, mas eu não sei se me daria bem com ele no meu design...

    diamantesdeumagarota.blogspot.com

    ResponderExcluir
  54. Ahh Britney Adoro ela ^^

    http://manguitarosa.blogspot.com.br/

    beijos

    ResponderExcluir
  55. Oi!É a Lagoona do blog mhtudodebom.blogspot.com.Queria dizer que estou seguindo o seu blog(mas não publicamente).Queria dizer também que eu tenho outro blog além desse:amigadoslivros.blogspot.com(nele eu posto minhas opiniões sobre os livros que tenho).Visita lá!
    Beijos e tchau!

    ResponderExcluir
  56. Oii (: Adorei o tuto, muito legal mesmo. Temos algumas coisas em comum, também odeio falsidade, odeio que xinguem ou falem mal da minha diva a Miley Cyrus (diva sempre*-*) e é isso.
    Bjs
    segredos-deumapoeta.blogspot.com

    ResponderExcluir
  57. Adorei o tutorial ficou lindoooo !!
    Obrigada pela visita lá no Coff Emilia, eu gostaria muito de te pedir para participar do concurso que ta havendo lá, Por favor!!!
    Aqui o link da postagem :
    http://coffemilia.blogspot.com.br/2012/07/clube-do-esmalte-aviso-do-concurso.html
    Pf participa ?? To te esperando lá.

    ResponderExcluir
  58. Oi amo tudo que você posta é muito interessante. Então eu criei um blog se puder fazer parceria comigo, http://diiamantelapidado.blogspot.com.br/

    ResponderExcluir
  59. Nossa! Que considencia! Eu também faço aniversário em 8 de Dezembro! Que maneiro!

    ResponderExcluir

© eJhonas - 2012. Todos os direitos reservados.
Design Jhonas Balsas.
Tecnologia do Blogger.
imagem-logo